盒子模型

盒子模型

1. 标准盒模型

width = 内容width + padding + border + margin

标准盒模型设置元素width只是设置的元素width，不包括padding，border，margin宽度

2. IE盒模型

width = 内容width + padding + border

IE浏览器的渲染模式是 元素width就包含了元素里面的内容宽度、内填充和边框宽度，即（width = 内容width + padding + border），

设置了padding和border后，会自动缩减内容with

margin单独计算，不在盒模型范围内

box-sizing

box-sizing: border-box; // 使用IE盒模型

box-sizing: content-box; // 使用默认盒模型，即标准盒模型

内填充（padding）

padding-left， padding-right, padding-top, padding-bottom

padding: 上 右 下 左；顺时针方向

padding: 上下 左右；

padding: 上 左右 下；

外边距（margin）

块级元素设置 margin-right: auto 和 margin-left: auto 后会在父元素内居中显示

外边距合并：

<div class="box">
    <div class="box1">
    div>
    <div class="box2">
    div>
div>

// 清除所有元素默认padding和margin
* {
    padding: 0;
    margin: 0;
}
.box {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}
.box1 {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box2 {
    width: 50px
    height: 50px;
    margin-top: 30px;
}
// .box1设置的margin-top:20px，不会实现.box1元素上面距离.box元素20px，而是.box元素上面距离再上一级元素20px（情况1）
// .box1设置的margin-bottom: 20，以及.box2设置的margin-top: 30px，不会实现.box1元素距离.box2元素50px，而是.box1和.box2距离30px（情况2）

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

情况1解决办法：

1. 不给垂直的第一个子元素.box1设置margin-top,给父元素.box设置padding-top

2. 垂直的第一个子元素.box1设置margin-top属性，父元素.box设置边框 border(不推荐)

3. 父元素.box设置 overflow:hidden (块级格式上下文BFC)

情况2暂无解决办法