理解CSS | 青训营笔记

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

0x1 CSS

什么是 CSS

层叠（Cascading）样式（Style）表（Sheets）

用来定义页面元素的样式（字体、颜色、位置、大小、动效等）

CSS 代码构成

选择器 {
    属性: 属性值;
    (声明 = 属性 + 属性值)
    (声明块 = 声明1 + 声明2 + ...)
}
(规则 = 选择器 + 声明块)

CSS 使用方法

外链：通过在<head>标签中链接外部 CSS 文件
嵌入：通过在<style>标签中直接写入各标签样式
内联：直接在对应标签中写入专属样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- 外链 -->
        <link rel="stylesheet" href="../src/css/style.css" />

        <!-- 嵌入 -->
        <style>
            p {
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <!-- 内联 -->
        <h1 style="color: red;">一级标题</h1>
        
        <p>段落内容</p>
    </body>
</html>

CSS 工作原理

选择器 Selector

选择页面中的标签并设置样式
使用多种方式对标签进行选择
- 按标签名、类名或 id 名
- 按属性
- 按 DOM 树中的位置

通配选择器
```
* {
    margin: 0;
    padding: 0;
}
```
标签选择器
```
p {
    color: red;
}
```

类选择器

/*
	<p class="c1">aaa</p>
	<p class="c1">bbb</p>
	<a class="c1">ccc</a>
*/
.c1 {
    color: red;
}
a.c1 {
    color: blue;
}

id 选择器

/*
	<p id="i1">aaa</p>
*/
#i1 {
    color: red;
}

属性选择器

/*
	<input type="submit" />
	<a href="#xxxx">aaa</a>
	<a href="x.png">bbb</a>
*/
input[type="submit"] {
    color: red;
}
a[href^="#"] {		/* 用于匹配 href 的值以 # 号为开头的<a> */
    color: blue;
}
a[href$=".jpg"] {	 /* 用于匹配 href 的值以 .jpg 为结尾的<a> */
    color: green;
}

伪类选择器

状态伪类：当标签处于某种状态下的时候触发选择

/*
	<a href="#">链接</a>
*/
a:link {	/* 文本为链接文本时 */
    color: red;
}
a:hover {	/* 鼠标悬浮在链接上时 */
    color: blue;
}
a:visited {	 /* 链接被访问过后 */
    color: green;
}

结构性伪类：根据元素在 DOM 树中出现的位置决定是否触发选择

/*
	<ol>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ol>
*/
li {			/* 对所有列表项设置 */
    color: red;
}
li:first-child { /* 对第一个列表项设置 */
    color: blue;
}
li:last-child {  /* 对最后的列表项设置 */
    color: green;
}

选择器组合

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

选择器组

使用,将多个选择器连接起来构成选择器组，如div,.class1,#id1 { color: red; }
选择器的特异度

选择器优先顺序：id > (伪)类 > 标签

当该选择器组中的优先选择器越多，其特异度越高，越优先执行
样式继承：

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

（对文本存在继承，对盒子属性不存在继承）

初始值：每个属性都存在一个初始值，可以使用initial关键字显式重置为初始值

颜色
1. RGB：color: rgb(255,255,255);或color: #ffffff
2. HSL：color: hsl(0,100%,100%);
  
  Hue（色相，0~~360）Saturation（饱和度，0~~100%）Lightness（亮度，0~100%）
3. 直接指定：color: red;
4. 透明度 Alpha：rgba(0,0,0,.5)或#000000ff或hsla(0,100%,0%,.5)
文本
1. 字体font-family
  - 字体族：用于处理不同浏览器使用字体不同的情况
  - 通用字体族：
    - Serif 衬线体：Georgia、宋体
    - Sans-Serif 无衬线体：Arial、微软雅黑
    - Cursive 手写体：Caflisch Script、楷体
    - Fantasy 花体：Comic Sans MS，Papyrus
    - Monospace 等宽字体：Consolas、中文字体
  - 使用 Web Fonts：
```
@font-face{
    font-family: "new Font";
    src: url(http://xxx.com)format('woff2');
}
p {
    font-family: new Font,serif;
}
```
2. 字号font-size
  - 关键字：small、medium、large
  - 长度：px、em
  - 百分数：相对父元素的字号
3. 字型font-style
  - 正常：normal
  - 加粗：bold
  - 斜体：italic
4. 字重font-weight
  - 100~400(normal)~700(bold)~900
5. 行高line-height
6. 元素内的空白white-space
  - normal：默认
  - nowrap：不换行，直至<br />
  - pre：空白保留
  - pre-wrap：保留空白符序列，但是正常地进行换行
  - pre-line：合并空白符序列，但是保留换行符
