一、2023 前端开发 HTML+CSS 宝典

郁子大约 29 分钟约 8745 字

（一）主流浏览器

指有自主研发的内核的浏览器

1.组成

shell：外壳
core：内核（JS 执行引擎、渲染引擎）

2.各浏览器内核

浏览器	内核
IE	Trident -> Edge
Firefox	Gecko
Chrome	Webkit -> Blink
Safari	Webkit
Opera	Presto -> Blink

（二）文档语言 lang

默认英文：en
中文
- 旧式写法：zh-CN
- 新版写法：cmn-hans（中国大陆通用语言——普通话）

<html lang="cmn-hans"></html>

（三）语义化

1.每一个 HTML 元素都有具体的含义

a 元素：超链接
p 元素：段落
h1 元素：一级标题

2.所有元素与展示效果无关

元素展示到页面中的效果，应该由 CSS 决定
因为浏览器带有默认的 CSS 样式，所以每个元素都有默认样式

注意

选择什么元素，取决于内容的含义，而不是显示出的效果

3.为什么需要语义化

为了搜索引擎优化（SEO）
- 搜索引擎：百度、搜搜、Bing、Google
- 每隔一段时间，搜索引擎会从整个互联网中抓取页面源代码
为了让浏览器理解网页
- 阅读模式
- 语音模式

（四）行级/块级元素

以前：
- 块级元素：某些元素在显示时会独占一行
- 行级元素：某些元素在显示时不会独占一行
HTML5 已经弃用该说法，因为行/块是效果的概念，不应当用于描述 HTML 元素（语义化）
现在用 CSS 中的行盒块盒（行容器块容器）替代

（五）页面展示代码标签

pre 标签：预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
在 pre 标签内部出现的内容，会按照源代码格式显示到页面上，不会出现空白折叠
该元素通常用于在网页中显示一些代码，一般包裹在 code 标签内部，code 表示代码区域
pre 元素功能的本质：有一个默认的 CSS 属性 white-space: pre;

<code>
  <pre>
    L          TE
      A       A
        C    V
          RA
	</pre
  >
</code>

<!-- 或者 -->

<code style="white-space: pre">L TE A A C V RA</code>

（六）HTML Entity（实体）

实体字符：通常用于在页面中显示一些特殊符号

&单词;
&#数字;

<p>在页面中，表示段落使用：&lt;p&gt;</p>

小于符号：< 【letter than】
大于符号：> 【greater than】
多个空格：  【non-breaking space】
版权符号：©
&符号：&

（七）a 标签的 href 属性

href（hyper reference）：通常表示跳转地址

普通链接
锚链接
- id 属性：全局属性，表示元素在文档中的唯一编号
功能链接：点击后触发某个功能
- 执行 JS 代码：javascript:
- 发送邮件：mailto: 【本地有邮箱软件时可用】
- 拨号：tel: 【本地有拨号软件、移动端访问时可用】

（八）路径

1.站内资源

当前网站的资源

2.站外资源

非当前网站的资源

3.绝对路径（url 地址）

访问站外资源，使用绝对路径
协议名： http 、 https 、 file
主机名：域名、IP 地址
端口号： http 默认 80，https 默认 443
路径：资源文件在网站根目录中的位置
当跳转目标和当前页面的协议相同时，可以省略协议：//host:port/path

# 协议名://主机名:端口号/路径
schema://host:port/path

4.相对路径

访问站内资源，使用相对路径
以 ./ 开头，表示当前资源所在的目录，可以省略
../ 表示返回当前目录的上一级目录

（九）img 多标签联用

1.map

map 标签的 name 值必须唯一，作用同锚点
map 仅有一个子元素 area ，用于划分区域（空元素，没有结束标记）
- shape 属性：形状
  - 圆形（circle）
  - 矩形（rect）
  - 多边形（poly）
- coords 属性：坐标
  - 坐标系原点在地图左上角
  - shape 为 circle 时，三个值为圆心横坐标、圆心纵坐标、半径
  - shape 为 rect 时，四个值为左上角横坐标、左上角纵坐标、右下角横坐标、右下角纵坐标
  - shape 为 poly 时，多个点的横纵坐标依次排开

