深入 CSS ｜ 青训营笔记

Karl_fang
102 阅读4分钟

深入 CSS ｜ 青训营笔记

文章第一句话为“这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

选择器的特异度 Specificity

id(伪)类标签
#nav .list li a:link122
.hd ul.links a022

!important > 行内样式 > id > 类选择器/属性选择器 > 标签选择器 > 通配符 > 继承

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值，文字相关的有些可以继承，盒模型相关的不可继承

  • 显式继承：inherit，让原本不可继承的属性变成可继承的
  • 初始值：initial：CSS 中，每个属性都有一个初始值 background-color 的初始值为 transparent，margin-left 的初始值为 0，可以使用 initial 关键字显式重置为初始值 background-color: initial

CSS 样式确定的过程

  • filtering：对应用到该页面的规则用以下条件进行筛选选择器匹配、属性有效、符合当前 media 等

  • 声明值：Declared Values，一个元素的某属性可能有 0 到多个声明值。比如:

    p { font size: 16px }
p.text { font size: 1.2em }

  • cascading：按照来源、limportant、 选择器特异性、书写顺序等选出优先级最高的一个 属性值

  • 层叠值：Cascaded Value，在层叠过程中，赢得优先级比赛的那个值，比如 1.2em

  • defaulting：当层叠值为空的时候，使用继承或初始值

  • 指定值：Specified Value，经过 cascading 和 defaulting 之后，保证指定值一定不为空

  • resolving：将一些相对值或者关键字转化成绝对值，比如 em 转为 px，相对路径转为绝对路径

  • 计算值：Computed Value，一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值，比如 60%，继承的时候是继承的计算值

  • formatting：将计算值进一步转换，比如关键字、百分比等都转为绝对值

  • 使用值：Used Value，进行实际布局时使用的值，不会再有相对值或关键字，比如 400.2px

  • constraining：将小数像素值转为整数

  • 实际值：渲染时实际生效的值

布局 layout

  • 常规流：行级、块级、表格布局、Flex、Grid
  • 浮动
  • 绝对定位

块级 vs 行级

  • Block Level Box：不和其它盒子并列摆放开成多行，适用所有的盒模型属性
  • Inline Level Box：和其它行级盒子一起放在行或拆，盒模型中的 width、height 不适用

行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一 个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 行放不下时，换行显示
    • text-align决定-行内盒 子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex 子项和 Grid 子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文

  • 它可以控制子级盒子的:

    • 摆放的流向(→ ← ↑ ↓)
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

绝对定位

position 属性

属性值描述
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位
fixed相对于视口绝对定位

position: relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

position: absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

position: fixed

  • 脱离常规流
avatar
文章
阅读
粉丝