CSS知识总结

一. 文档流（normal flow）

文档流指文档的流动方向。

• 流动方向

1. inline元素从左到右，到达最右边才会换行。
2. block元素从上到下，每一个都是另起一行。
3. inline-block元素也是从左到右。

• 宽度

1. inline宽度为内部inline元素的和，不能用width指定。
2. block默认自动计算宽度，可以用width指定。
3. inline-block结合前两者特点，可用width。

• 高度

1. inline高度由line-height间接确定，跟height无关。
2. block高度由内部文档流元素决定，可以设置height。
3. inline-block跟block类似，可以设置height。

注意

1. 不要在inline元素中嵌套block元素。
2. 有些元素可以不在文档流中，会脱离文档流的元素有：float和position:absolute|fixed;

二. 盒模型

三. CSS布局

CSS布局把页面分成一块一块，按左中右，上中下等排列。

布局分类

• 固定宽度布局，一般宽度为960/1000/1024px。
• 不固定宽度布局，主要靠文档流的原理来布局（文档流本来就是自适应的，不需要加额外的样式）。
• 响应式布局，就是PC上固定宽度，手机上不固定宽度，也是一种混合式布局。

布局需要用到哪些属性

float布局

步骤：

1. 在子元素上加float:left和width

2. 父元素上加.clearfix

   .clearfix:atfer{ content: ''; display: block; clear:both; }

flex布局

flex布局是一种一维的布局，一次只能处理一个维度上的元素布局，一行或者一列。

常用的样式：

1. display:flex;
2. flex-direction:row|column;
3. flex-wrap:wrap;
4. justify-content:center|space-between;
5. align-items:center;

grid布局

grid布局是二维布局，可以同时处理行和列上的布局，尤其适合不规则布局。

四. CSS定位

布局和定位的区别：布局是屏幕平面上的，定位是垂直于屏幕的。

position属性

position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

语法：

position: static | relative | absolute | sticky | fixed;

说明：

1. static 默认值，使元素定位于常规流中。
2. relative 相对定位，相对于其正常位置进行定位，元素不会脱离文档流。
3. absolute 绝对定位，定位基准是祖先里的非static，元素会脱离文档流。
4. fixed 固定定位，定位基准是viewport(浏览器窗口)。
5. sticky 粘滞定位，制造出吸附效果。

注意：

1. 如果写了absolute，一般都得补一个relative。
2. 如果写了absolute或fixed，一定要写top和left，某些浏览器上如果不写top/left，会位置错乱。
3. sticky兼容性很差。

五. CSS动画

CSS动画使元素可以从一种样式逐渐变化为另一种样式。

CSS 动画有两种做法：使用transition或使用animation。

1. transform

四个常用功能：位移translate、缩放scale、旋转rotate、倾斜skew

• transform之translate

transform:translateX(<length-percentage>); 仅水平方向移动（X轴移动）;

transform:translateY(<length-percentage>); 仅垂直方向移动（Y轴移动）；

transform:translate(<length-percentage>,<length-percentage>); 水平方向和垂直方向同时移动

（也就是X轴和Y轴同时移动）；

transform:translateZ(<length>);且父容器设置perspective，指定对象Z轴的平移；

transform:translate3d(x,y,z);  x、y、z轴同时移动。

注意

1. 一般都需要配合transition过渡属性
2. inline元素不支持transform属性，需要先变成block。

• transform之scale

transform:scaleX(<number>); 元素仅水平方向缩放（X轴缩放）；

transform:scaleY(<number>);元素仅垂直方向缩放（Y轴缩放）；

transfprm:scale(<number>,<number>);使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴

同时缩放）。

• transform之rotate

transform:rotate(<angle>); 通过指定的角度参数对原元素进行2D 旋转；

transform:rotateX(<angle>); X轴上的旋转角度；

transform:rotateY(<angle>); Y轴上的旋转角度；

transform:rotateZ(<angle>); Z轴上的旋转角度。

经验：一般用于360度旋转制作loading。

• transform之skew

transform:skewX(<angle>); 仅使元素在水平方向扭曲变形（X轴扭曲变形）；

transform:skewY(<angle>); 仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

transform:skew(<angle>,<angle>); 使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的

角度值进行扭曲变形）。

2. transition

transition允许css的属性值在一定的时间内平滑地过渡，作用是补充中间帧。

语法：

transition: 属性名 时长 过渡方式 延迟；

说明：

1. 可以用逗号分隔两个不同属性，如：

   transition:left 200ms, top 400ms;
   

2. 可以用all代表所有属性，如：

   transition: all 1s;
   

3. 过渡方式有 linear(匀速) | ease(缓动) | ease-in(淡入) | ease-out(淡出) | ease-in-out(淡入且淡出) | cubic-bezier | step-start | step-end | steps;

注意

1. 不是所有属性都能过渡，display:none=>block无法过渡，一般改成visibility:hidden=>visible
2. 过渡必须要有起始，一般只有一次动画，或者两次，比如hover和非hover状态的过渡。
3. 如果除了起始，还有中间点，有两种方法：使用两次transform或使用animation。

3. animation

复合属性。检索或设置对象所应用的动画特效。

animation: 动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停;

说明：

1. 过渡方式：与transition取值一致，如linear
2. 次数：3或2.5或infinite(无限循环播放动画)
3. 方向：reverse(反向) | alternate(交替) | alternate-reverse(反向交替)
4. 填充模式：none | forwards | backwards | both
5. 是否暂停：paused | running

4. @keyframes

关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。

语法：

@keyframes animationname{
    keyframes-selector{
        css-styles;
}}

说明：

@keyframes slidein{
    from { transform: translateX(0%); }
    to { transform: translateX(100%); }
}

@keyframes identifier{
    0% { top: 0;  left: 0; }
    30% { top: 50px; } 
    68%, 72% { left: 50px; }
    100% { top: 100px; left: 100%; }
}

六. 浏览器渲染原理

• 浏览器渲染过程

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一棵渲染树（Render Tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影等画出来）
6. Composite合成（根据层叠关系展示画面）

• 三棵树

• 三种更新方式