<a target="_blank" , href="">
  <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片" />
</a>
<map name="solarMap">
  <area shape="circle" coords="360,204,48" href="" alt="" target="_blank" />
  <area shape="rect" coords="323,282,395,320" href="" alt="" target="_blank" />
  <area shape="poly" coords="601,371,645,312,678,338,645,392" href="" alt="" target="_blank" />
</map>

2.figure

指代、定义，通常用于把图片、图标标题、描述包裹起来
子元素： figcaption ，当前子元素的标题

<figure>
  <a>
    <img />
  </a>
  <figcaption>
    <h2>XXX</h2>
  </figcaption>
  <p>XXXxsdwdfsfkjhsjahfewgfdjsdfs</p>
</figure>

（十）定义列表

通常用于一些术语的定义

dl ：definition list
dt ：definition title
dd ：definition description

<h1>HTML中的术语解释：</h1>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，XXXx</dd>
</dl>

（十一）容器元素

该类元素代表一块区域，内部用于放置其他元素

1.div 元素

优：没有额外样式，单纯划分区域
缺：没有语义，浏览器无法识别当前区域的作用

2.HTML5 其他语义化元素

header
- 通常用于表示页头，也可以用于表示文章的头部
footer
- 通常用于表示页脚，也可以用于表示文章的尾部
article
- 通常用于表示整篇文章
section
- 通常用于表示文章的章节
aside
- 通常用于表示侧边栏（附加信息）
nav
- 导航栏两种布局
- nav + a
- ul + li + a

3.元素包含关系

1）以前

块级元素可以包含行级元素，行级元素不可以包含块级元素，a 元素除外

2）现在

元素的包含关系由元素的内容类别决定，取决于元素的语义化，MDN 文档可查（Technical summary - Permitted content）

容器元素中可以包含任何元素
a 元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>li、ol>li、dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

（十二）font-size

定义元素内部文字的尺寸大小（高度）

1.px 像素

绝对单位，即文字的高度占多少个像素

2.em

相对单位，相对于父元素的字体大小
每个元素必须有字体大小
- 如果当前元素没有声明，则使用父元素的字体大小
- 如果逐级寻找父元素至 html 元素都没有定义字体大小，则使用基准字号（浏览器设置的默认字号）

（十三）层叠

声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理 —— 权重计算

1.比较重要性

重要性从高到低：

作者样式表（开发者书写的样式）中的 !important 样式【不推荐】
- 非必要不加 !important ，一定要加时应使其影响范围尽可能小
作者样式表中的普通样式
浏览器默认样式表中的样式（user agent stylesheet => 用户代理样式表 => 浏览器样式表）

2.比较特殊性

重要性比较后仍有冲突，看选择器

总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个 4 位数
- 千位：如果是内联样式，记 1，否则为 0【1xxx、0xxx】
- 百位：等于选择器中所有 id 选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
- 四个位数依次分别比较，256 进制

3.比较源次序

特殊性比较后仍有冲突，代码书写靠后的胜出

4.应用

重置样式表：书写一些作者样式，覆盖浏览器的默认样式
- 常见的重叠样式表：normalize.css、reset.css、meyer.css
a 元素爱恨法则：link > visited > hover > active

（十四）继承

子元素会继承来自父元素的某些 CSS 属性
通常和文字内容相关的属性都能被继承

（十五）属性值的计算过程

一个元素一个元素依次渲染，顺序按照树形目录结构进行（CSSOM）
渲染每个元素的前提条件：该元素的所有 CSS 属性都必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程就叫属性值的计算过程

1.确定声明值

参考样式表中没有冲突的声明，作为 CSS 属性值
包括作者样式表和浏览器默认样式表

2.层叠冲突

对样式表有冲突的声明使用层叠规则，确定 CSS 属性值

3.使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

4.使用默认值

对仍然没有值的属性，使用默认值

5.两个特殊取值

inherit ：手动（强制）继承，将父元素的值取出应用到该元素
initial ：初始值，将该属性设置为默认值

（十六）盒模型

box：盒子，每个元素在页面中都会生成的一个矩形区域

