话说前端-12-盒子模型（盒子模型的代码）

分享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard学苑。

欢迎您的访问。

今天我们来讲一讲盒子模型，作为css最重要的知识点，它是我们构建网页最重要的一环。

Today, let's talk about the box model. As the most important knowledge point of css, it is the most important link for us to build web pages.

首先我们要了解一个知识点，标签自带的属性，那就是行内元素.块级元素以及行内块。行内元素，如其名一般，在一行内，不单独占一行，无法设置宽高。块级元素，与之相反，不管它有多大，始终占一行，也就是说这个如果标签宽度为父元素的百分之三十，那么跟他并列的空间就会被空下，可以设置宽高。

First of all, we need to understand a knowledge point, the attributes of labels, that is, inline elements, block-level elements and inline blocks. In-line elements, as the name implies, are not only exclusive in one line, so the width and height cannot be set. On the contrary, block element, no matter how big it is, always occupies one line, that is to say, if the label width is 30% of the parent element, then the space juxtaposed with it will be empty, and the width and height can be set.

典型的块级元素（display：block）：div li ...

典型的行内元素（display：inline）：span img ...

我们可以用display来把这两者属性强制转换，例如display：inline-block（行内块具有这两种属性，可以在一行中显示，可以设置宽高）。

Typical block-level element (display: block): divli ...

Typical inline element (display: inline): spanimg ...

We can use display to cast these two attributes, for example, display: inline-block (inline blocks have these two attributes, which can be displayed in one line, and the width and height can be set).

接下来我们将盒子模型：盒子模型分为内容，content 内边距：padding，边框：border，外边距：margin由内到外，盒子的宽度width=padding-left+padding-right+margin-left+margin-right+border-left+border-right，高度同理。

Next, let's talk about the box model: the box model is divided into content, content inside margin: padding, border: border, outside margin: from inside to outside, width of the box = padding-left+padding-right+margin-left+margin-right+border-left+border-right, and the same is true for height.

同样的盒子也能装盒子，在网页中构建一个又一个盒子，我们的网页就可以完成了。

The same box can also hold boxes. Build one box after another in the webpage, and our webpage can be finished.

今天的分享就到这里了。如果您对今天的文章有什么独特的想法，欢迎评论留言，让我们相约明天，祝您今天过得开心快乐！

That's it for today's sharing. If you have any unique ideas for today's article, please leave a comment, let us meet tomorrow, I wish you a happy day!

翻译：Google翻译

本文由LearningYard新学苑原创，部分图片文字来自网络，如有侵权请联系。

文字&排版|李仕阳

审核|闫庆红