第10天：撑起CSS布局的半壁江山---盒子模型

对于前端开发来说，盒子模型是必须要熟练掌握的内容，不然在后面写页面的时候，你会遇到很多坑。比如我当时遇到给 <span> 标签设置 width 和 height 不起作用，设置 margin 不起作用，设置 padding 后标签会自动变大等等，这一切问题，归根结底是我对盒子模型没有彻底掌握，今天利用这个机会聊一聊盒子模型。

在网页中，你可以把各种标签统统看成盒子，对于不同的盒子表现是不一样的，我们可以利用这些盒子堆叠出各种好看的页面。

CSS中主要有两种盒子：

一.块级盒子（block），它的表现如下：

1.尽可能扩大可利用的空间，比如 p 标签默认是一个块级标签，它的宽度会填满父元素；

2.独占一行，也就说一个块级元素占一行；

3.可以使用 width 和 height 属性，比如设置 width 来改变宽度；

4.使用 padding、margin 和 border 会影响其它元素的位置，这句话比较抽象，比如当改变元素自己的 padding 的时候，其它元素的位置也会发生变化。

二.行内盒子（inline box）：

1.不会单行显示，除非一行没有足够多的空间，它会一个接一个地排列；

2.width 和 height 属性不起作用，如果给 span 标签设置 width 或 height 时，发现无效；

3.padding、margin 和 border 会起作用，但不会影响其它元素。

标签都会有自己默认的显示方式，可以通过 display 来修改其显示方式，比如把块级元素变成行内元素，比如 p 标签默认的是块级元素，通过 display 来修改为 inline。

.title {    display: inline;}

比如 span 元素默认的是行内元素，通过 display 来修改为块级元素。

.title {    display: block;}

盒模型

块级元素使用了盒子模型的所有特性，而行内元素只使用了部分特性。一个完整的盒子模型如下：

margin（外边距）：它表示盒子之间的距离，可以通过 margin-top、margin-bottom、margin-left、margin-right 来控制各个方向的边距，它们可以为负值；

border（边框）：表示盒子的边框；

padding（内边距）：表示与内容之间的距离；

content（内容）：表示内容的大小；

盒子模型有两种模式，不同模式对于最终盒子的大小有所不同：

1.标准的盒子模型

对于这种盒子模式，给它设置的 width 和 height 是 content 的宽高，当给盒子添加 padding 和 border 的时候，会增加盒子的整体大小。「外边距不会计入盒子的大小，它只是表示外部的边距」。下面的代码盒子最终的宽 = 100+20+20+10+10 = 160px；

.std-box {    width: 100px;    height: 120px;    padding: 20px;    border: 10px solid red;    margin: 30px;    background-color: antiquewhite;}

2.诡异盒子模型（The alternative CSS box model）

对于这种盒子模式，给它设置的 width 和 height 是盒子的宽高，也就是说内容 content 的宽需要减去 border 和 padding 的宽。谷歌浏览器默认的是标准的盒模型，可以通过：

box-sizing: border-box;

来修改盒模型为诡异盒模型，把上面的 CSS 修改成诡异盒模型。

.std-box {    width: 100px;    height: 120px;    padding: 20px;    border: 10px solid red;    margin: 30px;    background-color: antiquewhite;    box-sizing: border-box; }

总结

本节讲了盒子模型，内容非常重要，对将来学习布局的时候会有很大帮助。这节内容需要掌握块状盒子和行内盒子在网页中的不同表现，以及两种模式的盒子在计算的差别。这篇文章 第 6 天：设计一个左右滑动的菜单 有用到盒子模型的相关概念，可以温习一下。

今天的打卡指令：

1.你知道CSS中有哪些布局方式？

2.直接打卡。

---

推荐阅读：

第9天：自我介绍

群里讨论的一个选择器问题（一定要看）

第 6 天：设计一个左右滑动的菜单