1.盒子类型

行盒：display 值为 inline 的元素（默认值）
块盒：display 值为 block 的元素
行盒在页面中不换行，块盒独占一行
浏览器默认样式表设置的块盒：
- 容器元素
- h1-h6
- p
常见的行盒：
- span
- a
- img
- video
- audio

2.盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
- 填充 padding
- 边框 border
- 外边距 margin

1）内容

width、height 设置的是盒子内容的宽高
内容部分通常叫作整个盒子的内容盒 content-box

2）填充（内边距）

盒子边框到盒子内容的距离
填充区 + 内容区 = 填充盒 padding-box

3）边框

边框 = 边框样式 + 边框宽度 + 边框颜色
边框 + 填充区 + 内容区 = 边框盒 border-box

4）外边距

边框到其他盒子的距离

3.盒模型应用

1）改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高
衡量设计稿尺寸时往往使用的是边框盒，但设置 width 和 height 时是内容盒
- 解决方法一：精确计算
- 解决方法二：CSS3：box-sizing: border-box; 改变宽高的影响范围

2）改变背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过 background-clip 属性值修改

3）溢出处理

可以通过 overflow 控制内容溢出边框盒后的处理方式

4）断词规则

可以通过 word-break 控制文字在什么位置被截断换行
normal ：普通方式
- CJK 字符在文字位置截断（中日韩）
- 非 CJK 字符在单词位置截断
break-all ：截断所有
- 所有文字都在文字处截断
keep-all ：保持所有
- 所有文字都在单词间截断

5）空白处理（单行文本）

white-space: nowrap; 溢出不换行
overflow: hidden; 隐藏溢出
text-overflow: ellipsis; 打点显示溢出

4.行盒的盒模型

常见的行盒：包含具体内容的元素
- span、strong、em、i、img、video、audio
盒子沿着内容延伸
行盒不能设置宽高，仅根据内容决定
- 要调整行盒宽高，应使用字体大小、行高、字体类型间接调整
内边距（填充区）
- 水平方向有效
- 垂直方向仅会影响背景，实际不会占据空间
边框
- 水平方向有效
- 垂直方向仅会影响背景，实际不会占据空间
外边距
- 水平方向有效
- 垂直方向仅会影响背景，实际不会占据空间

5.行块盒

属性值为 display: inline-block; 的盒子
不独占一行
盒模型中所有尺寸都有效

6.空白折叠

发生在行盒（行块盒）内部或行盒（行块盒）之间

7.可替换元素和非可替换元素

非可替换元素：大部分元素，页面上的显示结果取决于元素内容
可替换元素：少部分元素，页面上的显示结果取决于元素属性
- img、video、audio
- 绝大部分是行盒
- 但是性质类似于行块盒，内部可以设置宽高

（十七）视觉格式化模型

盒模型：规定单个盒子的规则
视觉格式化模型：页面中的多个盒子的排列规则（布局规则）
- 大体上将页面中的盒子排列方式分为三种：
  - 常规流
  - 浮动流
  - 定位流

1.常规流布局

又叫文档流、普通文档流、常规文档流
所有元素默认情况下都属于常规流布局
总体规则：
- 块盒独占一行
- 行盒水平依次排列

1）包含块（containing block）

每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下，盒子的包含块，为其父元素的内容盒

2）块盒

每个块盒的总宽度必须刚好等于包含块的宽度
- 宽度的默认值是 auto，表示将剩余空间吸收掉
- margin 默认值是 0，定为 auto 时表示将剩余空间吸收掉
- 优先级： width > margin
- 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，则被 margin-right 全部吸收
  - 如果改为从右往左排列，则是 margin-left 全部吸收
- 在常规流中，块盒在其包含块中居中，可以定宽，然后让左右外边距吸收剩余空间
  - margin: 0 auto;
每个块盒垂直方向上的 auto 值
- height: auto; 适应内容的高度
- margin: auto; 表示 0
百分比取值
- padding、宽、margin 可以取值为百分比
- 以上所有百分比都是相对于包含块的宽度
- 高度的百分比
  - 包含块的高度取决于子元素的高度 => 设置百分比无效
  - 包含块的高度不取决于子元素的高度 => 百分比相对于父元素的高度
