web前端-HTML-div语法

简介: web前端-HTML-div语法

N.1 <div>盒子语法属性介绍

1)盒子边框

border:1px solid red;

2)盒子边距属性

(1)外边距属性

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

其中:margin:(auto ,auto);

第一个表示top和bottom上下关系,第二个表示left和right左右关系

因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)

(2)内边距属性

padding 使用简写属性设置在一个声明中的所有填充属性

padding-bottom 设置元素的底部填充

padding-left 设置元素的左部填充

padding-right 设置元素的右部填充

padding-top 设置元素的顶部填充

3)盒子宽高属性

width: 600px;

height: 300px;

width: 95%; 宽如果设置百分比的话,就以浏览器的窗口大小为100%。

4)盒子背景颜色

background-color: green;

5)盒子嵌套处理

(1)内部盒子悬浮

 常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型、float 浮动 和 通过inline-block 行块标签等。这里讲解

display: flex;

(2)内部盒子x轴对齐

[1] justify-content : flex-start ; 默认靠右对齐  

[2] justify-content : flex-end; 靠左对齐

[3] justify-content : center ; 水平居中    

[4] justify-content : space-around;平均分布(左右有间隔)  

 

[5] justify-content : space-between;平均分布(左右无间隔)

   

[6] 当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。  

   

(3)内部盒子y轴对齐

[1] align-items: flex-start从上到下

[2] align-items: flex-end从下到上

[3] align-items: center; 挤在一起居中(垂直居中)

[4] align-items: fstretch拉伸(默认值)

N.2 操作案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>多盒子的布局</title>

<style>

.box {

display: flex; /*盒子内“子盒子”悬浮并列*/

justify-content: center;/*盒子内“子盒子”的x轴盒子居中*/

align-items: center; /*盒子内“子盒子”的y轴盒子居中*/

border:1px solid red;/*边框*/

margin:40px auto;/*外部大盒子左右轴居中,距离上下40px */

width: 99%;/*宽占浏览器窗口的99%*/

height: 200px;

}

.box1 {

background-color: yellow; /*背景颜色*/

margin:10px;/*外边距*/

width: 100px;

height: 150px;

}

.box2 {

background-color: green;

margin:10px;

width: 200px;

height: 150px;

}

.box3 {

background-color: red;

margin:10px;

width: 300px;

height: 150px;

}

</style>

</head>

<body>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

</body>

</html>

相关文章
|
1天前
|
存储 缓存 前端开发
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
100道 IT名企前端面试真题,Web前端阿里等大厂面试题汇总
|
1天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效(1),头条前端面试节奏
10款精美的web前端源码的特效(1),头条前端面试节奏
|
1天前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
1天前
|
移动开发 前端开发 JavaScript
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
Java和web前端,IT新人该如何选择?,2024年最新Web前端内存优化面试
|
1天前
|
前端开发 JavaScript
Web前端开发之面试题全解析 一,2024年最新面经牛客
Web前端开发之面试题全解析 一,2024年最新面经牛客
|
1天前
|
移动开发 前端开发 JavaScript
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
Web前端开发之面试题全解析 一(3),前端面试题背不下来怎么办
|
3天前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
109 0
|
3天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
39 1
|
3天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0