一般来说, 页面中的每个元素都会形成一个矩形盒子

渲染引擎根据给定的样式确定这个盒子的呈现.

通俗的来说，页面的布局就是一个个盒子的排列和摆放。

一. 标准盒模型

有人也称为框模型, 不过盒模型更好一些, 免得的和后面学的边框属性混淆.

每一个盒子都有:

• 内容区域（content 比如：文本，图片等等)

• 可选的环绕着内容的内边距（padding)

• 边框（border)

• 外边距（margin）。

盒子的大小有这些属性定义。

下面这张图很直观的说明了这一点

使用的Chrome或Firefox浏览器的审查元素功能可以很明显的看出来每个元素都是一个盒子.

生活中的盒子

万物皆是盒.

二. width和heigth属性

对块级元素来说, width和height属性用来设置盒子的内容部分 的宽和高

三. padding属性

padding表示一个盒子的内边距(或者理解成填充区).

这部分区域位于内容的外边缘和边框的内边缘之间.

<style>
div{
    width: 400px;
    height: 200px;
    background-color: pink;
    padding: 50px;
}
</style>

<div></div>

说明:

• 对每个盒子来说, 分别有 4 个方向的padding. 分别是上(padding-top), 右(padding-right), 下(padding-bottom), 左(padding-left)

• padding : 10px; 这种写法会同时设置 4 个方向的padding均为 10px.

• 这种同时设置 4 个方向的属性一般称简写属性.(后面还会碰到很多其他的简写属性)

• 如果 4 个方向的padding不一致, 可以这样写: padding : 10px 20px 30px 5px. 4 个值分别对应 上右下左. 顺序务必牢记.

  • 意思说: 上 10px, 右 20px, 下 30px, 左 5px.

• 如果 padding: 10px 20px, 只有 2 个值, 则分别是: 上 右. 然后下和上保持一致, 左和右保持一致.

• 如果 padding : 10px 20px 30px, 只有 3 个值, 则分别是: 上右下, 然后左和右保持一致.

• padding区域会有背景色.

• 可以用单独某个方向的padding去覆盖某一边的padding.

• 例如: 左边的padding为 10px, 其他均为30px, 这样写比较方便:

  padding : 30px; /*所有padding都会设置为 30px*/
  padding-left : 10px; /*再把左边的padding覆盖为10px*/
  

  这样写也可以

  padding : 30px 30px 30px 10px;
  

四. border属性

盒子的边界（border）是一个分隔层

位于内边距的外边缘以及外边距的内边缘之间。

边界的默认大小为0, 从而让它不可见,

不过我们可以设置边界的厚度、风格和颜色让它出现。

<style>
div{
    width: 200px;
    height: 100px;
    background-color: pink;
    padding: 50px;

    border: 20px solid blue;
}
</style>
<div></div>

说明:

• border: 20px solid blue; 3 个值分别是: 边框的厚度 边框的风格 边框的颜色. 这个也是简写属性, 一次性的设置了 4 个边框.

• 也可使用border-top, border-left, border-right, border-left来分别设置每个边. 属性的值和简写属性的值含义一样.

• border-width, border-style, border-color: 分别仅设置边界的厚度,风格, 颜色，并应用到全部四边边界。

  • border-width : 10px, 20px, 30px, 40px. 分别设置了 4 个边的厚度, 也可以给1, 2, 3个值, 属性含义和padding一致.

  • border-style, border-color 同样的含义.

• 你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。

4.1 border-style的值

这个属性表示的是边框的风格, 他有多个值, 常用的有 3 个.

补充CSS3设置圆角的属性border-radius.

盒子的真实占地尺寸: width + padding + border

五. margin属性

5.1 margin属性的基本使用

margin我们成为外边距. margin是简写.

可以同时设置 4 个方向的. margin: 10px 20px 30px 10px; 4 个值表示的方向和padding一致.

四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left

指定的外边距允许为负数。