上下外边距的合并
- 两个常规流块盒，上下外边距若相邻，则会合并，取最大值
- 兄弟元素和父子元素，只要外边距相邻就会合并 => 印刷术的规则

2.浮动流布局

应用场景：
- 文字环绕
- 横向排列

1）基本特点

left：左浮动，元素靠左靠上
right：右浮动，元素靠上靠右
none：默认值，即常规流
当一个值浮动后，元素必定为块盒（更改 display 属性为 block）
浮动元素的包含块，和常规流一样，是父元素的内容盒

2）盒子尺寸

宽度为 auto 时，表示适应内容宽度
高度为 auto 时，与常规流一致，适应内容高度
margin 为 auto 时，相当于 0
边框、内边距、百分比设置与常规流一致

3）盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒排列时，无视浮动流盒子
行盒在排列时，会避开浮动盒子【图文混排】
- 如果文字没有在行盒内，则浏览器会自动生成一个行盒包裹文字，称匿名行盒

4）高度坍塌

根源：常规流盒子的自动高度，在计算时不会考虑浮动流盒子，所以子元素浮动时，父元素自动高度仍为 0
解决：使用 clear 清除浮动
- 默认值：none
- left：清除左浮动，表示该元素必须出现在前面所有左浮动的盒子的下方
- right：清除右浮动，表示该元素必须出现在前面所有右浮动的盒子的下方
- both：清除所有浮动，表示该元素必须出现在前面所有浮动的盒子的下方【直接用】

3.定位流布局

定位：手动控制元素在包含块中的精准位置
一个元素只要 position 属性值不为 static，就认为其是一个定位元素
定位元素会脱离文档流（相对定位除外）
- 文档流中的元素摆放时，会忽略脱离文档流的元素
- 文档流中的元素计算自动高度时，会忽略脱离文档流的元素

1）position 属性

默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位

2）相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
盒子的偏移不会对其他盒子造成影响
通常用于为绝对定位元素提供包含块

3）绝对定位

宽高为 auto，盒子尺寸适应内容
包含块变化：
- 先找祖先元素中第一个定位元素，该元素的填充盒为其包含块
- 若找不到，则它的包含块为整个网页（初始包含块）

4）固定定位

其他情况和绝对定位完全一样
唯一的区别：包含块不同
- 固定定位的包含块是视口

5）定位下的居中

某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为 0
- 将左右（上下）margin 设置为 auto
- 绝对定位和固定定位中，margin 为 auto 时，会自动吸收剩余空间

6）多个定位元素重叠

涉及堆叠上下文，设置 z-index
通常情况下，该值越大，越靠近用户，看到的元素越完整
只有定位元素设置 z-index 才有效
z-index 可以是负数，此时遇到常规流、浮动元素时会被其覆盖

7）补充

绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并

4.块级格式化上下文

BFC，Block Formatting Context
是一块独立的渲染区域，规定了在该区域中，常规流块盒的布局
视觉格式化模型包含块级格式化上下文，块级格式化上下文包含常规流布局的渲染规则

1）BFC 渲染区域

这个区域由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域
- 根元素，即 <html> 元素创建的 BFC 区域，覆盖了网页中所有的元素
- 浮动和绝对定位的元素
- overflow 不等于 visible 的块盒

2）BFC 区域规则

不同的 BFC 区域，进行渲染时互不干扰【独立区域】
创建 BFC 的元素，隔绝了其内部和外部的联系，内部的渲染不会影响到外部
- 该元素的自动高度需要计算浮动元素【没有高度坍塌问题】，绝对定位元素高度直接无视
- 该元素的边框盒不会与浮动元素重叠
- 该元素不会和它的子元素发生 margin 合并
可以强制让父元素创建 BFC 以解决高度塌陷的问题，但是会改变父盒子的布局方式——有副作用
- 如果只是单纯为了解决高度塌陷问题，副作用最小的方式是清除浮动三件套

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

（十八）更多选择器和样式

1.伪类选择器

