《CSS 知识总结》

Darcy_Cheng
136 阅读5分钟

浏览器渲染原理

渲染步骤

  1. 根据HTML构建HTML树（DOM）

  2. 根据CSS构建CSS树（CSSOM）

  3. 将两棵树合并成一颗渲染树（render tree）

  4. Layout布局（文档流，盒模型，计算大小和位置）

  5. Paint绘制（边框颜色，文字颜色，阴影等画出来）

  6. Compose合成（根据层叠关系显示画面） 三棵树

    第三步，第四步,第五步是最耗时的部分，这些合起来，就是我们通常所说的渲染

css动画的两种做法（transition和animation）

transition（过渡）用法

transition：属性名（all）| 时长 | 过渡方式 | 延迟时间

可以用all来代替所有属性

用逗号隔开代表两个不同属性： transition：left 1s , top 200ms ;

过渡方式：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | steps 等。（常用的是linear和ease）

注意：不是所有的都能过渡

display：none => block不能过渡，可以改成 visibility：hidden => visible

background和opacity（一般不用）可以过渡

过渡必须有起始（一般是一次或两次动画）

animation（动画）用法

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

@keyframes 动画名 {
        0% {
            transform: translateX(0);
         }
	30%, 60% {
        	transform: translateX(50px);
        }
        100% {
        	transform: translateX(50px);
        }
    }

过渡方式：和transition一样，常用linear，ease。

次数：2/2.4/infinite(无限次)。

方向：reverse（反过来走） | alternate（交替，过去又过来） | alternate-reverse。

填充模式：none | forwards（到最后）。

是否暂停： paused | running 。

transtorm（变形）四个常用功能

位移 translate（50px）
缩放 scale（1.5）
旋转 rotate（45deg）
倾斜 skew （60deg）

一般都需要配合transition过渡

inline元素不支持transform，需要先变成block

文档流

文档流

文档流方向：从左到右（inline，inline-block），从上到下（block）

inline（内联元素）：宽度不变，宽度由内联总和决定，高度由line-height决定。

block（块级元素）：宽度可设置，占一行，高度由文档流元素决定，也可自行设置。

inline-block（内联块）：结合以上两种，宽度可设置，高度与block类似。

overflow（溢出）

overflow：auto | scroll(滚动条) | hidden（隐藏）| visible

脱离文档流

float：left/right;

position： absolute/fixed;

盒模型

content-box（内容盒）：content就是盒子的边界。

宽度 = 内容的宽度；

content-box

border-box（边框盒）：border才是盒子的边界。

宽度 = 内容宽度 + padding + border

border-box

CSS布局

布局是把页面分成一块一块的。（左中右，上中下等排列）

固定宽度布局：宽度一般为960/1000/1024px。

不固定宽度布局：文档流。

响应式布局： 在pc端固定，手机端不固定。

布局思路：

  • 从大到小：先定大布局，在完善小布局（老手）
  • 从小到大：先定小布局，在组合成大布局（新手）

float布局（需要兼容IE9可用这个）

步骤：

  • 子元素加 float：left/right 和 width
  • 在父元素加 (html中添加一个叫clearfix的类，css中添加以下代码)
.clearfix::after {
          content:' ';
          display:block;
          clear:both;
        }

flex布局

flex布局

flex container 的样式

  1. 设置flex： display:flex;

  2. 设置流动方向 flex-direction （控制了哪个方向，哪个就是主轴）

  • row（默认值）：按行排列，水平方向，从左到右。
  • row-reverse：按行排列，水平方向，从右到左。
  • column：按列排列，垂直方向，从上到下。
  • column-reverse：按列排列，垂直方向，从下到上。
  1. 控制是否折行 flex-wrap
  • nowrap（默认值）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
  1. 主轴对齐方式 justify-content
  • flex-start（默认值）：向左对齐。
  • flex-end：向右对齐。
  • center：居中对齐。
  • space-between：两端对齐，间隙之间间隔相等（一行的第一个左边和最后一个右边无间隙）。
  • space-around：单个项目左右间隙相等。 主轴对齐方式
  1. 次轴对齐方式 align-items
  • flex-start（默认值）：向前对齐。
  • flex-end：向后对齐。
  • center：居中对齐。
  • stretch：拉伸，占满整个高度。 次轴对齐方式
  1. 多行对齐方式 align-content
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch（默认值） 多行对齐方式
flex item 的样式

缩写：flex: flex-grow flex-shrink flex-basis

  1. item上加order

    order:n;   从小到大排序（包括负数），n越大在越后面，默认是0。

  2. flex-grow 长胖

    flex-grow：1； 占一份

  3. flex-shrink 缩小

    flex-shrink：0（不缩）/ 1 (一起缩)；

  4. flex-basis

    控制基准宽度，默认auto

重点记住这些代码

display: flex;
flex-direction: row / column;
flex-wrap: wrap;
just-content: center / space-between 
align-items: center

grid布局（兼容最新浏览器）

  1. display: grid;

  1. 行从第一根线到第三根线
grid-row-start:1;
grid-row-end:3;
  1. 列从第一根线到第三根线
grid-column-start:1;
grid-column-end:3;
  1. fr（free space）相当于份
grid-template-columns:1fr 1fr 1fr;
grid-template-columns:1fr 50px 1fr;
  1. grid-template-areas
.item-a {
 	grid-area: header;
 }
.item-b {
	grid-area: main;
 }
.item-c {
	grid-area: sidebar;
 }
.item-d {
	grid-area: footer;
 }
.container {
	display: grid;
	grid-template-columns: 5epx 5epx 58px 5epx;grid-		template-rows : auto;
	grid-template-areas:
	"header header header header"
        "main main . sidebar"
	"footer footer footer footer" ;
}

  1. grid-gap(格子间隙)
grid-row-gap:15px;
grid-column-gap:10px;

CSS定位

position

static：默认值，待在文档流里

relative：相对定位，相对于自身，但不脱离文档流

absolute：绝对定位，定位基准是祖先里最近的非static

fixed：固定定位，定位基准是viewport

sticky：粘滞定位

层叠上下文

关于层叠上下文可以看张鑫旭写的一篇文章

张鑫旭写的深入理解CSS中的层叠上下文和层叠顺序

avatar
文章
阅读
粉丝