3.CSS基础
全面讲解CSS基础知识，包括层叠样式表的基本规则和含义、选择器（分类、特性、权重、性能）、非布局样式属性、CSS hack以及一些案例分析（checkbox等）。
3.1选择器
CSS（Cascading Style Sheet）层叠样式表
A.CSS权重问题：
内联样式 > style样式 > link
选择器权重：
内联样式，如style=" "，权值为1000.
ID选择器，如#contene，权值为100
class选择器、伪类选择器、属性选择器，权重为10
元素、伪元素，权重为1
除了考虑权重，还有下面可能影响样式显示：
1.！important
2.元素属性，优先级高（内联样式研究生）
3.相同权重，后写的生效
附注：在不进位的数字计算下，并不是10个类选择器可以等于一个ID选择器，只要有ID选择器就大过类选择器。
上面11个类选择器权重还是不如ID选择器高。
上面文本Dijkstra的颜色是orange。
继承：关于继承，如果设置了样式，就不会继承了，看下面示例。
//不会继承yellow这个颜色
.father{
color: yellow;
}
.father span{
color: red;
}
#jicheng{
color: blue;
}
<div class="father">
<p id="jicheng">样式继承</p>
<p><span>样式继承</span></p>
</di
！import对样式设置影响
在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。
#test p{
color: blue;
}
.fontstyle{
color:red !important;
}
<div id="test">
<p class="fontstyle">
!important
</p>
</div>
覆盖!important可以用另外一个!important
B.浏览器解析CSS方式：
从右往左解析，加快浏览器对CSS解析速度，更快找到CSS样式对应元素。
比如下面，是从.hello -> div -> body 进行解析
body div .hello{
color:red;
}
C.选择器分类：
伪选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。它们有两种主要类型 ： 伪类和伪元素。
伪类选择器：
和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
由于【状态】是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
//在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。
a:link|a:visited|a:hover|a:active
:focus
/* 伪类将应用于拥有键盘输入焦点的元素。 */
:first-child
/* 伪类将应用于元素在页面中第一次出现的时候。 */
:lang
/* 伪类将应用于元素带有指定lang的情况。 */
伪元素选择器
伪元素选择器，伪元素的效果是需要通过添加一个实际的元素才能达到的。
伪元素只是在页面显示的时候起了作用，在构建dom树的时候它被忽略的
/* 为某个元素的第一行文字使用样式。 */
::first-line
/* 为某个元素中的文字的首字母或第一个字使用样式。 */
::first-letter
/* 在某个元素之前插入一些内容。 */
::before
/* 在某个元素之后插入一些内容。 */
::after
伪类是一种状态，对一种状态设置样式。
伪元素是不会出现在HTML中，也不会出现在DOM树中，但是是一个真实存在的元素，可以显示内容，设置样式。
参考文章：
https://www.cnblogs.com/zcynine/p/5008985.html
https://www.cnblogs.com/EricZLin/p/8857405.html
3.2非布局样式
与布局无关的样式设置
文字：字体、字重、颜色、大小、行高
盒子：背景、边框
页面：滚动、换行
装饰性样式：粗体、斜体、下划线
其他
字体
字体族、多字体fallback、网络字体/自定义字体、iconfont
行高line-height
行高的构成：行高是由linebox决定的，linebox是由inlinebox组成的，inlinebox的高度会决定行高的高度。
<style>
span{
background:red;
}
.c1{
line-height: 20px;
}
.c2{
line-height: 8px;
}
.c3{
line-height: 30px;
}
.c5{
line-height: 28px;
}
</style>
<div>
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
inline box
<span class="c5">inline box</span>
</div>
每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。
可以参考：https://segmentfault.com/a/1190000005155084
再看一个例子：
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg 
</span></div>
<div class="c1">
line-height大于字体size时候，会在外部有对应的块盒子模型。
为什么设置height和line-height一样时候会垂直居中，因为子元素会在line-height自动垂直居中。
一个问题：
<div style="background:red">
<img src="test.png"/>
</div>
如上图，会出现一段空白，原因是img相当于inline元素，inline元素就要遵守行高的构成，会按baseline对齐，也就是基线对齐，基线到底线之间会有空隙，那如何解决（图片下面有空隙怎么办？如何清除？）？
原理就是会按inline进行排版，排版时候字体对齐，默认按照baseline对齐，baseline和底线之间有偏差，这个问题也有称经典的图片3px问题，解决方法是第一种设置对齐方式vertical-align:bottom或者改变inline设置display:block
背景
背景颜色、渐变色背景、多背景叠加、背景图片和属性（雪碧图）、base64和性能优化、多分辨率适配
hsl：色相、饱和度、亮度
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
渐变色背景：
//线性渐变
background: linear-gradient(red, blue); /* 标准的语法 */
//径向渐变
background: radial-gradient(red, green, blue); /* 标准的语法 */
雪碧图：
.c2{
width:20px;
height:20px;
background:url(./test_bg.png) no-repeat;
background-position: -17px -5px;
background-size: 261px 113px;
}
.c3{
width:20px;
height:20px;
background:url(./test_bg.png) no-repeat;
background-position: -169px -23px;
background-size: 261px 113px;
}
<div class="c2">
</div>
<div class="c3">
</div>
原图：
效果图（利用偏移实现）：
多分辨率适配：利用background-size把大图做小。
base64：文本格式，代替url，节省HTTP连接数，但是体积增大，图片本身体积增大（4/3），相当于文件从img下图片增加到css中，css文件增大，所以适合比较小的图标，比如loading图标。
还有base64在传输上有优势，也就是节省HTTP连接数，但是一是增加了体积，二是增加了解码的工作（从base64到图片），我们实际工作中写的时候还是图片，到打包的时候再转base64.
边框
边框的属性：线型、大小、颜色
边框背景图
边框衔接（三角形）
//利用边框绘制出一个三角形
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
/* border-right:30px solid blue; */
border-left:30px solid transparent;
border-right:30px solid transparent;
}
滚动
内容比容器多的时候产生滚动。
文本折行
overflow-wrap（word-wrap）：通用换行控制
word-break：针对多字节文字（是否把字母看成一个单位）
white-space：空白处是否断行
装饰性属性
字重（粗体）font-weight
斜体 font-style：itatic
下划线 text-decoration
指针 cursor
3.3hack和案例
我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS Hack：Hack即不合法但生效的写法，主要用于区别不同浏览器。
Hack缺点：难理解 难维护 易失效
替代方案：
1.特性检测
2.针对性加class
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
2.选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
更多参考文章：https://www.cnblogs.com/mumble/p/4576489.html
3.4面试题
1.CSS样式（选择器）的优先级
计算权重确定
！import（能覆盖的就是再对另外加！import）
内联样式
后写的优先级高
2.雪碧图的作用
主要利用background-position
作用是减少HTTP请求数，提高加载性能
有一些情况下可以减少图片大小（比较有限）
3.自定义字体的使用场景
宣传/品牌/banner等固定文案
字体图标
4.base64的使用
用于减少HTTP请求
适用于小图片
base64的体积约为原图4/3
5.伪类和伪元素的区别
伪类表示一种状态
伪元素是真的有元素（before、after）
前者单冒号，后者双冒号（大部分浏览器）
6.如何美化checkbox
label[for]和id
隐藏原生input
：checked+label
具体可以看视频Hack和案例（2）