first-child
- 选中第一个子元素（该元素在所有子元素中必定是第一个）
- first-of-type：选中子元素中第一个指定类型的元素（该元素在所有子元素中不一定第一个）
last-child
- 选中最后一个子元素
- last-of-type：选中子元素中最后一个指定类型的元素
nth-child
- 选中指定的第几个子元素
- 参数可以是数字，也可以是 n 的倍数，表示第几个
- 参数还可以是关键词：even（=2n）偶数、odd（=2n+1）奇数
- nth-of-type：选中子元素中第几个指定类型的元素

2.伪元素选择器

first-letter
- 选中元素中的第一个字母/文字
first-line
- 选中元素中第一行的文字
selection
- 选中被用户框选的文字，通常设置背景颜色、文字颜色

3.透明度

opacity
- 设置的是整个元素的透明度
- 取值是 [0, 1]
在颜色值设置 alpha 通道（rgba）【常用】

4.鼠标

cursor
- 可以设置为图片，格式必须为 .ico 或 .cur

cursor: url("imgs/target.ico"), auto; /* 图片出现问题时使用第二个样式 */

5.盒子隐藏

display: none;
- 不生成盒子
visibility: hidden;
- 生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

6.背景图

img 元素属于 HTML 的概念
背景图属于 CSS 的概念

1）区别

当图片属于网页内容时，必须使用 img 元素
当图片仅用于美化页面时，必须使用背景图

2）CSS 属性

background-image
- url()：路径相对于当前 css 文件位置
background-repeat
- 是否重复
- 默认情况下会在横纵坐标中重复
background-size
- 尺寸大小
- 预设值：cover、contain，类似于 object-fit
- 数值或百分比
background-position
- 位置
- 预设值：left、bottom、right、top、center
- 数值或百分比
- 应用：雪碧图（精灵图 spirit）
  - 页面图片集中在一张图，在特定图标区域使用该属性取出图片中的某个图标
  - 网络请求只需请求一次图片，降低服务器压力
background-attachment
- 是否固定于视口
速写（简写）
- 先写位置（position），再写 / ，后写尺寸（size）

background: url() no-repeat 50% 50%/100% fixed #000;
background: #f40 url() no-repeat left top/contain;

（十九）HTML 进阶

1.iframe 元素（框架页）

通常用于在网页中嵌入另一个页面
是可替换元素
- 通常是行盒
- 显示的内容取决于元素的属性
- CSS 不能完全控制其中的样式
- 具有行块盒的特点
配合 a 元素的 target 属性使用

<div>
  <a href="https://www.baidu.com" target="myframe">百度</a>
  <iframe name="myframe" src="https://www.baidu.com"></iframe>
</div>

2.MIME 类型

Multipurpose Internet Mail Extensions
多用途互联网邮件类型
如：资源是一个 jpg 图片，MIME: image/jpeg

（二十）body 背景

1.画布 canvas

一块区域
最小宽度为视口宽度
最小高度为视口高度

2.HTML 元素的背景

覆盖画布

3.body 元素的背景

如果 HTML 元素有背景，则 body 元素正常渲染（覆盖边框盒）
如果 HTML 元素没有背景，则 body 元素覆盖画布

4.关于画布背景图

1）background-size

背景图的宽度百分比
- 画布宽度未超出视口时，相对于视口宽度
- 画布宽度超出视口时，背景颜色可覆盖画布宽度，背景图只覆盖视口宽度
背景图的高度百分比，相对于 HTML 元素高度

2）background-position

背景图的横向位置（百分比、预设值），相对于视口宽度
背景图的纵向位置（百分比、预设值），相对于 HTML 元素高度

（二十一）对齐

1.行盒的垂直对齐

1）多个行盒

给没有对齐的元素设置 vertical-align
可设置预设值、数值

2）图片的底部白边

图片的父元素是块盒，且高度自动，则图片底部和父元素底边之间往往会出现空白，且白边高度随文字增大而增大
解决：
- 设置父元素的字体大小为 0
- 将图片设置为块盒【推荐】

2.参考线-深入理解字体

1）文字

