css 胶囊 两种颜色_CSS 知识总结

一、浏览器渲染原理

1、HTML：DOM树/描述内容；

CSS：CSSOM树/描述需要对文档应用的样式规则；

DOM树和CSSOM树合并后形成渲染树（render tree）；

构建渲染树：

（1）从DOM树根节点开始遍历每个可见节点。【某些节点不可见（例：脚本标记、元标记），某些节点通过CSS隐藏，因此在渲染树中也被忽略（display:none）属性；

（2）对于每个可见节点，为其找到适配的CSSOM规则并应用它们；

（3）发射可见节点，连同其内容和计算样式；

2、Layout布局：文档流、盒模型、计算大小、位置

3、Paint绘制：边框、文字颜色，阴影等画出来；

4、Compose合成：根据层叠关系展示画面；

更新属性触发具体流程具体去看；

二、CSS 动画的两种做法

transition：

#heart {

transition: all 5s（属性名：left 时长：5s,top5s 过渡方式：linear 延迟：3s) ;

}

#heart:hover{

transform:scale(1.5);（不是所有属性都能过渡）

animation：

#heart{

animation: .5s（时长） xxx（名） infinite（次数） alternate-reverse（方向）等等;

}

@keyframes xxx {

0%{transform: scale(1);}

100%{transform: scale(1.2);}

}

三、其他内容：

1、基础：CSS2.1（使用最广泛版本）；

文档流方向：inline（左到右，元素和，width不能指定，line-height确定），block（上到下，width可指定，元素决定，可设height），inline-block（左到右，两者结合，width可指定，可设height，block类似）；

overflow：auto、scroll、hidden、visible、可分为-x、-y

脱离文档流：float，position：absolute/fixed

两种盒模型：content-box（内容），border-box（内容+padding+border）

background包含border外边沿

margin合并：父子合并（padding/border，overflow：hidden，display：flex消除）；兄弟合并（inline-block消除）

基本单位：px，em，%，整数等；颜色：#FF6600/#F60,rgba（0，0，0，1），hsl（360，100%，100%）

2、CSS布局：

布局分类：固定宽度布局960、1000、1024px/不固定宽度靠文档流/混合布局PC固，手机不固

布局思路：从大到小，从小到大；

float布局：子元素+float：left/父元素+.clearfix/CSS+四句话（IE有一些问题）

flex布局：container样式：流动方向，折行，对齐方式，多行内容分布；item样式：order、grow、shrink、basis、align-self（定制）

grid布局：container：行列设置宽度，取名设置范围，fr，分区：grid-template-areas，gap

3、CSS定位：

属性position：static（默认值），relative（相对定位，爸爸，z-index：auto默认值、0、1、-1），absolute（绝对定位，儿子，相近的定位元素、鼠标提示），fixed：固定（广告、回到顶部）

层叠上下文：

在同一个作用域里面才能比较，一些不正交属性可以创建它；(-)无法逃出创建的作用域；

4、CSS动画：

transform：translate、scale、rotate、skew（多重效果）