深入CSS | 青训营笔记

Kincy
80 阅读5分钟

选择器的特异度（Specificity）

  • id（#）：(1, 0, 0)
  • (伪)类（.）：(0, 1, 0)
  • 标签（E）：(0, 0, 1)

继承

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

显式继承

通过设置对应属性的值为 inherit。

初始值

  • CSS 中，每个属性都有一个初始值

    例如：

    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0

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

    例如：

    • background-color: initial;

CSS求值过程

image-20230728173101898.png

image-20230728173503166.png

image-20230728173625581.png

布局（Layout）是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 文档流

    行级、块级、表格布局、FlexBox、Grid 布局

    • 根元素、浮动和定位的元素会脱离文档流
    • 其他元素都在文档流之内（in-flow）
    • 常规流中的盒子，在某种排版上下文中参与布局

  • 浮动

  • 定位

盒模型

盒模型的属性：内容（content）、内边距（padding）、边框（border）、外边距（margin）

width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • 指定容器边框样式、粗细和颜色

  • 三种属性

    • border-width
    • border-style
    • border-color

  • 四个方向

    • border-top
    • border-right
    • border-bottom
    • border-left

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用 margin:auto; 水平居中

改变盒模型

通过 box-sizing 属性来改变盒模型，默认值为 content-box，即：高宽只包含 content；可以设置为 border-box，即：高宽包含 content、padding、border。

两种盒模型对比

行级块级
不和其它盒子并行摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的 width、height 不适用

文档流

块级元素行级元素
生成块级盒子生成行级盒子 内容分散在多个行盒（line box）中
body、article、div、main、section、h1~h6、p、ul、li 等span、em、strong、cite、code 等
display: block;display: inline;
display 属性值说明
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中； 可以设置宽高； 作为整体不会被拆散成多行；
none排版时完全被忽略

行级排版上下文

  • Inline Formatting Context（IFC）

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

  • IFC 内的排版规则

    • 盒子在一行内水平拜访
    • 一行放不下时，换行显式
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

块级排版上下文

  • Block Formatting Context（BFC）

  • 某些容器会创建一个 BFC

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

BFC内的排版规则

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

FlexBox

  • 一种新的排版上下文

  • 可以控制子级盒子的：

    • 摆放的流向（↑、↓、←、→）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行
属性说明可选值
justify-content设置主轴对齐方式flex-start（开头对齐）、flex-end（尾部对齐）、center（居中对齐）、space-between（两边不留空隙分散对齐）、space-around（两边留一点空间分散对齐）、space-evenly（各子项间隔与两边相同对齐）
align-item设置侧轴对齐方式flex-start（开头对齐）、flex-end（尾部对齐）、center（居中对齐）、stretch（拉伸至完全填充对齐）、baseline（基线对齐）

Flexbility

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

Grid布局

  • 通过设置 display: grid; 使元素生成一个块级的 Grid 容器
  • 使用 grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行 / 列

浮动 float

  • 左浮动：float: left;
  • 右浮动：float: right;

定位 position

position 属性说明
static【默认】非定位元素
relative相对定位，相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非 static 祖先元素定位
fixed固定定位，相对于视口绝对定位

relative

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

absolute

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

建议

  • 充分利用 MDN 和 W3C CSS 规范
  • 保持好奇心，善用浏览器的开发者工具
  • 持续学习，CSS 新特性还在不断出现
avatar
文章
阅读
粉丝