文字是通过一些文字制作软件制作而成的，如 FontForge
制作文字时，会有几根参考线
- 不同的文字类型，参考线不一样
- 同一种文字类型，参考线一样
一般有五根参考线+上下延伸的 line gap
- top
- text top / ascent：顶线
- super：上基线
- baseline：基线
- sub：下基线
- text bottom / descent：底线
- bottom

2）font-size

字体大小，设置的是文字的相对大小
文字的相对大小：1000、2048、1024
文字的实际大小：文字顶线到底线的距离（content-area，内容区）
行盒的背景，覆盖 content-area

3）行高

顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫作 line gap（空隙）
gap 大小默认情况下由字体设计师决定，负数、0、正数均有
行高，就是 top 到 bottom 的距离，virtual-area，虚拟区

line-height: normal;
/* 默认值，使用文字默认的gap */

line-height: 1;
/* 
  不建议
  此时gap是负数，由于文字实际大小超过其相对大小
  行高为1即行高为相对大小，高度不够
  所以多行文本时会有部分重叠区域
*/

文字一定出现在一行的正中间 ❎（取决于设计师）
content-area 一定出现在 virtual-area 的正中间 ✅

4）vertical-align

baseline ：该元素的基线会与父元素的基线对齐
super ：该元素的基线会与父元素的上基线对齐
sub ：该元素的基线会与父元素的下基线对齐
text-top ：该元素的 virtual-area 的顶边，会与父元素的顶线对齐
text-bottom ：该元素的 virtual-area 的底边，会与父元素的底线对齐
top ：该元素的 virtual-area 的顶边，会与 line-box 的顶边（该行中的最高顶边）对齐
bottom ：该元素的 virtual-area 的底边，会与 line-box 的底边（该行中的最低底边）对齐
middle ：该元素的中线（content-area 的一半），会与父元素的 X 字母高度一半的位置对齐
[数值] ：相对于基线的偏移量，向上为正，向下为负
[百分比] ：相对于基线的偏移量，但是是相对于自身 virtual-area 的高度
决定参考线：font-size、font-family、line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线
行盒（inline-box）组合起来，可以形成多行，每一行的区域叫作行框（line-box）
- line-box 的顶边是该行内所有行盒的最高顶边，底边是该行内所有行盒的最低底边
实际上，一个高度自动元素的实际占用高度，计算高度时通过 line-box 计算
line-box 是承载文字内容的必要条件，以下情况不生成行框
- 某元素内部没有任何行盒
- 某元素字体大小为 0

5）可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距
表单元素：基线位置在内容区的底边
行块盒：
- 最后一行有 line-box，用最后一行的基线作为整个行框的基线
- 如果行块盒内部没有行盒，则使用下外边距作为基线

（二十二）堆叠上下文

stack context：堆叠上下文，一块区域，由某个元素创建
规定了该区域中的内容在 Z 轴上排列的先后顺序

1.创建堆叠上下文的元素

HTML 元素（根元素）
设置了 z-index 数值的定位元素（非 auto，auto 是默认值）

2.同一个堆叠上下文中元素在 Z 轴上的排列

从后往前顺序：
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别（z-index，stack level）为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位的行盒
- 任何 z-index 为 auto 的定位子元素，以及 z-index 为 0 的堆叠上下文
- 堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插

（二十三）svg

scalable vector graphics，可缩放的矢量图
该图片使用代码书写而成
缩放不会失真
内容轻量，文件大小很小

1.使用

svg 可以嵌入浏览器，也可以单独作为一个文件
svg 使用 xml 语言定义

<img src="imgs/weixin.svg" />
<p></p>
<embed src="imgs/weixin.svg" type="image/svg+xml" />
<object data="img/weixin.svg" type="image/svg+xml"></object>
<iframe src="imgs/weixin.svg"></iframe>

p {
  background: url(imgs/weixin.svg) norepeat center/cover;
}

2.书写代码

