CSS 知识总结

134 阅读4分钟

1、浏览器渲染原理

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

2、transition过渡

  • 作用:添加中间帧

  • 语法:transition: 属性名 时长 过渡方式 延迟时长

  • 可以用逗号分隔两个不同属性,如:transition:left 200ms,top 400ms;

  • 可以使用all代表所有属性

  • 过渡方式有:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

  • 注意:

    1. 并不是所有属性都能过渡,如:display:none =>block就不行,一般改成:visibility:hidden =>visible
    2. background可以过渡
    3. opacity可以过渡,但不推荐

3、animation写法

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

  • 时长:1s或者1000ms

  • 过渡方式:与transition的取值相同,如linear

  • 次数:数字 或者 infinite

  • 方向:reverse | alternate | alternate-reverse

  • 填充模式:none| forwards | backwards | both

  • 是否暂停: paused | running

  • 声明关键帧:animation: xxx 1s;

    1. 写法一:
    @keyframes xxx{
      0%{}
      50%{}
      100%{}      
    }
    
    1. 写法二:
    @keyframes xxx{
      from{}
      to{}
    }
    

4、visibility和diplay的区别

  • visibility:hidden:可以隐藏元素,但仍需占用与未隐藏之前一样的布局

  • display:none:可以隐藏某个元素,且隐藏的元素不会占用任何空间.

  • visibility:collapse:用于table行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间 (与将 display: none 用于表格的行/列上的效果相当)

5、适配手机端要加上

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

6、flex布局总结

  • 主要使用属性:
    1. 自动换行: flex-wrap:wrap;
    2. 左右对齐方式:justify-content:center| space-between;
    3. 垂直方向对齐:align-items: center
  • 注意:
    1. flex布局下,vertical-align属性将失效
    2. 负margin的方法,在子元素和父元素中间再添加一个div
    3. 不要把width和height写死,除非特殊说明,用min-width|max-width|min-height|max-height

7、float布局总结

  • 在父元素上加 .clearfix
.clearfix:after{
    content:'';
    display:block;
    clear:both;
}
  • float布局,不需要做响应式,因为手机上没有IE,这个布局是专门为IE准备的
  • 发现图片的border下方有多余部分,加上:vertical-align : top;
  • 有时候border会干扰布局,可以使用outline
  • margin-left:auto;margin-right:auto; >margin:0 auto;
  • 什么时候用float布局:要求兼容IE浏览器的时候

8、CSS盒模型

  • box-sizing:content-box|border-box;

  • 盒模型的标准回答:盒模型分为两种,分别是content box 和border box,二者的区别为:以宽度为例,content box的宽度包含的就只有content内容部分的宽、高,而border box的宽度包含 border的宽度、padding、content部分的宽度。

  • content-box width = 内容宽度,

  • border-box width = 内容宽度 + padding+border。

  • 两个兄弟块元素之间的margin是合并的,只在上下合并,左右不合并

  • display:inline-block可以取消兄弟元素之间上下margin的上下合并

  • 父元素和第一个子元素的margin也是合并的,加上border-top/bottompadding-top/bottomoverflow:hidden 属性后可以将二者分离,也就是父元素包含了子元素的margin在内。

9、CSS定位

  • 如何是脱离内部文档流元素:position: absolute/fixed;float:left;
  • 层叠上下文(堆叠上下文)
    1. 每一个层叠上下文都是一个新的小世界(作用域)
    2. 这个小世界里面的z-index与外层无关
    3. 处于同一个小世界里的z-index才能比较
  • 哪些不正交的属性可创建层叠上下文
    1. z-index值不为“auto”的相对/绝对定位
    2. position:fixed的元素
    3. z-index 值不为“auto”的flex项目
    4. opacity属性值小于1的元素
    5. transform属性值不为“none”的元素
    6. 其他:查看MDN
  • opacity:0.5 设置透明度,与background中的rgba中的透明度设置有什么区别:opacity 设置内容中的所有元素,background中的background只会涉及背景色
  • 负z-index也逃不出层叠上下文
  • 主要的position属性:
    1. relative 相对定位,升起来,但不脱离文档流
    2. absolute绝对定位,定位基准是祖先里的非static元素
    3. fixed 固定定位,定位基准是viewport(存在问题)