03-盒子模型
作用：布局网页，摆放盒子和内容。
盒子模型-组成
- 内容区域 – width & height
- 内边距 – padding（出现在内容与盒子边缘之间）
- 边框线 – border
- 外边距 – margin（出现在盒子外面）
div { margin: 50px; border: 5px solid brown; padding: 20px; width: 200px; height: 200px; background-color: pink; }
边框线
四个方向
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div { border: 5px solid brown; width: 200px; height: 200px; background-color: pink; }
单方向边框线
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
div { border-top: 2px solid red; border-right: 3px dashed green; border-bottom: 4px dotted blue; border-left: 5px solid orange; width: 200px; height: 200px; background-color: pink; }
内边距
作用：设置 内容 与 盒子边缘 之间的距离。
- 属性名：padding / padding-方位名词
div { /* 四个方向 内边距相同 */ padding: 30px; /* 单独设置一个方向内边距 */ padding-top: 10px; padding-right: 20px; padding-bottom: 40px; padding-left: 80px; width: 200px; height: 200px; background-color: pink; }
提示：添加 padding 会撑大盒子。
- padding 多值写法
技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。
尺寸计算
默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论：给盒子加 border / padding 会撑大盒子
解决：
- 手动做减法，减掉 border / padding 的尺寸
- 內减模式：box-sizing: border-box
外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与 padding 属性值写法、含义相同
版心居中
左右 margin 值 为 auto（盒子要有宽度）
div { margin: 0 auto; width: 1000px; height: 200px; background-color: pink; }
清除默认样式
清除标签默认的样式，比如：默认的内外边距
/* 清除默认内外边距 */
* { margin: 0; padding: 0; box-sizing: border-box; } /* 清除列表项目符号 */ li { list-style: none; }
元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
外边距问题
合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中的较大值生效
.one { margin-bottom: 50px; } .two { margin-top: 20px; }
外边距塌陷
场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
现象：导致父级一起向下移动
.son { margin-top: 50px; width: 100px; height: 100px; background-color: orange; }
解决方法：
- 取消子级margin，父级设置padding
- 父级设置 overflow: hidden
- 父级设置 border-top
CSS盒子模型的详细解析(2)：https://developer.aliyun.com/article/1393337?spm=a2c6h.13148508.setting.31.434b4f0eJFR9Df
