CSS——（2）盒子模型与标准流

绝地灬酷狼 2022-08-10 14:44 184阅读 0赞

上篇博客[《CSS——（1）基础》][CSS_1]中简单介绍了CSS的概念和几种使用方法，现在主要是介绍其的核心内容。

盒子模型

为了理解盒子模型，我们可以先从生活中的盒子入手。盒子是用来放置物品的，内部除了有物品外，还有填充部分的东西。盒子与盒子之间还会有间隙。如下图所示：

![SouthEast][]

对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，理解了盒子模型才能更好的排版。

CSS盒子模式具备的属性： 内容(content)、填充(padding)、边框(border)、边界(margin)。从上面的例子来看：内容即对应盒内的物品；填充对应盒内为了防止物品破碎的填充物；边框则是盒子的纸壳部分；边界就是纸壳外围的间隙了。

标准盒子模型：

![SouthEast 1][]

其中，margin为外边距，padding为内边距。填充、边框和边界都分为上、下、左、右4个方向，既可以分别定义，也可以统一定义。

我们可以通过一个小例子来看一下盒子模型。

HTML：

CSS：

.Test {
        width: 180px; /*宽，高*/
        height: 30px;
    
        margin: 5px;   /*外边距*/
        padding: 20px; /*内边距*/
        border: 10px solid #0094ff;  /*边框*/
      
    }

网页显示：

![SouthEast 2][]

盒子模型显示：

![SouthEast 3][]

了解盒子模型可以帮助我们更好的排版，当然仅仅知道这个是不够的，我们还经常会谈到“标准流”。标准流，是指各元素没有特殊规则时的排列方式。它分为两类：块级元素和行内元素。二者的区别在于块级元素拥有自己的区域，而行内元素没有。

**块级元素**：以一个块的形式表现出来，并跟同级的块依次**竖直**排列，左右撑满。占有独立空间。

**行内元素**：各个字母之间横向排列，到最右端自动折行，**横向**排列。标签本身不占有独立的区域。

在这里，我们分别举个例子来说明这两类元素的不同。即块级元素中的<div>标签和行内元素中的<span>标签。

如下图所示：

![Center][]

![Center 1][]

那么，当我想把块级元素转换为行内元素，或者把行内元素转换为块级元素时，应该怎么做呢？这里就涉及到一个重要的属性了——display属性。

有三个常用属性值：

1）block   显示为块级元素

2）inline  行内元素

3）none  不显示

盒子模型可以帮助我们更好的布局和规划标签的排版位置，标准流是在没有特殊规则下的普遍适用的排列规则。在对标准流有了大致了解后，下篇博客将继续详细介绍CSS的核心内容中的定位机制。

[CSS_1]: http://blog.csdn.net/u010066934/article/details/38112269
[SouthEast]: /images/20220810/27e5c2c5cf0548b18276ac572c842989.png
[SouthEast 1]: /images/20220810/23b470d6355d40f885f1dd0bf74e37c5.png
[SouthEast 2]: /images/20220810/96b924175a9e40b2afdd65bf085ebc07.png
[SouthEast 3]: /images/20220810/a5e9c5daec32411eb11dd6225a3d21a8.png
[Center]: /images/20220810/52ce69b1823846329e524aaa663879da.png
[Center 1]: /images/20220810/cdcaf4eaebf84ae0a3ba7fe3eaa829de.png