CSS知识总结

用户2701579443253
71 阅读5分钟

文档流

  • 流动方向

    • inline元素从左到右，到达最右边才会换行，默认合并

    • block元素从上到下，每一个都另起一行，不会合并

    • inline-block也是从左到右

  • 宽度

    • inline宽度为内部inline元素得和，不能用width指定
    • block默认自动计算宽度，可用width指定
    • inline-block结合前两者特点，可用width

  • 高度

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

overflow溢出

  • 当内容大于容器

    • 等内容得宽度或高度大于容器得，会溢出
    • 可用overflow 来设置是否显示滚动条
    • auto是灵活设置
    • scroll 是永远显示: 一般太丑不用
    • hidden 是直接隐藏溢出部分
    • visible是直接显示溢出部分
    • overflow可以分为overflow-x 和 overflow-y

float/position:absolute/fixed会脱离文档流

盒模型

盒模型分两种，一种是content-box,一种是border-box。区别是内容盒宽度只包含content，边框盒宽度包含到border：分别为border，padding和content。

content-box：内容是盒子的边界

border-box：边框是盒子的边界

border-box更好用

margin合并

父子margin合并，兄弟margin合并

父子用padding/border挡住，兄弟用inline-block消除。

float布局

  • 步骤
    • 在子元素加float：left和witdh
    • 在父元素加.content
    • .content:after{content:'';display:block;clear:both}

flex布局

  • 内容流动方向（主轴）

    • flex-direction:row/row reverse/column

  • 是否折行

    • flex-wrap:wrap/nowrap/wrap reverse

  • 主轴对齐方式

    • justify-content:flex-start/flex-end/center/space-between/space-around

  • 次轴对齐方式

    • align-items:flex-start/flex-end/center/space-between/space-around

  • 当交叉轴有多余空间时，对齐容器轴线

    • align-content:

flex-item样式

  1. item上加order，ord从小到大排列
  2. item上加flex-grow用来分配多余空间
  3. item上加flex-shrink控制变瘦；flex-shrink：0。防止变瘦
  4. 缩写 （flex：1 0 100px）
  5. 5.align-self定制align-item

grid布局

  • 成为grid

    • grid-template-rows：40px 50px 60px；
    • grid-template-columns：40px 20px；
    • fr为份

  • item设置范围

    • 哪列开始：grid-column-start
    • 哪列结束；grid-column-end
    • 哪行开始：grid-row-start
    • 哪行结束：grid-row-end
    • 设定空隙为12像素：grid gap：12px；

  • 分区

    • grid-template-areas：

“xxx yyy zzz”

“qqq www eee”

“fff ggg hhh”

浏览器渲染过程

  • 根据HTML构建HTML树（DOM）
  • 根据CSS构建CSS树（CSSOM）
  • 将两个树合并成一颗渲染树（render tree）
  • layout 布局（文档流，盒模型，计算大小和位置）
  • Paint绘制（把边框颜色，文字颜色，阴影等画出来）
  • Compose合成（根据层叠关系展示画面）

三种更新方式

  • JS/CSS > 样式 > 布局 > 绘制 > 合成
  • JS/CSS > 样式 > 绘制 > 合成
  • JS/CSS > 样式 > 合成

css动画优化

  • JS优化

    • 使用requestAnimationFrame 代替 setTimeout 或 setInterval

  • CSS 优化

    • 使用will-change或translate

定位position

  • absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，如果找不到这样的祖先元素，参照对象是视口。

  • relative:生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • fixed:生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • static 静态定位
  • sticky 粘性定位

z-index层叠上下文

  1. 每个层叠上下文就是一个小世界
  2. 小世界里的z-index和外界无关
  3. 同一世界的z-index才能比较
  • 哪些不正交的属性可以创建他
    • opacity（透明度）属性值小于1时
    • z-index为0时
    • flex
    • transform

transition 过渡

  • 作用
    • 添加中间帧

语法：transistion:all 0.3s 加到本身

  • 过渡方式
    • linear（线性）
    • ease（均匀）

transform变形

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

translate位移

  • translate优点:不会影响其他元素位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%)
  • 对行内标签没有效果
  • 值个数
    • 一个值时，设置x轴上的位移
    • 两个值时，设置x轴和y轴上的位移
  • 值类型：
    • 数字：100px
    • 百分比：参照元素本身
  • 三维坐标系
    • x轴：水平向右 注意：x右边是正值，左边是负值
    • y轴：垂直向下 注意：y下面是正值，上面是负值
    • z轴：垂直屏幕 注意：往外面是正值，往里面是负值

scale缩放

语法

  • scaleX（n）
  • scaleY（n）
  • scale（n，n）

rotate旋转

  • 语法
    • transform：rotate（30deg）旋转30度

animation 动画

语法

demo.start{animation:xxx 1s forwards(停在最后一帧）

@keyframes xxx{
0%{}
50%{}
100%{}
}
  • 动画属性
    • animation-name :规定@keyframes动画的名称（必须的）
    • animation-duration:规定动画完成一个周期所化的秒或毫秒，默认是0（必须的）
    • animation-timing-function:规定动画的速度曲线，默认是“ease”
    • animation-delay:规定动画何时开始，默认是0
    • animation-iteration--count:规定动画被播放的次数，默认是1，还有infinite
    • animation-direction:规定动画是否在下一周期逆向播放，默认是“normal” ，altrenate逆播放
    • animation-play-state:规定动画是否正在运行或暂停，默认是running 还有pause
    • animation-fill-mode:规定动画结束后状态，保持forwards回到起始backwards

animation:时长（1s），过渡方式{（ease）线性}，，延迟时间（1s），次数{infinite（无限次）}，方向{reverse（折项）alternate（交替的）}，填充模式（forwards），是否暂停（paised/running）

avatar
文章
阅读
粉丝