css3

规范模块化发展
样式丰富、炫酷
提高网站的可维护性及性能速度

css相关内容

Caseading、优先级、继承
选择器
盒模型
值和单位
颜色、背景、边框
视觉格式化模型
☆各类布局
☆层叠上下文
字体。书写模式
变换（transition）
动画（animation）
媒体查询
。。。其他
响应式设计
CSS语言增强工具
CSS工程设计方案
。。。其他生态☆&工程实践

基础知识

层叠、样式表

层叠：解决样式表产生的冲突
选择器优先级：内联>id>class=attribute=pseudo-class>type=pseudo-element
（内连样式=行内样式）

书写要求：

选择器少用id
尽量不用！ important
自己的样式加载在引用库样式的后面

盒模型：

实现三角形：

//html
<div class="triangle-bottom"></div>
//css
.triangle-bottom{
width:0;
height:0;
border-left:50px solid transparent;
border-reight:50px solid transparent;
border-bottom:50px solid red;
}

(transparent:代表全透明黑色，类似于rgba（0,0,0,0）这样的值)

布局

css3前的常规布局：

Normal Flow常规流：默认布局方式，有块级格式化上下文和内联格式上下文
Float浮动流：用float属性控制脱流，做横向布局
Positioning定位流：用position属性控制，fixed和absolute脱离文档流，实现自由定位，覆盖等

css3之后的新增布局：

一维空间：flex弹性盒子布局,浏览器兼容性更好
二维空间：grid网格布局
文本、内容多列展示：Multicol多列布局

网格布局：

//css
.lei{
display:grid;
grid-template-columns:100px 1fr;
gird-template-row:60px 6fr 1gr;
}

定位（Position）：

在文档流的基础上，让元素移动，做出更多灵活的改变，用top，left，right，bottom进行定位
relative：
absolute：
fixed：
sticky：相对于最近的滚动祖先的视口定位

层叠上下文：

对html的三维构想，将元素沿着屏幕垂直排开
层叠顺序：（从底层到顶层）
根元素的背景及边框→z-index<0的元素→按html出现的顺序→定位元素→z-index>0的元素

设备像素和参考像素

dpi：每英寸多少点
ppi：每英寸多少像素
css像素：（视角单位）1css像素是从一臂之遥看解析度为96dpi的输出设备时，一点的视角

相对长度的使用

em：可以让展示区根据展示字号的不同，进行放缩调整
rem：根元素的字体大小
_vw:视窗宽度的1%
vh:视窗高度的1%