CSS盒模型概述

大家好，欢迎来到IT知识分享网。

1 盒模型概述

盒子模型（Box Modle）可以用来对元素进行布局，一个页面由多个盒子组成，每个盒子的内容都不相同。

盒子模型的组成：content内容、padding内边距、border边框、margin外边距，下面就是一个盒子模型：

内边距、边框与外边距的介绍如下：

盒子模型又有两类，标准盒模型和怪异盒模型（IE低版本浏览器下会自动呈现），两个盒模型可以通过box-sizing属性切换。

/* 标准盒模型 */ box-sizing: content-box; /* 怪异盒模型 */ box-sizing: border-box; 

1.1 标准盒模型

在标准浏览器中的盒子默认都是标准盒模型。

在标准盒模型中，为盒子设置的width、height属性为content内容的宽度和高度，因此盒子模型的总宽度和总高度为：

总宽度 = width + 2 * padding + 2 * border + 2 * margin 总高度 = height + 2 * padding + 2 * border + 2 * margin 

1.2 怪异盒模型

在怪异盒模型中，盒子的width、height属性为content内容+padding内边距+border边框的宽度和高度，因此盒子模型的总宽度和总高度为：

总宽度 = width + 2*margin 总高度 = height + 2*margin 

2 块级盒子和内联盒子

不论是标准盒模型还是怪异盒模型，我们都广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为。

块级的（block）盒子会表现出以下行为：

1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
2. 每个盒子都会换行
3. width和height属性可以发挥作用
4. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
5. 除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

内联的（inline）盒子会出现以下行为：

1. 盒子不会产生换行。
2. width和height属性将不起作用。
3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开。
4. 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
5. 用做链接的<a>元素、 <span>以及<strong>都是默认处于inline状态的。

我们通过对盒子display属性的设置，比如inline或者block，来控制盒子的外部显示类型。

通过下面的例子，我们简单了解一下块级盒子和内联盒子的表现。

<p>I am a paragraph. A short one.</p> <p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p> 

CSS样式如下：

p { 
    border: 2px solid rebeccapurple; padding: .5em; } .block { 
    /* 单词“word”的span标签 */ border: 2px solid blue; padding: .5em; } .block { 
    display: block; /* 设置为块级元素 */ } 

上面两个html元素，都有一个外部显示类型block。第一个是一个段落，在CSS中加了边框，浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。
第二个是个块级段落，里面有两个<span>元素。正常情况下是inline，但是其中一个加了block类，设置属性display: block，就变成了一个块级盒子。

3 盒子模型的相关属性

3.1 边框属性border

border的基本属性如下所示。

以上三个属性都可以按照属性: 上边 右边 下边 左边;的格式依次为border设置属性值，当然属性值有时并不需要全部都设置，例如：

/* 当只设置一个属性值solid，表示四条边均为实线 */ border-style: solid; /* 当设置了两个属性值20px、10px，表示边框的上下宽度为20px，左右宽度为10px */ border-width: 20px 10px; /* 当设置了三个属性值，表示上边框颜色为red，左右边框颜色为blue，下边框颜色为pink */ border-color: red blue pink; 

除此之外，border还有一些属性：

注意：

• 在设置边框宽度时，必须同时设置边框样式border-style，如果未设置样式或设置为none（默认值），则不论宽度设置为多少都无效。
• CSS在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性：border-top-color（上边颜色）、border-right-color（右边颜色）、border-bottom-color（下边颜色）、border-left-color（左边颜色）。
• 在边框综合属性（border）的基础上有四个边框属性：
  border-top：上边框宽度 样式 颜色、
  border-right：右边框宽度 样式 颜色、
  border-bottom：下边框宽度 样式 颜色、
  border-left：左边框宽度 样式 颜色。
  
  
  
  
• border-image属性必须和边框样式border-style同时使用，否则不会显示，设置时可以搭配border-width，可以让显示的图片更大。

3.2 内边距属性padding

在标准盒子中，块级盒子使用padding会增加元素的尺寸，但是对于内联元素有一些不同，很多人有这样的认知：内联元素padding只会影响水平方向，不会影响垂直方向。

