【MUJL】深入CSS(1) | 青训营笔记

MUJL
68 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

重点

  1. CSS 选择器的特异度
  2. CSS 继承
  3. CSS 求值过程解析
  4. CSS 布局方式及相关技术

一、特异度 Specificity

  • 越特殊的选择器优先级越高

    #nav .list li a:link

    #id有1个 .(伪)类有2个 标签有2个

    特异度122

  • 对一特定元素，高特异度的选择器会覆盖低特异度中的部分属性值

    .btn 和 .btn.primary

二、继承

  • 某些属性会自动继承父元素的计算值

    • 一般和文字相关的元素会继承
    • 与盒模型相关的属性不会继承

  • 显式继承 inherit

     * {
     /* 通配选择
      * 所有的标签的box-sizing属性都将从其父级继承
      * 此时改变一个容器的box-sizing就可以同时改变其子孙元素
      */
     box-sizing: inherit;
 }
 ​
 html {
     /* html标签内的所有元素都将继承border-box属性值 */
     box-sizing: border-box;
 }
 ​
 p {
     /* html中的p标签不继承border-box */
     /* 该元素以及其子孙使用content-box */
     box-sizing: content-box;
 }

三、初始值

  • 每个属性都有初始值

  • 可以用 initial 关键字显式重置为初始值

     p {
     background-color: initial;
 }

四、CSS求值过程

graph TB

s1[/DOM树/] & s2[/样式规则/] --> p1[[filtering]] --- v1[/声明值/]
遍历CSS,找到某一元素的所有声明 -.-> p1
一个元素的某属性可能有0或多个声明值 -.-> v1

v1 --> p2[[cascading]] --- v2[/层叠值/]
e3[选出优先级最高的属性值] -.-> p2
层叠过程中得到的最高优先级的值 -.-> v2

v2 --> p3[[defaulting]] --- v3[/指定值/]
层叠值为空时使用继承或初始值 -.-> p3
经过层叠/继承/初始值之后一定有的不为空的值 -.-> v3

v3 --> p4[[resolving]] --- v4[/计算值/]
将相对值/关键字转化为绝对值 -.-> p4
在不进行实际布局的情况下所得到最具体的值 -.-> v4

v4 --> p5[[formatting]] --- v5[/使用值/]
将关键字/百分比转为绝对值 -.-> p5
进行实际布局时用的值 -.-> v5

v5 --> p6[[constraining]] --- v6[/实际值/]
小数像素转为整数 -.-> p6
渲染时实际生效的值 -.-> v6
  • 计算值中的有些值需要拿到渲染环境中才能计算，得到使用值。如页面宽度的60%
  • 继承是继承自父元素的计算值。如父元素为 2em ，子元素并不直接继承字面上的 2em ，而是继承经过计算后的 40px

五、布局 Layout

  • 确定内容的大小和位置的算法

  • 计算依据元素、容器、兄弟节点、内容等信息

  • 盒模型

    • box-sizing: border-box; 默认值

      • margin 外边距

        • 可取长度、百分数、auto

        • 百分数相当于父容器宽度

        • 水平居中

           margin-left: auto;
 margin-right: auto;

        • margin collapse

          相邻两个元素之间的margin只取大值

      • border 边框

        • 三种属性：border-width / -style / -color
        • 四个方向：border-top / -right / -bottom / -left
         /* 直接设置 */
 border: 1px solid #ccc;
 ​
 /* 按方向设置
  * width style color
  */
 border-left: 1px solid #ccc;
 ​
 /* 按属性设置
  * 上 右 下 左
  */
 border-width: 1px 2px 3px 4px;
 ​
 /* 更细化的设置 */
 border-left-width: 3px;

      • padding 内边距

         p {
     /* 指定四个方向内边距均为10px */
     padding: 10px;
     /* 指定上下内边距为10px 左右为20px */
     padding: 10px 20px;
     /* 依次指定上右下左的内边距 */
     padding: 10px 20px 30px 40px;
 }

        百分数是相对于父容器的宽度 (top和bottom也根据宽度计算)

      • content

        • width：长度、百分数(相对于当前元素所在的父盒子的宽度)、auto (浏览器根据其他属性确定)
        • height：取值同上，auto 由内容计算得来，父容器有指定高度时百分数才生效
        • 默认指定宽高时指定的是 content 的宽度和高度
        • 边距和边框在 content 基础上向外扩展

    • box-sizing: border-box; 使用更多，更符合直觉

      • 此时 width 和 height 指的是border的宽高

    • overflow 决定溢出部分如何展示

      • visible
      • hidden
      • scroll
      • auto
avatar
文章
阅读
粉丝