深入CSS | 青训营笔记

XavierShaw
76 阅读3分钟

深入CSS | 青训营笔记

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

本堂课重点内容

  • CSS的继承和求值过程
  • CSS布局的概念
  • CSS布局技术 (Positioning Schema)

CSS继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

可以用inherit关键字进行显式继承

每个属性都有一个默认的初始值， 可以用initial关键字显式重置为初始值

CSS求值过程

  1. Filtering

    通过对DOM树以及样式规则进行匹配，筛选出DOM树元素的各属性声明值 (Declared Value)

  2. Cascading

    对每个属性的声明值进行层叠，并选出优先级最高的作为属性值 (Cascaded Value)

  3. Defaulting

    当层叠值为空时，使用继承或初始值作为属性的指定值 (Specified Value)

  4. Resolving

    将相对值或关键字转化为绝对值，比如em转为px，相对路径转为绝对路径，从而得到不进行具体布局的情况下最具体的计算值 (Computed Value)

  5. Formatting

    将计算值进一步转换，比如关键字、百分比等都转为绝对值，进而得到实际布局时使用的值 (Used Value)

  6. Constraining

    将小数像素值转换为整数，得到渲染时实际生效的值

CSS布局概念

  • 布局是确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点、内容等信息来计算
  • 相关技术有：
    • 常规流： 行级、块级、表格布局、FlexBox、Grid布局
    • 浮动 (Float)
    • 绝对定位
  • 盒模型
    • margin --> border --> padding --> content (width & height)
    • margin collapse: margin-top与margin-bottom，margin-left与margin-right重叠情况下的相互抵消

CSS常规流布局技术

常规流中的盒子，在某种排版上下文中参与布局

  • 行级 (Inline Formatting Context)

    • 盒子在一行内水平摆放
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐

  • 块级 (Block Formatting Context)

    某些容器会创建一个BFC：

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex, Grid

    规则:

    • 盒子从上到下摆放
    • 垂直margin合并 (margin-collapse)
    • BFC内的盒子的margin不会与外部margin合并
    • 不允许行级与块级盒子同处于一个父级盒子中 --> 创建匿名块级包裹行级

  • Flex Box

    • 可以控制子级盒子的：
      • 摆放流向 (flex-direction : row, row-reverse, column, column-reverse)
      • 摆放顺序
      • 宽度与高度
      • 水平和垂直方向的对齐 (主轴: justify-content, 侧轴: align-items)

image.png image.png

  • Grid

    grid-template-columns 和 grid-template-rows 划分网格

    用grid-area设置元素所占网格： e.g. 1/1/3/3

image.png

  • 浮动 (Float)

    • float: left/right 最左/最右

    • position 属性：

      • static：默认值，非定位元素
      • relative：相对于自身原本位置偏移，不脱离文档流，但流内其他元素当它没有偏移一样布局
      • absolute：绝对定位，相对于非static祖先元素定位
      • fixed：相对于视口绝对定位

个人总结

本节课介绍了CSS的几个困难知识点，深入地介绍了CSS的继承概念与求值过程的具体步骤。除此之外，还具体介绍了CSS布局的盒模型、布局方式的概念以及具体的布局技术。

avatar
文章
阅读
粉丝