理解CSS | 青训营笔记
这是我参与「第四届青训营 -前端场」笔记创作活动的的第2篇笔记
了解CSS
CSS是什么？
用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果
hi {
color : white;
font-size: 14px;
}
选择器Selector，选择器Property，属性值Value，声明Declaration
在页面中使用CSS
<！--外联-->
<！--嵌入-->
<！--内联--> （不推荐）
1.1 CSS是如何工作的
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：
浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
浏览器显示 DOM 的内容。
DOM DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。
由于 DOM 是 CSS 与文档内容的相遇之处，理解 DOM 有助于设计，调试和维护 CSS 文件。
DOM的表示 先看一段HTML代码：
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
在该 DOM 中，
元素所对应的节点是父节点。它的子节点是一个文本节点和我们的一些 元素对应的节点。这些 SPAN结点也是父节点，它们各自的文本节点就是它们的子节点：
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
这就是浏览器解释先前的HTML片段的过程 —它渲染上述的DOM树，之后在浏览器中像这样输出它。
应用CSS到DOM 如果将下面CSS应用到上面HTML上：
span {
border: 1px solid black;
background-color: lime;
}
浏览器会解析 HTML 并通过它创建 DOM，之后解析 CSS。由于 CSS 只有一个可用的规则，该规则有一个span选择器，它会将这个规则应用到这三个的每一个上。
深入CSS
2.1选择器优先级
选择器的特异度（Specificity）
#id .(伪）类 E 标签#nav .list li a:link
.hd ul.links a
继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值
<p>This is a <em>test</em> of the <strong>innerHTML</strong> property.</p>
<style>
body {
font-size: 16px;
}
p {
color: #f00;
}
em {
color: #00f;
}
</style>
显示继承
*{
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
.some-widget{
box-sizing: content-box;
}
2.2 初始值
。 CSS中，每个属性都有一个初始值
background-color 的初始值为 transoarent
margin-left 的初始值为0 。 可以使用initial关键字显示重置为初始值 background-color:initial
2.3 CSS求值的过程
filtering： 对于应用到该页面的规则用一下条件进行筛选：选择器匹配，属性有效，符合当前media等
申明值： Declared Values,一个元素的某属性可能有0到多个声明值，比如：
p { font-size:16px}
p.text{font-size:1.2em}
cascading: 按照来源、limportant、选择器特异性、书写顺序等选出优先级最高的一个 属性值
层叠值： Cascaded Value，在层叠过程中，赢得优先级比赛的那个值。比如1.2em
defaulting: 当层叠值为空的时候使用继承或初始值
实际值： 染时实际生效的值，比如400px
2.4 布局（Layout) 是什么？
确定内容的大小和位置的算法
依据元素，容器，兄弟节点和内容等信息来计算
布局相关技术： 1、常规流；2、浮动；3、绝对定位；
常规流： 行级、块级、表格布局、FlexBox、Grid布局
盒模型：
width：
. 指定 content box 宽度
. 取值为长度、百分数、auto
. auto 由浏览器根据其他属性确定
. 百分数相对于容器的 content box 宽度
height：
. 指定 content box 高度
. 取值为长度、百分数、auto
. auto 由浏览器根据其他属性确定
. 百分数相对于容器的 content box 高度
. 容器有指定的高度时，百分数才会生效
2.5 块级 VS 行级
块级不和其他盒子并列摆放，且适用于所有的盒模型属性
和其他行级盒子一起放在一行或拆开成多行，盒模型中width，height不适用
