全面系统讲解css 工程化

选择器

	.body div .hello{
		color:red;
	}
	// 注意 ： 这里浏览器的解析顺序不是 从左往右 (.body --> div --> .hello)解析,
 			  而是从右往左 (.hello --> div --> .body)进行解析，因为这样可以更节省性能， 加快速度

选择器分类：

• 元素选择器 a{}
• 伪元素选择器 ::before{} 选中的是元素，但这个元素不会在dom树中出现，却又是真实存在的
• 类选择器 .link{}
• 属性选择器 [type=radio]{}
• 伪类选择器 :hover{} 选中的是一个元素的状态
• ID选择器 #id
• 组合选择器 [type=checkbox]+label{}
• 否定选择器(反向选择器) :not(.link){}
• 通用选择器 *{}

选择器权重

1. ID 选择器 – #                    100
2. 类 、属性 、伪类选择器    10
3. 元素、 伪元素选择器          1
4. 其余选择器                         0

注意 ：上述数字是为了在多种组合选择器出现的时候，用于相加 从而 分辨谁的优先级更高
比如：#id .link a[href]        结果： 111
           #id .link.active         结果：120 （更高的优先级）

行高的设置

vertical-align: top/center/middle;    // 设置元素的垂直对齐方式。

经典案列：img下方 3px空白

产生原因：

img 也是inline元素，因此也需要遵守行高的构成
主要是因为图片的垂直对齐方式vertical-align引发，默认值是baseline，字体大小为12px（视字体大小而定）.
默认为此值时图片下方就会多出3px。

解决方式：

将 vertical-align 的值设置为 bottom
将img设置为 block
设置图片所在的容器元素和width和height与图片一样

背景

0. 背景色
1. 渐变色背景
2. 多背景叠加
3. 背景图和属性(雪碧图)
4. base64 和 性能优化
5. 多分辨率适配

使用hsla替换 rgb

	background: hsla(240,100%,100%,.3)   // 第一个参数范围是0~360，对应不同颜色，第二个参数代表饱和度0%~100%， 第三个参数代表亮度0%~100%，第四个参数表示透明度【可选参数】

渐变色 linear-gradient
菜鸟教程–linear-gradient讲解

flex布局

父级元素 设置：

display：flex

子元素 设置：

flex： px |  num  | %

inline-block 布局

为元素设置 inline-block ,使得元素可以像文字一样并排排列。
但是元素会出现 “缝隙” 问题。 出现问题的原因是：此时的元素类似于文字，所以需要将他们父级元素的font-size设置为0px，在于本身设置需要的font-size大小即可

下面是效果图

并未修改字体大小：

修改之后：

背景

clip-path重点，是个很冷门却好用的属性，但是需要调查清楚兼容性再使用

• background-position: center top; // 背景图显示位置，top、center、bottom

• background-size:numpx numpx | cover; // 背景大小 支持像素值、cover

• background-size: contain // 让图片完整显示出来，长宽比显示不变，如果有多余区域，则留白

• clip-path // 对背景图进行裁剪，配和 transition 可以做出很多效果

动画

transform 过渡动画
@keyframes 关键帧动画