理解CSS ｜ 青训营笔记

Mo_Rijiu
68 阅读2分钟

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

本文为对青训营课程中 CSS 部分的总结。

1. CSS 是什么

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

2. 在页面中使用 CSS

  • 外链 
    <!--外链-->
<link rel="stylesheet" href="/assets/style.css">
  • 嵌入 
    <!--嵌入-->
<style>
li {margin: 0; list-style: none;}
p {margin: 1em 0;}
</style>
  • 内联 
    <!--内联-->
<p style="margin: 1em 0">Example Content</p>

3. CSS是如何工作的

image.png

4. 选择器 Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或 id
    • 按照属性
    • 按照 DOM 树中的位置
  • 伪类
    • 不基于标签和属性定位元素
    • 几种伪类
      • 状态伪类
      • 结构性伪类
  • 组合 image.png

5. 颜色

  • RGB
  • HSL
    • 色相、饱和度、亮度

6. 调试 CSS

  • 右键点击页面，选择 「检查」
  • 使用快捷键
    • Ctrl+Shift+I (Windows)
    • Cmd+Opt+I (Mac)

7. CSS 继承、初始值

  • 某些属性会自动继承其父元素的计算值，除非显式指定一个值
  • CSS 中，每个属性都有一个初始值
    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0
  • 可以使用 initial 关键字显式重置为初始值
    • background-color:initial

8. CSS 求值过程

image.png （续图） image.png （续图） image.png

9. 布局

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

10. 块级 vs 行级

image.png

11. 常规流

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

12. 行级排版上下文

  • Inline Formatting Context (IFC) +只包含行级盒子的容器会创建一个 IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

13. 块级排版上下文

  • Block Formatting Context (BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex 子项和 Grid 子项
    • overflow 值不是 visible 的块盒
    • display:flow-root;
  • BFC 内的排版规则
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠

14. Flex Box是什么

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向(→←←↓)
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

15. CSS 属性

  • position image.png
  • ...

PS：不足之处欢迎批评指正

avatar
文章
阅读
粉丝