CSS3--盒子模型

一、传统盒子模型content-box

内容区域宽：width  

内容区域高：height

如果内边距增大了，整个盒子也是增大的，那么要保持整个盒子不变大的话，就要减小宽读或者高度，即内容区的宽度或者高度。

二、CSS3盒子模型border-box

盒子的宽：width

盒子的高：height

指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候content会变小。

三、内外边距应用时机

margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

四、外边距合并问题

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

1、相邻元素垂直外边距

前一个元素底部的外边距(margin-bottom)， 后一个盒子也设置了一个顶部的外边距（margin-top），兄弟元素之间的上下边距，取两者之间边距大的而不是相加之和。

解决方案：只给一个盒子设外边距。 

2、嵌套块元素塌陷

标准流子元素和父元素上边框重合在一起，设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。

.box1 {
    width: 300px;
    height: 300px;
    background-color: purple;
    overflow: hidden;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 50px;
}

解决方案：

1. 给父元素设置边框（border）或者设置内边距（padding）
2. 给父元素添加overflow：hidden