1. 介绍
- 盒子的概念：页面中的每一个标签都可以看成一个“盒子”
- 盒子模型：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
2. 内容区域的宽度和高度
- 作用：利用width、height属性设置盒子内容区域的大小
- 属性：width、height
- 属性值：数字+px
3. 边框（border）
-
属性名：border
-
属性值（连写）：border：粗细 线条样式 颜色;（不分先后顺序）
- eg.border：10px soild red;
-
线条样式
- 实线：soild
- 虚线：dashed
- 点线：dotted
-
单方向设置
- 场景：只给盒子的某个方向单独设置边框
- 属性名：border-方位名词
- 属性值：连写取值
4. 内边距（padding）
-
属性：padding
-
属性值：数字+px
-
padding可以作为符合属性使用，表示单独设置某个方向的内边距
- 四值：上 下 左 右
- 三值：上 左右 下
- 两值：上下 左右
5. CSS3盒模型（自动內减）
-
给盒子设置border或padding时，盒子会被撑大，希望盒子能不被撑大
-
自动內减
- 操作：给盒子设置属性box-sizing：border-box；
- 优点：浏览器会自动计算多余大小，自动在内容尺寸中减去
6. 外边距（margin）
- 同内边距
7. 清除默认样式
- 场景：浏览器会默认给部分标签设置默认的margin和padding
<style>
* {
margin:0;
padding:0;
}
</style>
8. 版心居中
- 设置属性margin：0，auto;
9. 外边距折叠现象
1. 合并现象
- 场景：垂直布局的块级元素上下的margin会合并，导致两者距离为margin的最大值
- 解决方法：只给一个盒子设置外边距
2. 塌陷问题
-
场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动
-
解决方法
- 给父元素设置overfloat：hidden
- 转换为行内块元素
- 设置浮动
10. 行内元素的内外边距问题
- 如果想要通过margin和padding改变行内标签（eg：span）的垂直位置，无法生效
- 解决方法：设置行高