svg ：根标签
- 默认宽高：300*150
- xmlns ：xml 命名空间
rect ：矩形
circle ：圆形
ellipse ：椭圆形
line ：直线
polyline ：折线
polygon ：多边形
path ：路径
- M ：moveto，把坐标移动到指定坐标点
- L ：lineto
- H ：horizontal lineto
- V ：vertical lineto
- C ：curveto
- S ：smooth curveto
- Q ：quadratic Belzier curve
- T ：smooth quadratic Belzier curveto
- A ：elliptical Arc，弧线，A半径1 半径2 顺时针旋转角度小弧(0)或大弧(1) 顺时针(1)或逆时针(0)
- Z ：closepath

<svg style="background: #ccc" width="500" height="1000" xmlns="http://www.w3.org/2000">
	<rect width="100" height="100" x="100" y="100" fill="transparent" stroke="#000" stroke-width="5" />
	<circle cx="200" cy="400" r="50" fill="#008c8c" stroke="#000" stroke-width="5" />
	<ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#000" stroke-width="5" />
	<line x1="10" y1="10" x2="300" y2="30" stroke="#000" stroke-width="5" />
	<polyline points="300,100,350,100,350,150,400,150,400,200" fill="none" stroke="#000" stroke-width="5" />
	<polygon points="300,300,400,400,300,500" fill="none" stroke="#000" stroke-width="5" />
	<path d="M150 600 L300 600 L300 800 L150 800 Z" fill="none" style="stroke: #000; stroke-width: 5" />
	<path d="M0 150 A150 150 0 0 1 150 0" fill="none" style="stroke: #000; stroke-width: 5" />
</svg>

（二十四）数据链接 Data URL

1.书写

将目标文件的数据直接书写到路径位置（src）
语法：data:[MIME];base64,[数据]

2.意义

优点：
- 减少了浏览器中的请求
- 有利于动态生成数据
缺点：
- 增加了资源的体积，导致传输内容增加，从而增加了单个资源的传输时间
- 不利于浏览器的缓存（图片文件、CSS 文件、JS 文件）
- 使用 base64 会使资源的体积增加到原体积的 4/3

3.应用场景

请求图片体积较小，且该图片因为各种原因不适合于制作雪碧图，可以使用数据链接
图片由其他代码动态生成，且图片较小，可以使用数据链接

4.base64

一种编码方式，通常用于将一些二进制数据，用一个可书写的字符串表示

（二十五）浏览器兼容性

1.问题产生原因

市场竞争
W3C 标准版本的变化

2.厂商前缀

原因：
- 市场竞争，标准没有发布
- 标准仍在讨论中（草案），浏览器厂商希望先支持
-webkit- ：Chrome（谷歌旧版本浏览器）、Safari
-ms- ：IE
-o- ：Opera
-moz- ：Firefox（Mozilla）

3.CSS Hack

根据不同的浏览器（主要针对 IE），设置不同的样式和元素
IE 中，CSS 的特殊符号：
- *属性：兼容 IE5~IE7
- _属性：兼容 IE5、IE6
- 属性值\9：兼容 IE5~IE11
- 属性值\0：兼容 IE8~IE11
- 属性值\9\0：兼容 IE9~IE10
- 条件判断：

<!-- [if IE]>
<p>
	这是只有IE浏览器能识别的代码
</p>
<![endif] -->

<!-- [if !(IE)]><-->
<p>这是非IE浏览器</p>
<!--<![endif] -->

4.渐进增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格
渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
- 书写代码时，先尽量避免书写有兼容性问题的代码，完成之后再逐步加入新标准中的代码
优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理
- 书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式

5.caniuse 网站

查找 CSS 兼容性：caniuse.comopen in new window

（二十六）居中总结

居中：盒子在其包含块中居中

1.行盒（行块盒）水平居中

直接设置行盒（行块盒）的父元素文本居中

text-align: center;

2.常规流块盒水平居中

定宽
设置左右 margin 为 auto（吸收剩余空间）

3.绝对/固定定位元素的水平居中

定宽
设置左右的坐标为 0（left: 0; right: 0）
将左右 margin 设置为 auto

固定定位（fixed）元素可以看做绝对定位（absolute）元素的特殊情况，区别在于包含块不同而已

4.单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

5.行块盒或块盒内多行文本的垂直居中

没有完美方案
设置盒子上下内边距相同，达到类似垂直居中的效果

