深入CSS （上）
规则冲突（时，哪条规则生效）
根据选择器的特异度来决定，特异度越高则优先级越高，主要的两个影响因素
- 选择题的种类：id > (伪)类 > 标签
- 选择题的数量
(注: 一般情况下, 种类的影响比数量大) 例: (下图中,第一个的特异度比第二个的大）
继承
-
某些属性会自动继承其父元素的计算值，除非显式指定一个值
-
一般来说，和文字相关的都是可继承的（比如color, font-size），和盒模型相关的是不可继承的（比如宽度）
-
如果一个属性是不可继承的，但我们想要强制是它继承，可以使用显示继承(
xxx: inherit) -
当一个属性为不可继承的且没有设置值时，又或是当一个属性可继承但往上找不到可继承的值时，该属性会被设置为规定中的默认值 | 初始值 （当然也可以将一个属性显示地重置为初始
xxx: initial）
布局
布局的相关技术（主要有三种）：
- 常规流（文档流）比如 块级元素从上到下，行级元素像文字一样按行输出
- 浮动：比如可以实现文字环绕图片等效果
- 绝对定位：比如可以直接盖在常规流上，不对常规流造成影响
常规流又可以细分为五种
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
盒模型
content-box
把元素理解成一个一个的盒子(可以理解为容器)，容器里装一些内容(即图中的Content), 默认情况下CSS中设置宽度和高度, 设置的是Content (box) 的宽度和高度，总的宽度和高度，要把margin, border, padding也算进去
- 设置为auto，是浏览器根据其它属性确定
- 百分数是相对于当前元素所在的content box确定的（容器有指定的高度时，百分数才生效）
- padding 、margin设置为百分数时 是相对于容器宽度的（注：不是容器高度）
- 使用Border做三角形的技巧，border设置为不同颜色，宽度和高度包括padding设置为0（只剩下border）,可以根据需要选定方向，然后将其它三个方向的三角形设置为透明
- 可以利用
margin-left: auto; margin-right: auto;来实现水平居中 - margin在竖直方向上存在着合并（折叠）的现象(border-collapse),在文字排版上会带来一些方便，但同时也会带来一些不方便
border-box(实际项目中用的较多)
* {
box-sizing: border-box;
}
overflow
当设置了宽度和高度后，但内容放不下，就会产生超出的问题，可以通过设置overflow来决定怎么处理
overflow: visibleoverflow: hiddenoverflow: scroll
