这是我参与「第四届青训营 」笔记创作活动的第2天。 今天我们来谈谈css，如果说html是一个人的骨架的话，那css就是一个人的皮肤。
CSS定义
Cascading Style Sheet 层叠级联样式表
CSS：表现（⽹页）
字体，颜⾊，边距，⾼度，宽度，背景图⽚，⽹页定位，⽹页浮动…
选择器
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指绽定统一的CSS样式。
作用:标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点:能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式，只能选择全部的当前标签
标签名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
复制代码
类选择器
.red {
color: red;
}
<ul>
<li class="red">标签</li>
<li>web标准</li>
</ul>
复制代码
不能用标签做类名
可以用短横线 - 命名
不要用纯数字，中文等命名
多类名
.setred {
color: red;
}
.font-size {
font-size: 40px;
}
<h1 class="setred font-size">红色，40像素字体大小</h1>//类与类之间空格空开即可
复制代码
id选择器
#id名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
复制代码
与类的区别：样式是通过#来定义的，结构通过id调用，只能调用1次，别人无法使用！
id经常与JavaScript搭配使用
通配符选择器
选取页面中所有的元素（标签）
CSS中，同一个标签可能可以匹配到多条不同的样式规则，因此，标签最终的样式由选择器的特异度又称优先级决定。最基本的，以下优先级依此递增：类型选择器，类选择器，ID选择器；除此之外，一些保留字如!important也会影响到最终生效的样式对应的选择器。
继承
每一个直接作用于元素的CSS规则总是会接管该元素从祖先元素继承而来的规则，即继承父元素的计算值，除非显示地指定一个值。通过inherit保留字可以显示地继承样式；每个属性都具有初始值，使用initial关键字可以将属性重置为初始值。
CSS求值过程
在解析出DOM树和样式规则后，首先通过选择器匹配、属性有效、媒介符合等方式对规则进行筛选，取得声明值；根据选择器优先级比较，得出优先级最高的属性值，即层叠过程；当层叠值为空时，使用继承值或初始值，由此产生了必不为空的指定值；接着，在解析步骤中将部分相对值或关键字转化为绝对值，并在规格化步骤中进一步转化直到所有值成为绝对值；最后，绝对值中的浮点数被转化为整型以供渲染。
###布局
布局是指确定内容的大小和位置的算法，它依据元素、容器、兄弟节点和内容等信息进行计算。前端常用的布局方式包括floats、position、flexbox、gird、流式布局等，每一种方式都有诸多细节，要正确应用和调试需要仔细了解其特性和区别。
