盒子模型介绍
CSS 的盒子模型在实际的应用中是非常重要的部分，几乎在每一个网页中，我们都会用到盒模型。那什么是盒模型呢？通俗来说，就是网页中的元素的布局规则。
元素在网页中的布局非常的重要，特别是元素与元素相互之间的布局经常会用到。
盒子模型就是用来解决元素与元素之间的相对布局的关系的。主要分为外边距和内边距两块。
控制一个元素的外边距需要用到外边距的四个属性： -上外边距：margin-top -右外边距：margin-right -下外边距：margin-bottom -左外边距：margin-left
控制一个元素的内边距需要用到内边距的四个属性： -上内边距：padding-top -右内边距：padding-right -下内边距：padding-bottom -左内边距：padding-left
具体的用法我们以实例来讲解
四个外边距和内边距可以依次设置大小
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.demo {/* 设置盒子demo的宽度、高度和边框（粗细、线型和颜色） */width: 200px;height: 200px;border: 2px solid red;/* 设置盒子demo的四个外边距的大小 */margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 20px;/* 设置盒子demo的四个内边距的大小 */padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;}</style></head><body><div class="demo">我是盒子里面的内容部分</div></body></html>
简写规则
为了方便，很多时候我们并不会依次分别去写每一个边距的大小，我们可以采用简写的方式来做
简写的规则：不管是外边距还是内边距，我们简写的时候都是遵循相同的规则具体如下
可以按照上、右、下、左的顺序依次写出上边距、右边距、下边距和左边距四个值的大小
如果对应边距的值有相同的，则可以这么来写：只写三个值，第一个值就代表是上边距，第二个值就代表左右边距（相同），地三个值就代表下边距；
- 如果只写两个值，第一个值代表上下边距的值（相同），第二个值就代表左右边距的值（相同）
- 如果只写一个值，那就是代表四个边距的值都是一样的
简写实例
写四个值(和上面的实例效果一致)
padding: 10px 20px 10px 20px;：表示内上边距为10px，内右边距为20px，内下边距为10px；内左边距为20px（遵循顺时针的方向）margin: 10px 20px 30px 20px;：表示外上边距为10px，外右边距为20px，外下边距为30px；外左边距为20px（遵循顺时针的方向）
写三个值
margin: 10px 20px 30px;：第一个值表示外上边距为10px，第二个值表示外右边距和外左边距都为为20px，第三个值表示外下边距为30px（padding同理）
写两个值
padding: 10px 20px;：第一个值表示内上边距和内下边距都为10px，第二个值表示内右边距和内左边距都为20px（margin同理）
写一个值
padding: 10px;：一个值表示四个内边距的值都为10px（margin同理）
em 与 rem 应用的场景
在页面中，设置元素的大小，除了可以采用像素px的单位来设置，也可以采用其他的单位方式来设置，比如em和rem来设置
em实例
含义：em单位表示相对大小，相对父元素来确定自身的大小
实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {font-size: 20px;}p {font-size: 2em;padding-left: 2em;}</style></head><body><p>我是字体的大小</p></body></html>
说明1：上面对根元素html设置了字体的大小为20px，对于p元素设置了字体的大小为2em，那么p元素最终的大小就是是多少呢？对于em单位来说，p元素是继承了其父元素body的大小，body元素没有单独设置过，所以也继承了其父元素，也即根元素html的大小，所以最终的结论就是p元素字体的大小是相对于html设置的20px为基准的，2em代表2倍大小的意思，也即p元素的最终大小为：20px * 2 = 40px。
说明2：通过em的单位设置大小时，字体属性font-size大小会继承其父元素，而其他属性则会以它自身的字体大小为基础来动态变化。比如此时
padding-left: 2em;的实际大小为：40px * 2 = 80px。总结：通过em来设置元素的大小，对于字体大小属性来说是以父元素的大小为基准的，对于其他属性则是以自身字体大小属性为基准的。
rem实例
含义：rem单位也表示相对大小，是相对与根元素（html元素）来确定自身的大小
实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {font-size: 20px;}#demo {font-size: 2em;}p {font-size: 2rem;padding-left: 2em;}</style></head><body><div id="demo"><span>字体大小</span><p>我是字体的大小</p></div></body></html>
说明1：上面的实例中，根元素html的实际字体大小为20px，demo元素的字体大小设为了2em，那么其实际字体大小就是20px * 2 = 40px，也即
span标签中的文字的实际大小为40px；说明2： p元素设置了字体大小为2rem，那么其实际大小则为根元素html字体大小的2倍，即20px * 2 = 40px，此时p元素并没有继承其父元素demo的字体大小来计算的；
说明3：p元素还设置了内左边距为2em，此时内左边距具体的大小为其自身字体大小的2倍，也即：40px * 2 = 80px。
em 与 rem 的区别与联系
em与rem都是用来设置元素相对大小的，em的字体大小font-size总是相对于其父元素的大小来变化的，而rem的字体大小font-size不管其父元素是谁，它只会根据根元素html的大小为基准来变化的。
对于元素自身其他属性的大小，通过em的单位来设置的，则都是与其字体大小font-size为基准来变化的，与父元素或是根元素没有直接的关系
