理解CSS | 青训营笔记

codinglin
370 阅读4分钟

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

以下是我在参加此次青训营课程学习中的一些思考及总结。

CSS选择器的特异度

1. #nav .list li a:link
 
2. .hd ul .links a

在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。

在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 022。

Snipaste_2022-07-31_13-35-43.png

CodePen Embed - 青训营/CSS/优先级

CSS继承

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

显示继承

* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
.some-widget {
  box-sizing: content-box;
}

初始值

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

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

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

    • background-color: initial

CSS求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

布局

布局（Layout）是什么？

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

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

布局相关技术

  • 常规流

    • 行级
    • 块级
    • 表格布局
    • FlexBox(弹性布局)
    • Grid布局

  • 浮动

  • 定位

CSS 盒模型：

Snipaste_2022-07-31_14-43-50.png

width

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

height

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

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流

  • 其它元素都在常规流之内(in-flow)

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

行级排版上下文(IFC)

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

IFC 内的排版规则

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

示例：CodePen Embed - 青训营/CSS/IFC

块级排版上下文(BFC)

某些容器会创建一个 BFC

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

示例：CodePen Embed - 青训营/CSS/BFC

BFC 内的排版规则

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

dispaly 属性

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none 排版时完全被忽略

浮动 float

主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动）。

浮动元素不止会影响自己(脱离文档流)，它也会影响周围元素对其(左|右)进行环绕。 文字环绕效果是 float 典型的应用。

示例：CodePen Embed - 青训营/CSS/float

position 属性

static

默认值，非定位元素

relative

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

absolute

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

示例：CodePen Embed - 青训营/CSS/position

fixed

相对于视口绝对定位

示例：CodePen Embed - 青训营/CSS/position-fixed

最后

学习 CSS 的几点建议：

  1. 充分利用MDN和 W3C CSS规范。
  2. 保持好奇心，善于利用浏览器的开发者工具。
  3. 持续学习，CSS 新特性还在不断出现。

以上就是我在此次青训营课程 《理解 CSS 》 中的一些思考和总结。

avatar
文章
阅读
粉丝