盒模型
- 盒模型：box model。
- div和span是最常见的两个盒子。
- 图片，表单元素等这些可以看做为文本，他们并不是盒子。
1.盒子中的区域
一个盒子主要的属性为5个：width height padding border margin.
- width 内容的宽（标准盒模型下，不是盒子的宽。）
- height 内容的高（标准盒模型下，不是盒子的高。）
- padding:内边距
- border：边框
- margin 外边距
2.宽、高
-
标准盒模型下，我们设置的宽和高，是内容区域的宽和高，并不包含边框，内边距和外边距。
-
盒子占有的宽 = 内容的宽 + 左右内边距 + 左右边框
-
盒子占有的高 = 内容的高 + 上下内边距 + 上下边框
-
假如：一个盒子的宽为500px，border为1px，padding为20px，内容的宽为 ？ 500-40-2 = 458px;
-
在假设，盒子的宽也不变，边框不变，想让内容的宽变为480px，padding就应该变为9px。
-
如果想要一个盒子的真实占有的宽高不变，那么如果内容宽或者高发生变化， padding和边框就要跟着变化。
【注意点】
- 盒子的宽，如果不设置的话，默认为父盒子的100%。
- 盒子的高度，如果不设置的话，默认为内容的高度。
- 一些情况下（盒子中的内容不确定的时候），不需要给盒子设置高度，而是用内容去撑开高度。
3.内边距
内容与边框之间的距离。
内边距的区域也会被背景色渲染。
padding有四个方向
描述四个方向的方法有两种：
小属性写法
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
复合属性写法
/* 上下左右四个值都为10px 上下左右*/
padding: 10px;
/* 上下为10px 左右为20px 上下 左右*/
padding:10px 20px;
/* 上为10px 左右为20px 下为30px 上 左右 下 */
padding: 10px 20px 30px;
/* 上右下左 */
padding: 10px 20px 30px 40px;
4.边框 border
盒子占有的最外层的区域。
边框的三要素：
- 边框的宽
- 边框的线的类型
- 边框的颜色
写法
单一属性的写法
border-width: 1px;
border-style: solid;
border-color: brown;
复合属性写法
/* 统一设置每一个边框的样式。 */
border: 1px solid brown;
/* 单独设置每一个边框的样式 */
border-top: 1px solid #ff6700;
border-right: 3px double red;
border-bottom: 5px dashed blue;
border-left: 7px groove green;
/* 单独设置一条边框的单个属性样式 */
border-left-color: yellowgreen;
border-left-width: 1px;
border-left-style: dotted;
取消边框
border-方向:none;
/*取消左边的边框*/
border-left: none;
使用边框制作三角形
1.将div的宽高设置为0,再设置边框。
2.将底部的边框取消。
3.将左右两边的边框设置为透明色。
div{
width: 0px;
height: 0px;
border: 50px solid;
border-left-color: transparent;
border-right-color: transparent;
border-top-color:brown;
border-bottom:none;
}
5.外边距
margin：盒子与盒子之间的距离。
margin有四个方向
描述四个方向的方法有两种：
小属性写法
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
复合属性写法
/* 上下左右四个值都为10px 上下左右*/
margin: 10px;
/* 上下为10px 左右为20px 上下 左右*/
margin:10px 20px;
/* 上为10px 左右为20px 下为30px 上 左右 下 */
margin: 10px 20px 30px;
/* 上右下左 */
margin: 10px 20px 30px 40px;
盒子水平居中
/**盒子水平居中，盒子必须得有宽度。*/
margin：0 auto；
因为一些标签有默认的margin、 padding，所以一般需要初始化一下页面的margin和padding。
margin: 0;
padding: 0;
外边距重合
概念：垂直方向上相邻的两个元素，如果都有外边距，则相交的地方会出现外边距重合的现象。
外边距重合的三种情况：
- 相交的margin值都是正数，取最大值。
- 相交的margin值都是负数，取最小值。
- 相交的两个margin值为一正一负，取两者之和。
解决外边距重合的办法
- BFC规范（未讲解）
- 避免出现（两个上下相邻的同级盒子之间，只设置一个盒子的margin即可，要么设置盒子的底部margin，要么设置下盒子的顶部margin）
父盒子的外边距塌陷
理解：当父元素没有填充内容，且没有设置顶部border时，子元素的margin-top不会起作用，但会让父元素和子元素一起掉下来。
【注意】
只有margin-top有这个现象，另外三个方向没有。
解决父盒子的外边距塌陷的办法
- BFC规范
- 给父盒子添加顶部边框（不推荐）
- 将margin换成padding。
（将子盒子的顶部margin改为父盒子的顶部padding，如果不想改变父盒子占有的高，则需要将父盒子的高度进行修改。
【注意】
如果是同级盒子之间，想要有距离，则使用margin。
如果是父子盒子之间，想要有距离，则使用padding。