CSS基础必知必会

1. CSS选择器优先级
   • 内联
   • ID选择器
   • 类选择器
   • 标签选择器
2. link和@import
   • link属于XHTML标签，@import是CSS提供的
   • link会随着页面加载而加载，@import等页面加载完毕后才加载
   • @import在IE5以上才能被识别，link属于XHTML标签无兼容性问题
   • link的权重高于@import的权重
   • 使用js控制dom改变元素只能用link的方式，@import不受dom控制
3. CSS隐藏元素方式
   • opacity: 0
   • visibility: hidden
   • overflow: hidden
   • display: none
   • z-index: -9999
   • transform: scale(0, 0)
4. em/px/rem
   • em：相对单位，基准点为父节点字体大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
   • px：绝对单位，页面按精确像素奖励
   • rem：相对单位，相对根节点html的字体大小来计算
5. 块级元素水平居中
   • margin: 0 auto

     .center {
       width: 200px;
       height: 200px;
       margin: 0 auto;
     }复制代码

   • flex布局

     .center {
       display: flex;
       justify-content: center;
     }复制代码

   • table方法

     .center {
       display: table;
       margin: 0 auto;
     }复制代码

6. CSS定位方式
   • static
   • relative
   • absolute
   • fixed
   • sticky
7. z-index
   • 控制重叠元素的垂直叠加顺序
   • 默认元素的z-inde值为0
   • z-index只能影响设置了position值的元素
8. 层叠上下文
   • HTML元素的三维概念
   • HTML元素相对于面向视窗或者网页用户的z轴延伸
   • HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间
   • 触发条件
     • 根元素（HTML）
     • z-index的值不为“auto”的绝对/相对定位
     • 一个z-index的值不为auto的flex项目（flex item），即：父元素display: flex|inline-flex
     • opacity属性值小于1的元素
     • transform属性值不为none的元素
     • mix-blend-mode属性值不为normal的元素
     • filter值不为none的元素
     • perspective值不为“none”的元素
     • isolation属性被设置为isolate的元素
     • position: fixed
     • 在will-change中指定了任意CSS属性
9. 浮动清除
   • 空div：<div style="clear: both"></div>
   • Clearfix方法：将上文功能抽取到.clearfix类
   • overflow: auto或overflow: hidden
10. css-sprites
    • 减少加载多张图片的HTTP请求数
    • 可提前加载资源
    • 维护成本较高
    • HTTP2多路复用技术可达到类似优化效果
11. 媒体查询
    • link元素中使用

      <link rel="stylesheet" media="(max-width: 800px)" href="example.css"></link>复制代码

    • 样式表中使用

      @media (max-width: 800px) {
        .test {
          display: none;
        }
      }复制代码

12. 盒模型
    • content（内容）
    • padding（内边距）
    • border（边框）
    • margin（外边距）
13. 标准盒模型和怪异盒模型
    • 标准盒模型——box-sizing: content-box
    • 怪异盒模型——box-sizing: border-box
14. BFC(Block Formatting Context)
    • 一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离
    • 触发条件
      • 根元素，即HTML元素
      • position: fixed/absolute
      • float不为none
      • overflow不为visible
      • display的值为inline-block、table-cell、table-caption
15. 用translate改变位置的优势
    • 用改变定位的方式会触发重新布局，进而触发重绘和复合；translate的方式不会触发浏览器的重新布局或重绘，只会触发复合
    • transform只用到GPU，改变定位的方式会使用到CPU
16. 伪类和伪元素
    • 伪类：以冒号(:)作为前缀，被添加到选择器末尾，主要用于控制特定状态下的样式
    • 伪元素：用于创建一些不在文档树中的元素，并为其添加样式，比如::before
17. flex
    • 用于响应式界面布局比较方便
    • 开发人员只需声明布局应该有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局
    • 当布局涉及到不定宽度、分布对齐的场景时，就要优先考虑弹性盒布局
18. CSS动画与过渡
    • animation和transition类似，都是随时间改变元素的属性值
    • animation不需要事件触发，transition需要事件触发
    • transition只有一组关键帧，animation可以设置多个关键帧

 

参考资料

1. www.cxymsg.com/guide/

延伸阅读

---

▶ Walkthrough007