盒模型—CSS学习笔记携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情前言

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

在网站的布局中盒模型是一个重要的要素，所有的元素都被盒子“包围”着。通过理解这些盒子，能够帮助我们更加准确地去布局，把握网页元素的大小与排列顺序。

块级盒子和内联盒子

在学习盒模型之前有一个重要的概念需要理解。那就是盒子的两种类型。

块级盒子（block- box）

总是从新行开始且独占一行，默认宽度自动填满其父元素宽度
可以设置宽高和内外边距（会把其他元素推开）
常见的块级元素有div、p、h1等

2.内联盒子（inline-box）
不会换行且当内联元素占据满一行才会换行
宽高不起作用，宽度只与内容有关
垂直方向内外边距会被应用不会将处于inline状态下的盒子推开，水平方向上会
常见的内联元素a、span和em等

对于盒子的类型的设置通过display属性来实现，这里涉及到两种display:block和display:inline

示例

<div class="content">
    <h1>hello world</h1>
    <p>Today's weather feels good <span class="block">Let's</span> go out</p>
    <p>let's enjoy it</p>
</div>

.content{
    width:400px;
    height:400px;
}
.block {
    border: 5px solid red;
    display: block;
}

效果

可以看到原本为内联元素的span设置display:block后另起一行且占据一整行。其他元素按默认方式排列。

什么是CSS盒模型？

盒模型有margin、border、padding、content可完整应用于块级盒子，但对内联盒子设置宽高是会被忽略的。盒模型又分为标准盒模型和替代（IE）盒模型。

组成盒模型的各个部分

通常通过浏览器的调试工具可以查看到元素的内外边距及内容宽高（这里以Chorme为例）。例如设置内容宽高为400像素的盒子如图所示

这样就可以准确地了解到当前所设置盒模型的层次结构。

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin(相关属性设置。

盒模型的类型

标准盒模型

在标准盒模型中，若设置宽高的话实际上设置的是Content box的宽高（也就是上图的蓝色小块）。也就是说盒子实际的宽高是你设置的宽高+Padding box 与 Border box的宽高。现在默认的盒子都是标准盒模型，也就是我们设置的宽高都是设置Content box的，让我们来看看一个例子。

<div>
    <h1>Demo</h1>
</div>

div {
    width: 400px;
    height: 200px;
    padding: 20px;
    border: 5px solid red;
    margin: 20px;
}

所以盒子实际的宽是400 + 20 * 2（padding）+5 * 2（border）=450

长是200+ 20 * 2（padding）+5 * 2（border）=250

备注： margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。

替代盒模型

如果你想要设置宽高时就是实际的宽高，不用去考虑边距和边框，可以在你的盒子中添加属性box-sizing: border-box;告诉浏览器采用border-box来定义盒模型，这样你设置的宽高就是实际盒子的宽高了。

盒模型与内联盒子

在上面有提到对内联盒子设置宽高是会被忽略的，现在我们来看看实际效果

Tom is a boy.he is 12. He likes playing basketball and he is willing to make friend.

span {
    width: 50px;
    height: 50px;
    padding: 20px;
    margin: 20px;
    border: 5px solid red;
    background-color: aqua;
}

可以看到宽高是会被忽略的，垂直方向上的边距不会推开其他内联元素而水平方向则会。

设置`display:inline-block`

但有时我希望可以对内联元素设置宽高，或者使块级元素不占据一行。就可以对盒子设置属性display:inline-block。还是上面的例子，可以发现宽高便不被忽略，且边距垂直水平都会推开元素了。

总结

以上便是对盒模型的全部内容，下文将会对背景和边框做出讲解。

盒模型—CSS学习笔记

前言