06-CSS盒模型详细阐述

我就是我 2023-06-05 08:48 12阅读 0赞

## 盒子模型 ##

### 前言 ###

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

### 盒子中的区域 ###

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

*  width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
 *  padding：内边距。
 *  border：边框。
 *  margin：外边距。

盒子模型的示意图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

代码演示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302\*302。 这是因为还要加上padding、border。

注意：\*\*宽度和真实占有宽度，不是一个概念！\*\*来看下面这例子。

### 标准盒模型和IE盒模型 ###

> 我们目前所学习的知识中，以标准盒子模型为准。

标准盒子模型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]

IE盒子模型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]  
上图显示：

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

*  width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
 *  padding：内边距。
 *  border：边框。
 *  margin：外边距。

CSS盒模型和IE盒模型的区别：

*  在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
 *  **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。

### `<body>`标签也有margin ###

`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
    
    	<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; padding: 20px; margin: 30px; } </style>
    
     </head>
    
     <body>
    
    	<div>有生之年</div>
    	<div>狭路相逢</div>
    
     </body>
    
    </html>

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]

### 认识width、height ###

一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。

比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]  
下面这两个盒子，真实占有宽高，都是302\*302：

盒子1：

.box1{ 
    		width: 100px;
    		height: 100px;
    		padding: 100px;
    		border: 1px solid red;
    	}

盒子2：

.box2{ 
    		width: 250px;
    		height: 250px;
    		padding: 25px;
    		border: 1px solid red;
    	}

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

上面这两个盒子的盒模型图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]

**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

### 认识padding ###

#### padding区域也有颜色 ####

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**

效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]

#### padding有四个方向 ####

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性的写法：

padding-top: 30px;
    	padding-right: 20px;
    	padding-bottom: 40px;
    	padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右、下。??和右一样。

如果只写了两个值，比如说：

padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

要懂得，**用小属性层叠大属性**。比如：

padding: 20px;
    padding-left: 30px;

上面的padding对应盒子模型为：

![在这里插入图片描述][20191008201426305.jpg]

下面的写法：

padding-left: 30px;
    padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

下面的题，会做了，说明你明白了。

#### 一些题目 ####

**题目1**：说出下面盒子真实占有宽高，并画出盒模型图。

div{ 
    		width: 200px;
    		height: 200px;
    		padding: 10px 20px 30px;
    		padding-right: 40px;
    		border: 1px solid #000;
    	}

答案：

![format_png][]

**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。

div{ 
    		width: 200px;
    		height: 200px;
    		padding-left: 10px;
    		padding-right: 20px;
    		padding:40px 50px 60px;
    		padding-bottom: 30px;
    		border: 1px solid #000;
    	}

答案：

`padding-left:10px；` 和`padding-right:20px;` 没用，因为后面的padding大属性，层叠掉了他们。

盒子模型如下：

![format_png 1][]

**题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。

![format_png 2][]

答案：

width:123px;
    	height:123px;
    	padding:20px 40px;
    	border:1px solid red;

**题目4**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。

![format_png 3][]

答案：

width:123px;
    	height:123px;
    	padding:20px;
    	padding-right:40px;
    	border:1px solid red;

#### 一些元素，默认带有padding ####

一些元素，默认带有`padding`，比如ul标签。如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]

上图显示，不加任何样式的ul，也是有40px的padding-left。

所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。

可以使用`*`进行清除：

*{
    			margin: 0;
    			padding: 0;
    		}

但是，`*`的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin:0;
        padding:0;
    }

### 认识border ###

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

#### border-style ####

border的所有的线型如下：（我们可以通过查看`CSS参考手册`得到）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]

比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]

如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。

所以，比较稳定的border-style就几个：solid、dashed、dotted。

#### border拆分 ####

border是一个大综合属性。比如说：

border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、red颜色。

PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。

border属性是能够被拆开的，有两大种拆开的方式：

*  （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
 *  （2）按方向拆开：border-top、border-right、border-bottom、border-left。

现在我们明白了：**一个border属性，是由三个小属性综合而成的**。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

border-width:10px 20px;
    border-style:solid dashed dotted;
    border-color:red green blue yellow;

效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]

（1）按三要素拆：

border-width:10px;    //边框宽度
    border-style:solid;   //线型
    border-color:red;     //颜色。

等价于：

border:10px solid red;

(2)按方向来拆：

border-top:10px solid red;
    border-right:10px solid red;
    border-bottom:10px solid red;
    border-left:10px solid red;

等价于：

border:10px solid red;

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3\*4 = 12)

border-top-width:10px;
    	border-top-style:solid;
    	border-top-color:red;
    	border-right-width:10px;
    	border-right-style:solid;
    	border-right-color:red;
    	border-bottom-width:10px;
    	border-bottom-style:solid;
    	border-bottom-color:red;
    	border-left-width:10px;
    	border-left-style:solid;
    	border-left-color:red;

等价于：

border:10px solid red;

工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：

![在这里插入图片描述][20191008201959265.jpg]

为了实现上方效果，写法如下：

border:10px solid red;
    border-right-color:blue;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]

为了实现上方效果，写法如下：

border:10px solid red;
    border-style:solid dashed;

border可以没有：

border:none;

可以某一条边没有：

border-left: none;

也可以调整左边边框的宽度为0：

border-left-width: 0;

#### 举例：利用border属性画一个三角形（小技巧） ####

步骤如下：

（1）当我们设置盒子的width和height为0时，此时效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]

（2）然后将border的底部取消：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]

（3）最后设置border的左边和右边为白色：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 15]

这样，一个三角形就画好了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20230601/af5f787b0802475a9a686d4c4fa664c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20230601/2b6d71dcada14532821a57fc36dd857b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20230601/79ee7fd64b804386860b56bb06711273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20230601/de84e1e9abe64281b32f7948672f0e5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20230601/4d78dad8f93b40b7b88e86c3d7232195.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20230601/501cb3c6fa55404e9c2e06076d90fe5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]: /images/20230601/92d8fb7d48f44b78bbab453a6bf1466f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]: /images/20230601/3a474df3000d4581bf277c1d40f65e3f.png
[20191008201426305.jpg]: /images/20230601/fc9fc231aee34d8a89846fb7aa478c43.png
[format_png]: /images/20230601/83330d660fb94a6e8ed9cef63fdaa769.png
[format_png 1]: /images/20230601/f19e801892f74dcb8c4f7875f4fce0b9.png
[format_png 2]: /images/20230601/b058821831564e79a8f8263ea597bb19.png
[format_png 3]: /images/20230601/081e113c40ef407f8a343706e3452ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]: /images/20230601/f70c8453a75a402d825f19bcf2f8e1a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]: /images/20230601/0279ffd72cc94b9db356bb9750033e22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]: /images/20230601/bf79cb43299746549f796bbf9e05f6fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]: /images/20230601/87b0956659a443d5b3ce2bc5f53b4f6c.png
[20191008201959265.jpg]: /images/20230601/2695b76bac5e4660aac45d461c540d76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]: /images/20230601/5b5ca49f701d44beacc2c03a61c20d93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]: /images/20230601/ac1e7c774f6c457fa14e28ca1c7c777f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]: /images/20230601/a09439a2a624409a99786580649cdc46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95dWFuai5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 15]: /images/20230601/a9e4aa9c5b8c4a5abbd6c675a5fdc3e9.png