2.CSS

//CSS基础 Cascsding Style Sheet(层叠样式表)
CSS选择器
1.浏览器的解析方式是从右向左解析的
.body div .hello {

}
CSS选择器分类
*元素选择器 a{}
*伪元素选择器 ::before{} 注：选择的是一个真实元素
*类选择器 .link{}
*属性选择器[type=ration]{}
*伪类选择器 :hover{} 注：选择的是一种状态
*ID选择器 #id{} 注：id唯一
*组合选择器 [type=checkbox]+label{}
*否定选择器 :not(.link){}
*通用选择器 *{}

CSS选择器权重
*ID选择器 +100 3
*类，属性，伪类 +10 4
*元素 伪元素 +1 5
*其他 +0 6
计算一个不进位的数字，（权重高一级压死人）
CSS选择器权重
*！important优先级最高 1
*元素属性 优先级高 2
*相同的权重 后写的生效

CSS非布局样式
字体 字重 颜色 大小 行高
背景 边框
滚动 换行
粗体 斜体 下划线
其他
*字体族
--serif 衬体（字体周围带有装饰性）例如宋体
--sans-serif 非衬线字体（字体周围不带有装饰性）黑体
--monospace 等宽字体
--cursive 手写体
--fantasy 花体
*多字体fallback
*网络字体，自定义字体
*iconfont

//自定义字体
@font-face {
font-family:"IF";
src:url("./IndieFlower.ttf")
}

*行，行高的构成
inline box的高度会决定行高

背景
*背景颜色
*渐变色背景
*多背景的叠加
*背景图片和属性（雪碧图）减少HTTP请求数，提高页面的加载性能，有一些情况下可以减少图片的大小
*base64和性能优化
*多分辨率的适配
//hsl 色相0-160 饱和度0-100% 亮度0-100% 透明度
background:hsl(0,100%,100%);
background:hsla(0,100%,100%,.3);
背景图
background:url（./test.png）;
渐变色背景 角度
background:liner-gradient(45deg,red,green);
background-position: -20px -30px; 相对于容器
background-size: 100px 200px;
base64和性能优化
滚动

visible hidden scroll auto

屏幕快照 2018-12-20 15.20.03.png

屏幕快照 2018-12-20 14.33.39.png

屏幕快照 2018-12-20 14.41.05.png

文字折行
overflow-wrap(word-wrap):通用换行控制，是否保留单词
word-break：针对多字节文字，可以设置中文句子也是单词
white-space：空白处是否换行

装饰性属性
字重 font-weight normal bold bolder lighter 100,200,--900
斜体 font-style:itatic
下划线 text-decoration
指针 cursor

base64将图片变成文字，用于减少HTTP请求，适用于小图片
伪元素是真的有元素双冒号
伪类表示状态，单冒号
如何美化checkbox
label[for]和id
隐藏原生input
:checked+label