CSS的盒子模型(一)

咱们的网页是由一个一个的标签元素组成的，这些标签在CSS的体系中能够理解成一个一个的盒子，一个标签就是一个盒子，理解这些盒子的原理有助于咱们更好的实现CSS的布局和排版。 CSS中普遍使用两种盒子:块级盒子和内联盒子，这两种盒子根据文档流和元素关系的不一样会有不一样的表现。html

在CSS中经过display: block属性将元素定义成块级盒子，在HTML的标签元素中，像div标签、p段落标签、h标题标签等等这些标签在CSS中默认都是块级盒子块级盒子在浏览器中会有如下几个行为:浏览器

1.若是不指定宽度，块级盒子会占满父容器的宽度
2.每一个盒子的内容都会自动换行
3.width和height属性会有效果
4.边距(margin/padding)和边框(border)会将其余元素从盒子周围推开markdown

用一个例子来验证如下块级盒子的这个行为，咱们先来建立一个只有宽高和背景的盒子，而后再添加一些其余的内容来逐个验证。布局

这个盒子对应的CSSspa

.div01{
    width: 500px;
    height: 200px;
    display: block;
    background-color: aquamarine;
    margin: 0 auto;
}
复制代码

咱们给这个盒子指定了宽和高，这也说明咱们为块级盒子设置宽高属性是有做用的，如今咱们把宽度属性去掉，其余属性不变，来验证如下上面讲到的第一个行为。3d

能够看到，盒子的宽度已经铺满了浏览器。接下来为了显示方便咱们依然为盒子指定宽度，并在盒子内部添加一些文字来观察一下盒子的行为。code

咱们会发现，盒子内部的文字自动换行了，为了进一步验证这个特性，咱们继续把盒子由块级改成内联(inline)，其余属性保持不变，而后再观察盒子的内容是否还会换行。orm

.div01{
    ...
    display: inline;
    ...
}
复制代码

咱们会发现，盒子的内容不只没有换行，并且原来设置的宽高属性都失效了。htm

经过上面的例子验证了块级盒子几个特性中的前三个，接下来继续用示例来验证最后一个。咱们在刚刚建立的盒子下面再添加一个盒子，让这两个盒子上下紧挨着，为了便于区分两个盒子采用不一样的背景色。图片

咱们给盒子1添加边框和margin属性，来观察盒子2的位置变化。

border: 3px lightcoral solid;
margin-bottom: 10px;
复制代码

很明显看到，盒子02的位置发生了位移(注意盒子01的位置是没有发生变化的)，由于border和margin-bottom的存在，使得盒子02向下移动了13px。

内联盒子是经过将元素的display属性定义成inline来实现的，在html标签体系中，<a>标签、 <span>、 <em> 以及 <strong> 都是处于内联状态的。内联状态的标签元素在浏览器中通常会有如下几种行为:

1.盒子不会换行
2.width和height属性将不会起做用
3.垂直方向的内外边距以及边框会被应用可是不会把其余处于 inline 状态的盒子推开
4.水平方向的内外边距以及边框会被应用且会把其余处于 inline 状态的盒子推开

用一个例子来验证如下第三点和第四点，咱们定义两个span元素，而后使这两个元素上下排列，为了便于区分须要给两个span设置不一样的背景色。

<body>
    <span class="inline">内联盒子01内联盒子01</span><br>
    <span class="inline02">内联盒子02内联盒子02</span>
</body>
复制代码

而后为其中一个span添加边框，最后观察如下效果:

.inline{
    margin: 0 auto;
    background-color: aquamarine;
    border: 8px solid skyblue;
}
.inline02{
    background-color: lightblue;
}
复制代码

能够看到，即使咱们给盒子01添加了边框，在内联状态下盒子02相对01的位置和距离依然没有发生变化，而且第一个盒子的边框和下边第二个盒子发生了区域重叠。

接下来咱们稍微修改如下示例，再验证一下第四点。咱们把上面两个盒子排列方向改成水平排列，再观察一下边框对盒子02的影响。
先看一下没有添加边框的时候两个盒子水平排列时的状况。

而后继续对盒子01添加边框

border: 8px solid lightcoral;
复制代码

能够看到水平状态下在给盒子01添加了边框以后，盒子02的位置向右发生了偏移而且两个盒子也没有发生重叠现象。

以上就是关于CSS盒子的简单总结，接下来会继续总结盒子模型的其余主要知识点，而后会造成一个短系列汇总。