文字相关的样式可以被继承
例 : color line-height font-style font-size font-weight
布局相关的样式不能被继承 （默认行为）
通过设置inherit值，可以改变默认的继承方式。
相同样式优先级
当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，后引入的优先级高。
单一样式优先级
style行间> id> class> tag> *> 继承（inherit）
1000 100 10 1
！important 权重 > 10000（建议不要乱用，非规范写法）
场景 ： 紧急情况下使用。
标签+类的权重 > 单类
群组和单一样式？
群组选择器与单一选择器的权重相同，靠后写的优先级高。
层次选择器
权重 ：把对应的数值加起来
约分 ： 把相同的选择器约掉
建议 ： 层次选择器最好不要超过三层
content < padding < border < margin
内容 内填充 边框 外填充
padding ： 内填充（内边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
margin ： 外填充 （外边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
注 :1. 背景颜色会填充到margin以内的区域。
背景图 ： 默认背景图会平铺border padding content区域。
只有一张背景图时，从padding区域开始添加（默认行为）
2，文字只会在content区域
3，padding属性不可以出现负值，margin属性可以出现负值。
box-sizing属性
content-box（默认值）： 整个盒子的宽 = content（width）+ padding + border
border-box ： 整个盒子的宽 = content（width-padding-border）+ padding +border
应用场景 ：
1，可以省略一些计算的环节。
2，可以针对100%的换算。
1，margin叠加的问题
只会出现在上下margin中，左右是不存在margin叠加问题的。
特点 ： 会取叠加中较大的值。
解决方法：
1.BFC规范（以后介绍）
2.想办法只给一个元素添加间距
2，margin传递的问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递的问题的
特点 ： margin-top会导致父容器与子容器一起向下移动。
解决方法 ：
1.BFC规范（比较推荐）
2.给父容器加边框（不太推荐）
3.margin换成padding（将子容器的margin属性改为父容器的padding属性）
1，margin ： 0 auto（实现容器的左右居中，上下不行）
上下居中方法 ： 1.position 2.transition 3.flex（以后学习）
文字居中方法 ： 左右居中（text-align ： center） 上下居中 （line-height ： height）
2，当一个盒子不写宽度的时候？
盒子的宽度默认与父容器的宽度相同，
并且当设置padding，border，margin的时候，盒子的content会从新计算。
1，对图像进行放大缩小 ： alt+鼠标滑轮
2，工具栏中的第二个 ：矩形选框工具（测量尺寸大小）
3，通过信息面板，可以查看到测量的尺寸大小（在窗口菜单可以找到，需要把单位改为像素）
给盒子一个固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏 ：
hidden ： 溢出部分隐藏
scroll ： 容器出现下拉页面
auto ： 自动化（未超出时为hidden，超出后变为scroll）
overflow-x ：hidden；
overflow-y ： scroll；（可以对容器的x，y分别设置溢出属性）
盒子嵌套实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 /* #box1{width: 350px ;height: 350px;border: 1px black dashed;padding: 30px;} 9 #box2{10 border: 5px blue solid;11 padding: 20px;12 background: #f6f6f6;13 }14 #box3{15 background: #ffa0df;16 padding: 40px;17 }18 #box4{19 border: 1px white dashed;20 padding: 3px;21 }22 #box5{23 border: 1px white dashed;24 padding: 49px;25 }26 #box6{27 border: 5px #fcff00 solid;28 height: 100px;29 background: #96ff38;30 } */31 #box1{32 width: 400px;height: 400px;33 border: 1px black dashed;34 }35 #box2{36 border: 5px #d7effe solid;37 margin: 30px;38 background: #f6f6f6;39 }40 #box3{41 background: #ffa0df;42 margin: 20px;43 border: 1px #ffa0df dashed;44 }45 #box4{46 margin: 40px;47 border: 1px white dashed;48 }49 #box5{50 border: 1px white dashed;51 margin: 3px;52 }53 #box6{54 height: 100px;55 margin:49px;56 border: 5px #fcff00 solid;57 background: #96ff38;58 }59 </style>60 </head>61 <body>62 <div id="box1">63 <div id="box2">64 <div id="box3">65 <div id="box4">66 <div id="box5">67 <div id="box6">68 69 </div>70 </div>71 </div>72 </div>73 </div>74 </div>75 </body>76 </html>
盒子嵌套实例
