盒子模型
盒子模型介绍
页面中每一个标签都是一个盒子，浏览器渲染网页时，将网页中的每个元素看作是一个矩形区域。
在 CSS 中可以设置盒子的一些属性，包括：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。
内容的宽度和高度
使用 width / height 属性设置盒子内容区域的大小。取值：数字 + px.
div {
width: 300px;
height: 400px;
}边框
使用属性 border 设置边框，属性值有三：粗细 样式 颜色，取值之间空格隔开，不分先后顺序。
使用属性 border-方位名词（left、right、top、bottom）给盒子某个方向单独设置边框，属性值同 border.
粗细取值使用数值 + px.
样式取值使用关键字：solid（实线）、dashed（虚线）、dotted（点线）。
颜色取值参考简介 - 颜色取值
名：（bd）
属性值：粗细（border-width） 线条样式（border-style） 颜色（border-color）。复合属性，单个取值的连写，
div {
border: 5px solid pink;
}内边距
内边距是盒子内部与内容区域的距离。
使用属性 padding 设置。
属性取值：数值 + px.
- 取一个值，同时添加四个方向的内边距。
- 取四个值，作为复合属性使用，添加 上、右、下、左 方向的内边距。
- 取三个值，作为复合属性使用，添加 上、左右、下 方向的内边距。
- 取两个值，作为复合属性使用，添加 上下、左右 方向的内边距。
div {
padding: 10px 20px 30px 40px;
}盒子尺寸
由于边框和内边距会撑开盒子尺寸，所以盒子尺寸 = width 或 height + 边框粗细 + 内边距尺寸。
自动内减
由于边框和内边距会撑开盒子尺寸，需通过计算后手动在内容中减去，这样比价麻烦，可以给盒子设置属性 box-sizing: border-box，此时浏览器会自动计算多余大小，自动在内容中减去
div {
box-sizing: border-box;
}外边距
外边距是盒子边框外的距离。
使用属性 margin 设置盒子外部的尺寸。属性值：数值 + px.
使用属性 margin + 方位名词（left、right、top、bottom）设置盒子单个方向的外部的尺寸。属性值：数值 + px.
div {
margin: 5px;
margin-left: 5px;
}清除默认样式
浏览器默认给部分标签设置默认的属性。
如：
- body 标签默认有
margin:8px;. - p 标签默认有上下的 margin.
- ul 标签默认有上下的 margin 和 padding-left.
解决方法：
/*选择想要去除的标签*/
body, button, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
/*选择所有元素*/
* {
margin: 0;
padding: 0;
}外边距折叠合并
垂直布局的块级元素，上下的 margin 会合并。最终两个块元素的距离为 margin 的最大值。
尽量避免两个相邻盒子的接触方向都设置 margin.
外边距折叠塌陷
互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动。
解决方法：
- 给父元素设置 border-top 分隔父子元素的 margin-top 属性，或者使用 padding-top 属性代替子元素的 margin-top 属性。
- 给父元素设置 overflow: hidden.
- 转换成行内块元素。
- 设置浮动。
行内元素内外边距问题
行内元素无法通过 margin，padding 改变标签的垂直位置，即 margin-top、margin-bottom、padding-top、padding-bottom 四种属性不生效。
行内标签的高度由内容高度决定，可以用行高 line-height 属性设置高度。