一、任何一个HTML页面都是盒子
HTML页面被划分成各种各样的部分，每个部分就是盒子。
这些每一个盒子里面都放着各自的内容（HTML文、CSS样式、JS功能）
二、盒子模型
盒子基本都具备以下四个内容。
三、盒子的四个边
四、盒子模型的内容
4.1、内容（height、weight）
设置内容就是：设置高度和宽度
- 高度设置：
height、min-height、max-height - 宽度设置：
weight、min-weight、max-weight
注意：对于行内级非替换元素来说：设置高度和宽度是无效的。
各个属性的含义：
height：内容的高度min-height：最小高度。（无论内容多少、高度都大于或等于min-height）max-height：最大高度。（无论内容多少、高度都小于或等于max-height）weight：内容的宽度。min-weight：最小宽度。（无论内容多少、宽度都大于或等于min-height）max-weight：最大宽度。（无论内容多少、宽度都小于或等于max-height）
4.2、内边距（padding）
用于设置边框和内容之间的距离。
4.2.1、padding的四个方向
padding-top：上内边距padding-right：右内边距padding-bottom：下内边距padding-left：左内边距
4.2.2、padding的缩写（四个值都在）：上右下左（从12点开始顺时针转）
padding: padding-top padding-right padding-bottom padding-left
4.2.3、 padding的缩写（只有一个值）：上右下左（从12点开始顺时针转）
4.2.4、 padding的缩写（有两个值）：上右下左（从12点开始顺时针转）
不存在的值根据：上下对应，左右对应的原理，取得对应的值。
4.2.5、padding的缩写（有三个值）：上右下左（从12点开始顺时针转）
不存在的值根据：上下对应，左右对应的原理，取得对应的值。
总结
4.3、边框（border）
4.3.1、边框具备的四个内容
每个内容都存在四个方向的值
- 宽度（
weight） - 样式 （
style） - 颜色（
color）
4.3.2、四个内容（四个方向单独设置）
4.3.3、四个内容（四个方向缩写）
4.3.4、四个内容（全部整体缩写）
三个内容，任意顺序都可以。
这两个是一个效果：
- border: 10px solid red;
- border: red 10px solid ;
4.3.5、边框常见样式（style）
4.3.6、圆角边框（border-radius）
border-radius可以设置两种类型的值：
-
数值：设置最小圆角，比如6px。
-
百分比：设置一定的弧度或者圆角。
4.3.6、用圆角边框（border-radius）设置圆形
如果想设置圆形：设置百分比为50%就好。
4.4、外边距（margin）
4.4.1、外边距的四个内容
通常设置两个元素之间的距离。
margin-top：上内边距margin-right：右内边距margin-bottom：下内边距margin-left：左内边距
4.4.2、margin的缩写
margin单独编写就是一个缩写形式。
margin-top、margin-right、margin-bottom、margin-left的缩写- 缩写是从零点中方向开始，沿着顺时针转动，也就是上右下左。
4.4.3、四个内容（单独设置）
4.4.4、缩写（四个值都在）：上右下左（从12点开始顺时针转）
4.4.5、缩写（只有一个值）：上右下左（从12点开始顺时针转）
4.4.6、缩写（有两个值）：上右下左（从12点开始顺时针转）
4.4.7、缩写（有三个值）：上右下左（从12点开始顺时针转）
4.4.8、margin的上下传递问题
margin-top：上内边距——传递margin-right：右内边距——不传递margin-bottom：下内边距——传递margin-left：左内边距——不传递
margin-top、margin-bottom：传递
-
margin-top的传递方式：块级元素的顶部线和父元素的顶部线重合，这个块级元素的margin-top值会传递给父元素。 -
margin-bottom的传递方式：块级元素的顶部线和父元素的底部线重合，并且父元素的高度是auto这个块级元素的margin-bottom值会传递给父元素。
以margin-top为例，这也是最常见的。
※ 没有设置margin-top的情况
※ 有设置margin-top的情况
父元素跟着一起有margin-top（只是显示，实际没值。）
实际没值：
解决方法：
-
方法一：父元素加上边框
border: 1px solid rgba(0, 0, 0, 0);
-
方法二：
overflow: auto;
-
方法三：给父元素设置
padding-top
margin-bottom的情况：
底线不挨着就不传递。
父元素的高度设置成auto的情况，就会传递。
解决方法：给父元素一个高度就行了。基本遇不到。
4.4.8、margin的上下折叠问题
- 垂直方向上相邻的两个
margin（margin-top、margin-bottom）会合并成一个margin。 - 水平方向上相邻的两个
margin（margin-left、margin-fight）永远不会合并成一个margin。
计算规则：
- 两值比较，取最大。
解决方法：只设置一个
margin。
现象：
父子之间也有可能，非常少见。
4.5、margin和padding的使用推荐
margin：用于兄弟元素之间的间距设置。padding：用于父子元素之间的间距设置。
4.6、块级元素的居中问题
4.7、外部轮廓（outline）
- 显示元素外轮廓
- 不占据空间
- 默认在
border外面
可以看到是在border外面。
这一个可以清晰看到，因为不占据空间，所以即使设置30px，左边和上边都没变化。
4.8、盒子阴影（box-shadow）
- 每个阴影用
<shadow>表示 - 多个阴影之间逗号隔开，从前到后叠加。
多个参数的情况：
阴影在线调试网站：阴影调试网站
例子：
这是调试后代码的位置，直接复制可用。
4.9、文字阴影（text-shadow）
测试文字阴影的网址：测试文字阴影
4.10、盒子尺寸计算（box-sizing）
-
box-sizing : content-box
-
box-sizing : border-box
二者的区别：
其他的：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
