CSS学习｜ 青训营笔记

用户8810470487760
687 阅读6分钟
  • “这是我参与「第四届青训营 」笔记创作活动的的第2天”

CSS是什么

Cascading Style Sheets 层叠样式表

用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

image-20220724163159673.png

页面中使用CSS的方法

  • 外链式 - 在html文件中，使用link标签引入CSS文件
    <link rel="stylesheet" href="/assets/style.css">
  • 嵌入式 - 在html文件中，使用style标签直接包裹CSS代码
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>
  • 内联式 - 在html文件中，通过标签的style属性使用CSS代码
<p style="margin:1em 0">Example Content</p>

CSS工作原理

image-20220724163931997.png

  1. 浏览器加载HTML文件后开始解析HTML文件，形成DOM树
  2. 解析过程中对于文件中的CSS代码进行加载、解析，并将样式添加到DOM节点中
  3. DOM树创建完成后，展示页面

选择器

选择器用于找出页面中的元素，以便给他们设置样式

有多种方式选择元素，按照标签名、类名或 id； 按照属性；按照DOM树中的位置（单独使用与组合使用都可以）

一些基本选择器

  • 统配选择器 - *

会选中文件中所有元素

  • 标签选择器 - <标签名>

会选择文件中所有是该标签的元素

  • id选择器 - #+id

会选择文件中id属性为该id名的所有元素

通常id应该保持唯一性

  • 类选择器 - .+类名

会选择文件中class属性为该类名的所有元素

HTML文件中每个标签的class属性可以设置多个类名（用空格间隔），只要包含该类名，都会被选择

  • 属性选择器 - [属性值] 标签名[属性名="属性值"]

选择属性值、标签名相符的所有元素

属性值可以用匹配的方式去确定

类型描述
[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素
[abc~="def"]选择abc属性值中包含"def"属性的所有元素
[abc="def"]选择 abc 属性值是"def"或以 "def" 开头的所有元素

伪类选择器

  • 状态伪类 - :+选择器名称

伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)

  • 结构性伪类 - .+类名

选择器的组合

名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A > B选中B，如果它是A的子元素section > p
兄弟选择器A ~ B选中B，如果它在A后且和A同级h2 ~ p
相邻选择器A + B选中B，如果它紧跟在A后面h2 + p

选择器组

用于给不同条件的选择结果设置同样的样式

选择器1,选择器2,...不同选择器用,间隔

选择器的优先级

选择器特异度

id选择器可以看作百位级，（伪）类选择器可以看作十位级，标签选择器可以看作个位级

选择器组的特异度可以近似视为位数*个数

image-20220724190614031.png 第一个特异度：122；第二个特异度：22

继承

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

  • 一般和文字相关的属性会被继承
  • 一般和盒模型相关的属性不会被继承 - 想要继承，使用关键字**inherit**

CSS求值过程

image-20220724201831505.png

resolving与formatting的区别：

  • resolving是处理能通过html和css直接计算的值
  • formatting是处理根据浏览器窗口大小计算的值

布局

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

常见布局技术

image-20220724202603624.png

盒模型

box-sizing: content-box

image-20220724202740691.png

box-sizing: border-box

image-20220724202938108.png

  • 每种元素都被视为一种盒子

  • 行级盒子和块级盒子的区别

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

行级盒子、块级盒子、行级元素、块级元素区别与联系

  • 行级盒子、块级盒子是CSS中的概念；行级元素、块级元素是HTML中的概念

  • 联系

    块级元素行级元素
    生成块级盒子生成行级盒子;内容分散在多个行盒 (line box，可以理解为单线本中分隔的一行一行) 中
    body、article、div、main、section、h1-6、p、ul、li 等span、em、strong、cite、code 等
    display: blockdisplay: inline
  • display属性中的inline-block - 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行

常规流

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

行级排版上下文 - IFC

Inline Formatting Context (IFC)

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

IFC 内的排版规则

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

块级排版上下文 - BFC

Block Formatting Context (BFC)

某些容器会创建一个BFC

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

BFC 内的排版规则

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

Flex 布局

它可以控制子级盒子的：

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

flex布局的主轴与侧轴

image-20220724204723750.png

详细教程flex - CSS（层叠样式表） | MDN (mozilla.org)

Grid 布局

突破flex的流式布局

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

详细教程网格布局 - CSS（层叠样式表） | MDN (mozilla.org)

Float

用于图文混排

绝对定位

  • static - 默认值，非定位元素
  • relative - 相对于自身原本位置进行偏移，不脱离文档流

image-20220724210552253.png

  • absolute - 相对第一个非static祖先元素进行绝对定位
  • fixed - 根据视口绝对定位
avatar
文章
阅读
粉丝