前端基础-CSS模型
盒子模型
我们说div就是一个块，它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程
小米官网：www.mi.com
图示 |
|---|
盒子模型的组成
示意图 |
|---|
盒子模型特性
4个组成部分：宽高、内间距、边框、外间距
1.内边距padding
示意图 |
|---|
注意：
- 添加了padding属性的元素，会加大盒子的宽或高，需要减去padding的大小
- 如果这个块级盒子没有width属性（从父级继承宽度）的时候，添加padding和border不会撑大盒子（盒子内容部分会自动压缩）
2.外边距margin
示意图 |
|---|
多学一招：margin:0 auto;可以让盒子在其父元素中居中
margin:0 auto;和text-align:center;的区别
margin:0 auto； | text-align:center; | |
|---|---|---|
针对的对象 | 盒子—块元素(标签本身) | 标签内部的行元素 |
居中的范围 | 在父盒子中居中 | 自己内部 |
3.边框属性
边框有3要素：边框类型、边框颜色、边框厚度
a) 边框类型
语法：border-style:值
取值：
（1）solid实线
（2）dashed虚线
（3）dotted点线
（4）double双线
示意图 |
|---|
b) 边框颜色
语法：border-color:颜色值
示意图 |
|---|
c) 边框厚度
语法：border-width:尺寸值
示意图 |
|---|
d) 一次性写好
语法：border:类型 颜色 宽度
示意图 |
|---|
e) 单独方向的边框设置
语法：
（1）上边框：border-top:三要素
（2）左边框：border-left:三要素
（3）下边框：border-bottom:三要素
（4）有边框：border-right：三要素
示意图 |
|---|
多学一招：可以设置none
示意图 |
|---|
f) 边框圆角
语法：border-radius:值
取值：可以是像素，也可以是百分比
示意图 |
|---|
多学一招：当盒子是正方形，圆角的值是边的一半或者百分比是50%的时候，是圆（ie8以下不支持），圆角和边框没关系
总结：元素加边框后，元素会变大
4.盒子模型的bug：
a) 盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为准
bug1图示 |
|---|
bug1效果图 |
|---|
解决：避免或将这个间距都给到一个元素上面
b) 两个盒子嵌套关系，两个盒子对于上外边距会重合，以大的边距为准
bug2图示 |
|---|
bug2效果图 |
|---|
解决：
a) 给外部盒子加上边框或者上padding-top
b) 给外部盒子添加oveflow:hidden