这种认知是不准确的，内联元素的padding在垂直方向同样会影响布局，影响视觉表现。只是因为内联元素没有可视宽度和可视高度的说法（clientHeight和clientWidth永远是0），垂直方向的行为表现完全受line-height和vertical-align的影响，视觉上并没有改变和上一行下一行内容的间距，因此，给我们的感觉就会是垂直padding没有起作用。

在实际开发中，我们可以使用上面的特性为链接或者按钮增加可点击区域大小。

3.2.1 padding百分比值

对于padding的属性值，有这么两点需要注意：1、padding不支持负值；2、padding支持百分比值，padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的。

利用这个特性，我们可以实现一些特殊的效果，比如等比例正方形，就可以这样写：div { padding: 50%; }，比如宽高比为2:1的矩形，就可以这样写：div { padding: 25% 50%; }。

上面百分比值是应用在具有块状特性的元素上的，如果是内联元素，就会有下面这样的表现：

• 同样相对于宽度计算
• 默认的高度和宽度细节有差异
• padding会断行

比如说：

<span>橘猫吃不胖</span> 

span { 
    padding: 50%; background-color: orange; } 

我们可以看到，在上面的效果图中，有一些奇怪的地方，比如说“橘”字不见了，文字是居右显示的，背景区域并非是一个矩形，而且宽度和外部容器宽度不一致等。

对于内联元素，其padding是会断行的，也就是说padding区域是跟着内联盒模型中的行框盒子走的。

上面的例子由于文字比较多，一行显示不了，于是“胖”字换到了下一行，于是，原本的padding区域也跟着一起掉下来了，根据后来居上的层叠规则，“橘”字正好被覆盖了；同时，规则的矩形区域因为换行，也变成了五条边；至于宽度和外部容器盒子不一样宽，是因为文字内容将宽度撑大了。

3.3 外边距属性margin

margin表示同级元素之间的距离，或者距离父级元素之间的距离。

当使用margin来设置外边距时，也遵循属性: 上 右 下 左;的设置方式，例如：

/* 当只设置一个属性值时，表示四个外边距相同，都是10px */ margin: 10px; /* 当设置了两个属性值时，表示上下外边距10px，左右外边距20px */ margin: 10px 20px; /* 当设置了3个值时，表示上外边距10px，左右外边距20px，下外边距30px */ margin: 10px 20px 30px; /* 当设置了4个值时，表示上右下左分别是10px、20px、30px、40px */ margin: 10px 20px 30px 40px; 

注意：

• 外边距margin允许使用负值
• 当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。
• 为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距，格式为：

* { 
    /* 清除外边距 */ margin: 0; /* 清除内边距 */ padding: 0; } 

• 当margin的属性值为百分比时，如果是普通元素，它的margin是相对于容器的宽度来计算的；如果是绝对定位的元素，它的margin是相对于第一个定位祖先元素（relative，absolute，fixed）计算的。例如，一个普通元素，设置外边距为10%，那么它的外边距的计算与容器的宽度有关：
  
  例如，在下面这种情况下，粉色盒子的margin就是相对于#box2的宽度计算的，因为#box2是它外部第一个定位元素：
  
  
  
  

3.3.1 margin合并

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”。

margin合并有以下3种场景：

1. 相邻兄弟元素margin合并，例如：

<div>第一行</div> <div>第二行</div> 

div { 
    margin: 10px 0; } 

第一行和第二行都有上下边距10px，但是两个div之间只有10px的距离，因为第一行和第二行的margin合并在一起了。

2. 父级第一个/最后一个子元素，例如下面这3种写法是等效的：

<div class="father"> <div class="son" style="margin-top:80px;"></div> </div> <div class="father" style="margin-top:80px;"> <div class="son"></div> </div> <div class="father" style="margin-top:80px;"> <div class="son" style="margin-top:80px;"></div> </div> 

.father { 
    height: 100px; background-color: orange; } .son { 
    height: 50px; background-color: pink; } 

3. 空块级元素的margin合并，例如：

<div class="father"> <div class="son"></div> </div> 

.father { 
    overflow: hidden; } .son { 
    margin: 1em 0; } 

结果，此时.father所在的这个父级<div>元素高度仅仅是1em，因为.son这个空<div>元
素的margin-top和margin-bottom合并在一起了。