<style>
.box1{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 30px;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

说明:

• 站在元素的角度来看, 正的margin是向外扩张的一个间距, 负的margin是向内扩张的一个间距. 负的margin看起来像是自己不可侵犯的领地变小了.

• 外边距一般用来调节两个兄弟元素之间的距离关系,

• 尽量避免使用外边距调整父节点元素和子节点元素的关系. 这个时候使用父元素的padding属性是个更好的选择.

5.2 margin-left : auto;或margin-right : auto;的含义

auto是 自动 的意思. 自动就是为这个属性争取尽可能大的值.

<style>
.outer{
    width: 600px;
    height: 600px;
    background-color: pink;

}

.inner{
    width: 200px;
    height: 200px;
    background-color: green;
    margin-left: auto;
}
</style>
<div class="outer">
  <div class="inner"></div>
</div>

所以, 如果同时把margin-left和margin-right都设置为auto, 则他们都为自己争取尽可能大的值, 最终就是大家都一样, 表现出来就是盒子在他的父容器的水平方向居中了.

<style>
.outer{
    width: 600px;
    height: 600px;
    background-color: pink;
}

.inner{
    width: 200px;
    height: 200px;
    background-color: green;
    margin-left: auto;
    margin-right: auto;

    /* margin : 0 auto; */
}
</style>
<div class="outer">
  <div class="inner"></div>
</div>

注意:

• 如给margin-top和margin-left设置为 auto, 则他们的值会是 0, 而不是争取最大的值.

• 所以前面的属性可以简写为margin : auto;或margin : 0 auto;

5.3 外边距塌陷

在正常流中, 上盒子的底部外边距和下盒子的顶部外边距, 有时被组合为单个外边距, 其大小是两个外边距中的最大外边距.

这种行为称为 外边距塌陷(margin collapsing), 也有人翻译成 外边距合并.

注意: 这种塌陷现象只发生在 上外边距和下外边距之间. (左右边距不会)

发生外边距塌陷的三种基本情况:

相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷。例如：

<style>
.first{
    width : 200px;
    height : 100px;
    background-color : pink;
    margin-bottom: 30px;
}
.second{
    width : 200px;
    height : 100px;
    background-color : gray;
    margin-top: 20px;
}
</style>
<div class="first"></div>
<div class="second"></div>

说明:

• 两个<div>的真正边距并不是他们上下边距的和, 而是两个边距中的较大值.

块级父元素与其第一个或最后一个子元素

如果块级父元素, 不存在border-top和padding-top, 那么这个块级元素和其第一个子元素的就可以说”挨到了一起“。

此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，

换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间也会发生 下外边距合并 现象。

<style>
*{
    padding: 0;
    margin: 0;
}
.first{
    width : 400px;
    height : 200px;
    background-color : pink;
    margin-top: 30px;
}
.second{
    width : 200px;
    height : 100px;
    background-color : gray;
    margin-top: 50px;

}
</style>
<div class="first">
    <div class="second"></div>
</div>

空块元素

如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。

那么此时这个空块元素的上下边距中间将没有任何阻隔，此时这个空块元素的上下外边距将会合并。

例如：

<style>
.one, .tree {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.two {
    margin: 10px 0 40px;
}
</style>
<div class="one">第一个</div>
<div class="two"></div>
<div class="tree">第三个</div>

注意:

• 如果有负边距存在, 则合并后的边距是最大正边距加上最小负边距.
• 如果都是负值, 则谁的绝对值大, 就取谁.

<style>
.one, .three {
    width: 200px;
    height: 200px;
    background-color: pink;

}
.one{
    margin-bottom: 20px;
}
.two {
    margin-top: -30px;
    margin-bottom: 50px;
}
.three{
    margin-top: -40px;
}
</style>
<div class="one">第一个</div>
<div class="two"></div>
<div class="three">第三个</div>

分析: 这个时候涉及到四个边距的合并, 且有负边距, 所以 是 50 + (-40) = 10

总结:

• 如果两个两个元素的垂直方向的外边距直接连在了一块就会出现外边距合并现象(margin塌陷).