css 盒子模型
- 一般都是盒子模型，除了极个别不是，比如img，input
盒子模型的属性
- width 内容的宽度
- height 内容的高度
- margin 盒子的外边距
- padding 盒子的内边距
- border 盒子的边框
- background 盒子的背景
盒子模型又分为标准盒子模型以及IE盒子模型
盒子模型的结构是最外层是外边距margin，内一层是边框border，再内一层是内边距padding，然后最内层是内容content。
标准盒子模型
他的width以及height指的是盒子容器中内容的宽和高。
IE盒子模型
他的width和height指的是整个内容+内边距+边框的宽和高。
height，width属性
这两个属性只能用于块级元素，用于行内元素是无效的。（行内元素的宽度width是由内容的宽度决定的，高度height是由字体大小font-size决定的）
一个盒子模型的真实宽度=左右边框宽度(border)+左右内边距宽度(padding)+内容宽度(width)
真实高度同上
margin属性
表示盒子与盒子之间的距离
margin的复制问题
CSS 中规定盒子模型的margin属性可以不用指定四个值
- 如果缺少左外边距的值，就使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
在css中，设置外边距是按照上右下左的顺序设置的，四个值如果第四个值缺失，则会复制第二个值，如果第三个值缺失，则会复制第一个值；如果第二个值缺失，也会复制第一个值。
- margin对块级元素是都生效的，但是对于行内元素来说，只有水平方向上有效(也就是左右外边距)，对上下外边距是没有效果的
- margin可以设置为负值
margin重叠（坍塌）问题
前提条件：块级元素，垂直方向
- 兄弟元素之间的重叠：上面盒子的margin-bottom和下面盒子的margin-top重叠。也就是说，如果上面的盒子设置了margin-bottom为20px，下面的盒子设置了margin-top为40px，则两个盒子之间的距离并不是简单的相加60px，而是40px，即发生了重叠，距离大小等于margin值较大的那个。
.top {
height: 100px;
width: 200px;
border: 1px saddlebrown solid;
margin-top: 20px;
margin-bottom: 20px;
}
.bottom {
height: 100px;
width: 200px;
border: 1px saddlebrown solid;
margin-top: 40px;
}
解决办法：
- 使块级标签变为行内块级标签(display: inline-block)。
- 使用浮动。
- 父子元素之间的重叠：父元素的margin-top和父元素中的第一个子元素的margin-top会重叠。即父元素设置了margin-top为40px,第一个子元素也设置了margin-top为20px，则子元素距离最上面的元素的距离并不是60px，而是40px。
.top {
height: 100px;
width: 200px;
margin-top: 20px;
margin-bottom: 20px;
}
.top > div {
height: 10px;
width: 150px;
border: 1px springgreen solid;
margin-top: 20px;
}
解决办法：
- 给父元素设置border-top
- 给父元素设置padding-top
- 把块级元素设置为行内块级元素
padding属性
- 和margin属性基本一致，也有复制问题。
- 如果重复设置了一边的内边距，则会优先以具体的边距为准。
padding:10px;
padding-left:20px; //以具体的边距设置为准
