在浏览器中，开发者工具中，点击每一个元素都可以看到对应的一个模型
可以看到以下内容
- 蓝色 content-box 指的是内容区域
- 绿色 padding-box 指的是padding
- 黄色 border-box 指的是border
- 暗黄色 margin
1. 内填充
padding属性用于实现元素内部的内容和边框区域之间的距离。
添加padding后添加boder一样的效果，会放大元素。
1.1. 语法
我们可以使用padding属性来定义内填充，有四种写法
- 一个属性值 表示四个边的内填充都是对应的值
- 两个属性值 表示 上下 左右 第一个值为上下，第二值为左右
- 三个属性值 表示 上 左右 下 第一个值为上 第二个值为左右 第三个值为下
- 四个属性值 表示 上 右 下 左
选择器 {
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
}
如果已经设置好了宽高，然后在这个基础上添加了padding值，那么我们就需要区减去对应的padding值的宽高值，这个操作很麻烦，后续我们有更好的方法。
1.1.1. 单独方向设置
- padding-left 左填充
- padding-right 右填充
- padding-top 上填充
- padding-bottom 下填充
1.2. 使用场景
1.2.1. input输入框
为了保证对应的效果美观，输入的文字不贴边框，一般设计师会给输入框设置padding值。
1.2.2. 元素距离对应的边框有padding
2. 外填充
外填充指边框外和其他元素之间的距离。
外填充叫margin，在我们对应的页面上，元素和元素之间的间距都可以使用外填充实现。
2.1. 语法
2.1.1. 基本使用方法
外填充和内填充一样，可以有多种写法，不同的值的数量代表着不同的方向。
选择器 {
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
}
2.1.2. 单个方向设置margin
margin和padding相同支持单个方向的设置
- margin-left
- margin-right
- margin-top
- margin-bottom
2.2. 样式重置
网页上很多元素上都有默认的margin值，比如：
p、body、hx、列表，而大部分情况下，我们不需要使用这些margin值，所以我们要清除掉。
有默认margin的标签 {
margin: 0;
}
2.3. 块元素水平居中
当我们有一个固定宽度的块元素时，我们可以让其居中，使用margin操作
选择器 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
直接设置 margion: 0 auto这种方法也可以，但是要清楚，我们水平居中的核心代码是左右auto和上下无关，所以未来上下设置成多少都无所谓。
2.3.1. 版心
为了我们对应的大部分的用户的显示器都能正常访问我们的网站，所以我们会选用一个固定的宽度居中，来作为网页主体内容展示的区域，这个区域叫版心（安全宽度）。
京东的安全宽度是1190，和淘宝一样。小米是1226px
版心的实现，就是借助我们对应的margin属性居中的特性。
一般版心的类名叫container，所以一般我们会给版心设置一个单独的样式
.container {
width: 1226px;
margin-left: auto;
margin-right: auto;
}
补充
同胞选择器
+用于选择到某个元素紧挨着的下一个同胞元素
div + p 选中的是p标签
<div></div>
<p></p>
当我们的列表中，第一个没有相关属性时，可以使用同胞选择器实现对应的效果
列表项 + 列表项 {
样式
}
<ul>
<li></li>
<li></li>
</ul>
