盒模型的理解和auto的用法
1.元素框与框模型属性
- 标准的盒模型为包括内容区,内边距,边框,外边距
- 元素框的中心区域是内容区,这是必须要有的
- 其他区域,如内边距,边框,外边距都是可选的,因为它们的宽度允许为0
- 标准盒模型的宽度 =
content + padding + border + margin,如果设置padding会导致盒子的宽度变大,可以通过box-sizing改变标准,box-sizing:border-box就代表了盒子的实际宽度
1.1元素框
1.1.1 元素框
| 序号 |
名称 |
描述 |
| 1 |
内容区content |
必须要有,相当于盒子里的物品,它的四周区域是可选的 |
| 2 |
内边距padding |
内容与边框之间的填充区域,相当于箱子里的泡沫 |
| 3 |
边框border |
边框可以将内容区与外界进行隔离,相当于盒子外包装 |
| 4 |
外边距 margin |
多个盒子之间的间隙,相当于和另一个盒子之间的距离 |
padding,margin,border 的每一条边都可以单独设置属性pading 和 margin 是背景透明的,所以只能设置宽度,不能设置颜色与样式
1.1.2内边距
内边距分为上右下左四个方向,如下:
| 序号 |
名称 |
描述 |
| 1 |
padding-top |
上边距 |
| 1 |
padding-right |
右边距 |
| 1 |
padding-bottom |
下边距 |
| 1 |
padding-left |
左边距 |
内边距属性值分为单值到四值的写法,如下:
| 序号 |
值数量 |
举例 |
描述 |
| 1 |
四值 |
padding: 5px 10px 15px 20px |
上 — 右 — 下 — 左 |
| 2 |
三值 |
padding: 5px 10px 5px |
上 — (左右相等) — 下 |
| 3 |
双值 |
padding: 5px 10px |
(上下相等) — (左右相等) |
| 4 |
单值 |
padding: 10px |
上下左右全相等 |
1.1.3外边距
内边距分为上右下左四个方向,如下:
| 序号 |
名称 |
描述 |
| 1 |
margin-top |
上外边距 |
| 2 |
margin-right |
右外边距 |
| 3 |
margin-bottom |
下外边距 |
| 4 |
margin-left |
左外边距 |
内边距属性值分为单值到四值的写法,如下:
| 序号 |
值数量 |
举例 |
描述 |
| 1 |
四值 |
margin: 5px 10px 15px 20px |
上 — 右 — 下 — 左 |
| 2 |
三值 |
margin: 5px 10px 5px |
上 — (左右相等) — 下 |
| 3 |
双值 |
margin: 5px 10px |
(上下相等) — (左右相等) |
| 4 |
单值 |
margin: 10px |
上下左右全相等 |
1.2边框
- 边框
border 比较特殊, 除了可以设置宽度, 还可以设置样式和颜色,所以有更多的属性 - 边框的样式可以有实线
solid,点状dotted,虚线dashed等
1.2.1 上边框
| 序号 |
名称 |
描述 |
| 1 |
border-top-width: 1px |
上边框宽度 |
| 2 |
border-top-style: solid |
上边框样式 |
| 3 |
border-top-color: black |
上边框前景色 |
| 4 |
border-top: 1px solid black |
上边框属性简写 |
1.2.2 右边框
| 序号 |
名称 |
描述 |
| 1 |
border-right-width: 1px |
右边框宽度 |
| 2 |
border-right-style: solid |
右边框样式 |
| 3 |
border-right-color: green |
右边框前景色 |
| 4 |
border-right: 1px solid green |
右边框属性简写 |
1.2.3 下边框
| 序号 |
名称 |
描述 |
| 1 |
border-bottom-width: 1px |
下边框宽度 |
| 2 |
border-bottom-style: solid |
下边框样式 |
| 3 |
border-bottom-color: grey |
下边框前景色 |
| 4 |
border-bottom: 1px solid grey |
下边框属性简写 |
1.2.4 左边框
| 序号 |
名称 |
描述 |
| 1 |
border-left-width: 1px |
左边框宽度 |
| 2 |
border-left-style: solid |
左边框样式 |
| 3 |
border-left-color: skyblue |
左边框前景色 |
| 4 |
border-left: 1px solid skyblue |
左边框属性简写 |
1.4.5 所有边框
| 序号 |
值数量 |
举例 |
描述 |
| 1 |
三值 |
border: 1px solid red |
宽度—样式—前景色 |
| 2 |
双值 |
border: 1px solid |
宽度—样式:默认黑色 |
- 轮廓
outline: 位于 border 与 margin 之间,不属于盒模型的一部分,因此不占空间 - 内边距,边框不允许是负值, 而外边距允许
- 内边距影响到盒子大小, 而外边距影响到盒子的位置
2.auto的用法
auto可以自动计算子元素的宽度和外边距
2.1实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * :not(body) { outline: 1px dashed; } .container { width: 200px; } p { width: 100px; margin-left: 20px; /* 通过浏览器自动计算margin-right的宽度,则是200-100-20=80px */ margin-right: auto; } </style> <title>Document</title></head><body> <!-- 如果父元素指定了宽度,其中的子元素都设置了宽度,那么最后一个元素的宽度就可以写为auto,auto的意思就是浏览器自动计算 --> <div class="container"> <p>php.net</p> </div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 1000px; height: 800px; margin: 0 auto; background-color: #ccc; } </style> <title>Document</title></head><body> <div class="container"> 指定盒子宽度,可以通过margin:auto水平居中 </div></body></html>
2.2效果图
3.总结
- 盒模型是PC端固定布局的重点,结合
float和position属性进行布局 auto属性一般为浏览器自动进行计算,减轻了开发人员的手动计算,合理的利用auto属性对布局是有益的