CSS 调试
CSS 求值过程
- filtering：对应用到该页面的规则进行筛选
- cascading：按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值
- defaulting：等层叠值为空时选择继承或初始值
- resolving：将一些相对值或关键字转化为绝对值
- formatting：将计算值进一步转换
- constraining：将小数像素值转换为整数

0x2 布局

确定内容的大小、位置的算法

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

相关技术
- 常规流
  
  行级、块级、表格布局、FlexBox、Grid 布局
- 浮动
- 绝对定位

常规流

行级(Inline Level Box)	块级(Block Level Box)
和其他行级box同时放在一行或多行	不和其他盒子并列摆放
不适用盒模型中的`width`、`height`	使用所有盒模型属性

行级元素	块级元素
生成行级盒子，内容分散在多个行盒中	生成块级盒子
span、em、strong、cite、code 等	body、article、div、main、section、h1、p、ul、li 等
`display: inline;`	`display: block;`

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

行级排版上下文
- Inline Formatting Context（IFC）
- 只包含行级盒子的容器会创建一个 IFC
- 排版规则：
  - 盒子在一行内水平摆放
  - 一行放不下时换行显示
  - text-align决定一行内盒子的水平对齐
  - vertical-align决定一个盒子在行内的垂直对齐
  - 避开浮动（float）元素
块级排版上下文
- Block Formatting Context（BFC）
- 以下容器会创建一个 BFC
  - 根元素
  - 浮动、绝对定位、inline-block
  - Flex 子项、Grid子项
  - overflow值不是visible的块盒
  - display: flow-root;
- 排版规则：
  - 盒子从上到下摆放
  - 垂直 margin 合并
  - BFC 内盒子的 margin 不会与外面的合并
  - BFC 不会和浮动元素重叠
FlexBox
- 可以控制子级盒子的：
  - 摆放流向、顺序
  - 盒子的宽度和高度
  - 水平和垂直方向的对齐
  - 是否允许折行
- 主轴与侧轴
  
  主轴：垂直居中，水平向右
  
  侧轴：水平居中，竖直向下
  - 主轴使用justify-content控制对齐
    - flex-start：盒子开始处水平对齐
    - center：居中
    - flex-end：盒子结束处水平对齐
    - space-between：填充居中
    - space-around：填充居中并留白
    - space-evently：等分居中
  - 侧轴使用align-items控制对齐
    - flex-start：盒子开始处垂直对齐
    - center：居中
    - flex-end：盒子结束处垂直对齐
    - stretch：拉伸填充
    - baseline：基线对齐
- Flexibility（盒子弹性）
  - flex-grow：有剩余空间时的伸展能力
  - flex-shrink：容器空间不足时收缩的能力
  - flex-basis：没有伸展或收缩时的基础长度
Grid 布局

与 FlexBox 布局区别在于 FB 是一维线性布局，而 Grid 是二维平面布局
- display: grid;
  - 该声明使元素生成一个块级元素的 Grid 容器
  - 使用grid-template相关属性将容器划分为网格
    - 行：grid-template-rows
    - 列：grid-template-columns
    - 使用网格线划分区域：grid-area: 1/1/3/3
  - 设置每个子项所占行列

浮动
- 设置浮动：float: left;
- position 属性
  - static：默认值
  - relative：相对自身原位置偏移
  - absolute：绝对定位，相对非 static 祖先元素定位
  - fixed：相对于视口绝对定位
盒子模型

从外到里依次为：
- 单向边距/边框（margin/padding/border-top/left/right/bottom）
  - 边距取值为长度、百分数（相对于容器宽度）、auto
  - 边框属性：宽度(border-width)、样式(border-style)、颜色(border-color)
- 指定边框盒子的宽度与高度
```
p {
    box-sizing: border-box;
    width:100px;
    height: auto;
}
```
- width
  - 指定 content box 的宽度
  - 取值为长度、百分数（相对于容器的 content box 宽度）、auto（auto 由浏览器根据其他属性确定）
- height
  - 指定 content box 的高度
  - 取值为长度、百分数（相对于容器的 content box 高度，当容器有指定的高度时才生效）、auto（auto 由内容计算得来）
- overflow：用于处理盒子中内容溢出的属性
  - visible：直接显示溢出部分
  - hidden：隐藏溢出部分
  - scroll：添加滚动条

posted @ 2023-01-18 12:34 SRIGT 阅读(6) 评论(0) 编辑收藏举报来源

刷新页面返回顶部