对于这种margin合并，我们可以使用下面这些方式来解决：

• 父元素设置为块状格式化上下文元素；
• 父元素设置border-top或者border-bottom值；
• 父元素设置padding-top或者padding-bottom值；
• 父元素和第一个子元素或者最后一个子元素之间添加内联元素进行分隔。
• 父元素设置height、min-height或max-height。

3.3.2 margin: auto

margin: auto是为了填充的闲置空间设置的，其填充规则如下：

• 如果元素一侧定值，一侧auto，则auto为剩余空间大小。
• 如果两侧均是auto，则平分剩余空间。

例如下面这段代码，子元素右间距80px，左间距auto，那么左间距应该为（300 – 200 – 80）px:

<div class="father"> <div class="son"></div> </div> 

.father { 
    width: 300px; } .son { 
    width: 200px; margin-right: 80px; margin-left: auto; } 

在开发中我们还会遇到这样的场景，为什么容器定高，子元素定高，但是使用margin: auto仍然无法垂直居中，比如这样：

.father { 
    height: 200px; background-color: orange; } .son { 
    height: 100px; margin: auto; background-color: pink; } 

原因是触发margin: auto计算有一个前提条件，就是width或height为auto时，元素具有对应方向的自动填充特性，在这个例子中，元素高度不具有垂直方向上的自动填充特性，所以无法垂直居中。

3.4 背景属性background

为<body>标签设置以下CSS样式：

body{ 
    /* 背景颜色橙色 */ background-color: darksalmon; /* 设置背景图片 */ background-image: url(./images/1.jpg); /* 背景图片在垂直方向上重复 */ background-repeat: repeat-y; /* 背景图像位置从左上角开始 距离顶部20像素 距离左边20像素 */ background-position: 20px 20px; /* 背景图像固定 不随页面滚动而滚动 */ background-attachment: fixed; } 

3.5 阴影属性box-shadow

格式为：

box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset; 

4 内联盒子

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由<span>元素创建的那些内联盒子。

如下面示例，我们在一个段落中使用了<span>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

HTML页面代码如下：

<p> I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. </p> 

CSS样式如下：

span { 
    /*设置外边距*/ margin: 20px; /*设置内边距*/ padding: 20px; /*设置宽度*/ width: 80px; /*设置高度*/ height: 50px; /*设置背景色*/ background-color: lightblue; /*设置边框*/ border: 2px solid blue; } 

如果要解决重叠的问题，可以使用display: inline-block来设置。

在下一个示例中，我们将display: inline-block添加到<span>元素中。尝试将此更改为display: block 或完全删除行，以查看显示模型中的差异。

HTML页面中代码如下：

<p> I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. </p> 

CSS样式如下：

span { 
    margin: 20px; padding: 20px; width: 80px; height: 50px; background-color: lightblue; border: 2px solid blue; /*与上面的区别*/ display: inline-block; } 

5 制作各种形状

5.1 三角形

将盒子的宽度设置为0，为边框添加宽度，并设置透明，根据不同的需求设置某一边的边框显示颜色。

<div></div> 

div { 
    width: 0; border: 50px solid transparent; border-top-color: pink; } 

5.2 宽高自适应的正方形

1、使用vw或者vh来实现，vw和vh是视口单位，将盒子的宽度和高度都使用vw或者vh来实现一个正方形

<div></div> 

div { 
    width: 20vw; height: 20vw; } 

或者：

div { 
    width: 20vh; height: 20vh; } 

2、使用padding来实现

<div></div> 

div { 
    width: 20%; padding-top: 20%; } 

或者：

div { 
    padding: 50%; } 

5.3 扇形

扇形就是在三角形的基础上增加一个圆角。

<div></div> 

div { 
    width: 0; border: 50px solid transparent; border-radius: 100%; border-top-color: pink; } 

5.4 三条横杠

<i class="icon-menu"></i> 

.icon-menu { 
    display: inline-block; width: 120px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box; } 

5.5 双层圆点

<i class="icon-dot"></i> 

.icon-dot { 
    display: inline-block; width: 100px; height: 100px; padding: 10px; border: 10px solid; border-radius: 50%; background-color: currentColor; background-clip: content-box; }