理解CSS

盒模型

实现三角形

//html
<div class = "triangle-bottom"></div>

//css
.triangle-bottom{
    width:0;
    height:0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

BFC特性

内联布局

弹性盒子布局

网格布局

定位

层叠上下文

层叠

层叠三种条件解决冲突：

样式表的来源

样式从哪里来
选择器优先级

哪些选择器比另一些选择器更重要
源码顺序

样式在样式表里的顺序

样式表来源

添加到网页的样式表并不是浏览器唯一使用的样式表，还有浏览器默认样式（用户代理样式）。用户代理样式优先级低，作者样式表会覆盖它们。

!important声明

在声明的后面、分号的前面加上!important，该声明就会被标记为重要的声明

标记了!important的声明会被当作更高优先级的来源，因此总体的优先级按照由高到低排列如下：
1. 作者的!important
2. 作者
3. 用户代理
理解优先级

浏览器将优先级分为两部分：HTML的行内样式和选择器样式

行内

行内样式属于 “带作用域” 的声明，它会覆盖任何来自样式表或者 <style>标签的样式。

选择器优先级

优先级的准确规则如下：
- 如果选择器的 ID 数量更多，则它会胜出
- 如果 ID 数量一致，那么拥有最多类的选择器胜出
- 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出
源码顺序

如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出

继承

默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些。它们主要是跟文本相关的属性: color、font、font-family、font-size,font-weight、font-variant、 font-style、line-height、 letter-spacing,text-align、text-indent、 text-transform、white-space 以及 word-spacing。还有一些其他的属性也可以被继承，比如列表属性: list-style、list-style-type、list-style-position 以及 list-style-image。表格的边框属性 border-collapse和border-spacing 也能被继承。

理解CSS | 青训营笔记

理解CSS

盒模型

层叠

样式表来源

理解优先级

源码顺序

继承