前言
—————————————————————————————
我在HTML中，我学习了一个很重要的理论：块元素和行内元素。在这一节中，我将介绍CSS中极其重要的一个理论——CSS盒子模型。
—————————————————————————————
一、盒子模型是什么？
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。如图所示为一个CSS盒子模型的具体结构。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。
每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以看成一个盒子。
从上面我们可以知道，盒子模型的组成部分有4个，如下表所示。
| 属性 | 说明 |
|---|---|
| content | 内容，可以是文本或图片 |
| padding | 内边距，用于定义内容与边框之间的距离 |
| margin | 外边距，用于定义盒子与盒子之间的距离 |
| border | 边框，用于定义元素的边框 |
二、盒子模型的内容
1.宽高
元素的宽度（width）和高度（height）是针对内容区而言的。
如下面代码展示：
/*代码1*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div>
哈哈
</div>
</body>
</html>
在浏览器中展示如下图所示：
点击鼠标右键查看网页源代码会发现宽高只和内容有关而和padding无关
另外，只有块元素才可以设置width和height，行内元素是无法设置width和height的。行内元素想要设置需要使用display将其转换成块元素
2.边框
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
| 边框属性 | 说明 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框类型 |
| border-color | 边框颜色 |
代码如下（示例）：
/*代码1*/
border-width:1px;
border-style:solid;
border-color:gray;
/*代码2*/
border:1px solid gray;
对于border属性，更多使用的是简写形式，也就是代码二。
3.内边距padding
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。
内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。
跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高，记忆方法按顺时针记忆就可以了。
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
display:inline-block; /*将块元素转换为inline-block元素，让其无法独占一行*/
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
border:2px solid red;
background-color:#FFDEAD;
}
</style>
</head>
<body>
<div>哈哈</div>
</body>
</html>
如图：
4.外边距margin
padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。
也就是盒子与盒子之间的关系
分为兄弟盒子之间的，与父子盒子之间的。
兄弟之间的就是两个并列关系，如代码，如图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.class {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 60px;
padding-left: 80px;
border: 2px solid red;
background-color: #FFDEAD;
margin: 0 0 100px 0;
}
.class1 {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 60px;
padding-left: 80px;
border: 2px solid red;
background-color: #FFDEAD;
}
</style>
</head>
<body>
<div class="class">
哈哈
</div>
<div class="class1">
嘻嘻嘻
</div>
</body>
</html>
两个盒子之间有一段距离，可以用外边距来掌控。
而父子盒子就是
相当于包含关系，可以由一个大盒子装着几个小盒子。
5.盒子阴影
box-shadow：后按顺序接下面的属性
| 属性 | 说明 |
|---|---|
| 水平阴影 | 设置像素 |
| 垂直阴影 | 设置像素 |
| 模糊距离 | 设置像素 |
| 阴影尺寸 | 设置像素 |
| 阴影颜色 | 设置颜色 |
| 内外部阴影转换 | inset是转为内部阴影，不输入它就是默认外部阴影 |
6.盒子圆角边框
语法是：border-radius:左上，右上，右下，左下。
如果想要设置成一个圆形，则只需要输入一个50%百分数即可完成。
总结
盒子模型在网页布局中有巨大的作用，可以让初入前端的我对网页布局有一个更深的印象，同时在看别人的网页时，自己也能够从盒子布局的角度去剖析网页。
共勉！！！！！！！！！！！！
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