6.绝对/固定定位的垂直居中

定高
设置上下的坐标为 0（top: 0; bottom: 0）
将上下 margin 设置为 auto

（二十七）CSS 进阶

1.display: list-item

设置为该属性值的盒子，本质上仍然是一个块盒（主盒子），但同时该盒子会附带另一个盒子（次盒子）
次盒子和主盒子水平排列
li 前面的序号即次盒子，后面内容为主盒子

1）涉及的 CSS

list-style-type
- 设置次盒子的类型
list-style-position
- 设置次盒子相对于主盒子的位置
- inside / outside
list-style
- 上述两个属性的简写（合）
- 清空次盒子：list-style: none;

2.图片失效时的宽高问题

如果 img 元素的图片链接无效，此时 img 特性和普通行盒一样，无法设置宽高

3.行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关【a 标签包含 img 元素】
需要设置宽高时可以设为块盒

4.text-align

start：起始位置对齐，默认值
left：左对齐
right：右对齐
center：居中对齐
justify：除最后一行外，分散对齐（两端对齐，平均分布空格）
- 如果最后一行也需分散对齐，则可使用 ::after 伪元素，设为行块盒且宽度 100%

div {
  text-align: justify;
}
div::after {
  display: inline-block;
  width: 100%;
}

5.制作一个三角形

本质是一个宽高为 0 的元素，且设置边框

div {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: red;
}

6.direction 和 writing-mode

开始 start - 结束 end
左 left - 右 right
开始和结束是相对的，不同国家有不同的习惯，但是左右是绝对的
direction：设置开始到结束的方向
writing-mode：设置文字的书写方向

direction: rtl; /* right to left */
writing-mode: vertical-rl; /* 垂直方向从右到左（古诗词） */

7.utf-8 字符

可用于伪元素的 content
- \[HHHH]：后跟 4 位 16 进制的编码
可以直接在网页中显示
- $#x[HHHH];

一、2023 前端开发 HTML+CSS 宝典

# （一）主流浏览器

# 1.组成

# 2.各浏览器内核

# （二）文档语言 lang

# （三）语义化

# 1.每一个 HTML 元素都有具体的含义

# 2.所有元素与展示效果无关

# 3.为什么需要语义化

# （四）行级/块级元素

# （五）页面展示代码标签

# （六）HTML Entity（实体）

# （七）a 标签的 href 属性

# （八）路径

# 1.站内资源

# 2.站外资源

# 3.绝对路径（url 地址）

# 4.相对路径

# （九）img 多标签联用

# 1.map

# 2.figure

# （十）定义列表

# （十一）容器元素

# 1.div 元素

# 2.HTML5 其他语义化元素

# 3.元素包含关系

# 1）以前

# 2）现在

# （十二）font-size

# 1.px 像素

# 2.em

# （十三）层叠

# 1.比较重要性

# 2.比较特殊性

# 3.比较源次序

# 4.应用

# （十四）继承

# （十五）属性值的计算过程

# 1.确定声明值

# 2.层叠冲突

# 3.使用继承

# 4.使用默认值

# 5.两个特殊取值

# （十六）盒模型

# 1.盒子类型

# 2.盒子的组成部分

# 1）内容

# 2）填充（内边距）

# 3）边框

# 4）外边距

# 3.盒模型应用

# 1）改变宽高范围

# 2）改变背景覆盖范围

# 3）溢出处理

# 4）断词规则

# 5）空白处理（单行文本）

# 4.行盒的盒模型

# 5.行块盒

# 6.空白折叠

# 7.可替换元素和非可替换元素

# （十七）视觉格式化模型

# 1.常规流布局

# 1）包含块（containing block）

# 2）块盒

# 2.浮动流布局

# 1）基本特点

# 2）盒子尺寸

# 3）盒子排列

# 4）高度坍塌

# 3.定位流布局

# 1）position 属性

# 2）相对定位

# 3）绝对定位

# 4）固定定位

# 5）定位下的居中

# 6）多个定位元素重叠

# 7）补充

# 4.块级格式化上下文

# 1）BFC 渲染区域

# 2）BFC 区域规则