1. CSS 继承
(1) 文字相关的样式可以被继承
(2) 布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性 inherit 值) 例如: border: inherit;
2. CSS 优先级
(1) 相同样式的优先级
当设置相同的样式时，后面的优先级较高
(2) 内部样式和外部样式的优先级
内部样式和外部样式的优先级相同，但如果都设置了相同的样式，后写的优先级高
(3) 单一样式的优先级
style内联 > id > class > tag > * > 继承
注: style内联 权重 1000
id 权重 100
class 权重 10
tag 权重 1
(4) !important
提升样式的优先级，非规范方式，不建议使用
(5) 标签 + 类 与 单类
标签 + 类 > 单类
(6) 群组优先级
群组优先级与单一选择器的优先级一样，但后写的优先级高
3. CSS 盒子模型
(1) 组成(由内向外): content(物品) -> padding(填充物) -> border(包装盒) -> margin(盒子与盒子之间的距离)
(2) content:内容区域，由width和height组成
(3) padding:内边距(内填充)
只写一个值:30px (上右下左)
只写两个值:30px 40px (上下 左右)
写四个值:30px 40px 50px 60px (上右下左)
同样可以使用单一样式:
padding-top、padding-right、padding-bottom、padding-left
(4) margin:外边距(外填充)
只写一个值:30px(上右下左)
只写两个值:30px 40px (上下 左右)
写四个值:30px 40px 50px 60px (上右 下左)
同样可以使用单一样式:
margin-top、margin-right、margin-bottom、margin-left
注意:
(1)背景颜色会填充到margin以内的区域(content、padding、border均被填充)
(2)文字在content区域
(3)padding不能为负数，而margin可以为负数。padding可以0，margin为正数，向右或向下；margin为负数，向左或向上
（5) CSS盒尺寸
box-sizing(盒尺寸，可以改变盒子模型的展示形态)
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值) | border-box
默认值:content-box: width、height -> content
border-box: width、height -> content padding border
使用场景:
1.不用再去计算一些值
2.解决一些百分比的问题
(6) CSS盒子模型的一些问题
(6.1) CSS盒子模型之margin叠加问题
问题现象: 当给两个盒子同时添加上下外边距时，就会出现叠加问题，这个问题只在上下外边距有，左右外边距没有
结果:会取上下中较大值作为叠加后的值
解决方案:
(1) 利用BFC规范
(2)想办法只给一个元素添加边距
(6.2) CSS盒子模型之margin传递问题
问题现象: margin传递的问题只会出现在嵌套的结构中，且只有margin-top有传递的问题，其他三个方向没有传递的问题。
解决方案:
(1)BFC规范
(2)给父容器加边框
(3)margin换成padding
（7) CSS盒模型拓展
(7.1) margin自适应居中
1.margin左右自适应是可以的，但是上下自适应是不可以的
margin-left:auto; margin-rightLauto;
简写:margin: auto auto;
(7.2)不设置content的现象
2.width、height不设置的时候，嵌套在其中的元素会自动撑满父容器。
对盒子模型的影响:会自动去计算容器的大小，节省代码。
#box1{width: 300px;height: 300px;background: red;}
#box2{color: white;padding-left: 30px;border-left: 10px solid black; height: 100px;background: blue;}
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
