一、HTML和CSS的概述
一 、概述
1. [扩]展
80 20原则:80%的知识，只能在20%的场景可以运用，而20%的知识，可以在80%的场景可以运用。 (剩下百分之八十属于扩展课程，为锦上添花)
扩展课程: 可以不看，不影响后面学习与开发。看了提高竞争力。
2. HTML & CSS 到底是什么，有什么用？
它们是两种计算机语言。
语言:沟通的工具。
人与人沟通的工具: 自然语言
人与计算机沟通的工具: 计算机语言
HTML + CSS + Javascript = 网页
HTML: 超文本标记语言；定义网页中有什么
CSS : 层叠样式表；定义网页中的东西长什么样子
3. 如何学习?
-心态平和
-多练习
4. 工具使用
VSCode: 通用编译器，微软。 通常用于编写代码。
MarkDown: MD，文档格式标准。文档编写者，仅关注内容本身，不许关注格式。
# HTML & CSS 概述
二、开发环境的准备
## 术语
术语降低沟通成本
1. web
互联网
2. w3c
万维网联盟: 非盈利性组织: w3.org
为互联网提供各种标准。
3.XML:可扩展的标记语言：extension markup language.用于定义文档结构的。
4，<任务><执行任务>每周一</执行日期> <
执行时间>下午两点</执行时间></任务>
5.什么是html?
答：是w3c组织定义的语言标准：是用于描述页面结构的语言。
结构：有什么东西，该东西表示什么含义。
html.超文本内容（超文本：从文档的某一部分
跳到另一个文档)
书写一个一级标题
```
<h12一级标题</h1>
```
加制
MDN:Mozilla开发者社区（字典）
6.什么是CSS?
CSS是w3c定义的语言标准。CSS是用于页面展示：颜色，边框颜色，布局，显示位置，字体大小。CSS决定了页面长什么样子。
7.执行
HTML CSS交给浏览器执行，结果是看到的页
面（浏览器內核）
浏览器：1.shell:外壳
2.core:内核(JS执行引擎，渣染引擎）
独立内核的浏览器：1).1E：trident
2).firfox:Gecko 3).chrome:webkit（之前）/blink
4).safariwebkit 5),.opera:presto/blink”"
8.版本和兼容性
html5, css3：目前还没有制定完成xhtml:可以认为是Html的一种一个版本，完全符合xml的规范。（以前的）
二、HTML的核心
# 第一个网页
Emmet插件:自动生成HTML代码片段
## 注释
可注释多行内容
快捷键：ctrl+/
在HTML中，注释书写格式;
```html
<!-- 注释内容 -->
```
## 元素
> 其他叫法：标签，标记
```html
<a href="http://www.duyiedu.com">渡一教育</a>
<title>Document</title>
```
元素 = 起始标记 + 结束标记 + 元素内容（可以是文字，也可以是图片等其他部分）+元素属性
属性 = 属性名 + 属性值
属性分类：
局部属性
全局属性
```html
<meta charset="UTF-8">
```
有些元素没有结束标记，这样的元素叫做：**空元素**
空元素的两种写法:
1.```<meta charset="UTF-8">```
2.```<meta charset="UTF-8"/>```(老版本)
## 元素的嵌套
元素不能相互嵌套
父元素，子元素，祖先元素，后代元素，兄弟元素（拥有同一个父元素的元素）
## 标准的文档结构
HTML:页面、HTML文档
```html
<!DOCTYPE html>
```
文档声明，告诉浏览器，当前文档使用HTML标准是HTML5.
不写文档说明，将导致浏览器进入怪异渲染模式
```html
<html lang="en">
</html>
```
根元素，一个页面最多只能一个，并且该元素是其他所有元素的父元素或祖先元素。
HTML5没有强制要求书写
lang属性;language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
书写英语lang="en"
书写汉语lang="zh-CN"(过时) lang="cmn-hans"(现在用法)
``html
<head>
</head>
```
文档头，文档头内部的内容，不会显示在页面上。
```html
<meta>
```
文档的元数据：附加信息。
charmet:指定网页内容编码。(局部属性)
```html
<title>Document</title>
```
网页的标题
```html
<body>
</body>
```
文档体，页面上所有要参与显示的元素，都应放置在文档体中
#语义化
## p
段落
>lorem,乱数假文，没有任何实际含义的数字
## span【无语义】
没有语义，仅用于设置样式
> 以前：某些元素在显示是会独占一行(块级元素)，某些元素不会(行级元素)
> 现在：到HTML5,已经弃用这种说法
## pre
预格式化文本元素
空白折叠：连续出现的空白字符（空格，制表，回车），在页面显示时，会被折叠为一个空格
例外：在pre元素中的内容不会出现空白折叠
pre元素内部内容，会按照源代码的格式显示到页面上。
该元素通常用于在页面上显示一些代码。
>显示代码时，通常外套code元素，code表示代码区域。
pre元素功能本质：它有一个默认的css属性
## HTML实体
实体字符 :HTML Entity
1.&单词;
2.&#数字;
-小于符号
< <
-大于符号
>
-空格符号
-版权符号
©
- &符号
&
# a元素
超链接
## href属性
hyper referece:通常表示跳转地址
1.普通链接，跳转地址(跳转页面)
2.锚链接，跳转某个锚点(当前页面的指定位置)
id属性：全局属性，表示元素在文档中的唯一编号
3.功能链接
点击后，触发某个功能。
-执行js代码，javascript:
-发送邮件，mailto:
要求用户计算机上安装有邮件发送软件:
-拨号，tel:
要求用户计算机上安装有拨号软件，或移动端
## target属性
表示跳转窗口位置
target的取值：
-_self:在当前页面窗口打开，默认值
-_blank:在新窗口打开
# 路径的写法
## 站内资源和站外资源
## 绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径
绝对路径书写格式：
1.绝对路径的书写格式:
url地址:
```
协议名://主机名:端口号/路径
```
协议名:
主机名:域名，IP地址
端口号:如果协议是http协议，默认端口号80，如果协议是https协议，默认端口号为443
当跳转目标和当前页面的协议一致时，可以省略协议
2.相对路径
以./开头，./表示当前资源所在目录
可以书写../表示返回上一目录所在位置
相对路径中./可以省略
# 多媒体元素
video 视频
audio 音频
## video
controls:控制控件的显示，取值只能为controls (如视频的播放控件)
某些属性只有两种状态；1.不写 2. 取值为属性名 这种属性叫做布尔属性
布尔属性在HTML5中可以不用书写属性值 controls和controls="controls"等效
autoplay:布尔属性 表示自动播放 (有些浏览器不允许自动播放，怕自动播放声音吓着用户)
muted:布尔属性，表示静音播放。(有些不允许的浏览器加上这个属性就允许自动播放)
loop:布尔属性，循环播放。
## audio
属性和video完全一致
## 兼容性
1.旧版本的浏览器不支持这两个元素
2.不同浏览器不同的浏览器支持音视频格式可能不一致
视频播放格式MP4，webm
音频：MP3
写子元素source,在其中书写src
```<video >
<source src=".mp4">
<source src=".webm">
<p>
对不起,你的浏览器不支持video元素
</p>
</video>
```
两个source表现了兼容性
# 列表元素
## 有序列表
ol: ordered list (父元素，子元素只有li)
li: list item
把大象装冰箱分几步？
<ol>
<li>打开冰箱</li>
<li>把大象装进去</li>
<li>冰箱门关上</li>
</ol>
## ol元素属性
type属性： (一般用Css表示)
取值为1,表示列表里边前面的序列用数字排列
取值为i,表示列表里边前面的序列用罗马数字排列
取值为a，表示列表里边前面的序列用小写字母排列
取值为A,表示列表里便前面的序列用大写字母排列
reversed属性：表示序列倒着排序 布尔属性
## 无序列表
把ol改成ul
ul: unordered list
无序列表经常用于制作菜单，新闻列表
## 定义列表
通常用于一些术语的定义
dl元素:difinition list
子元素:dt: definition title
dd: definition description
HTML中的术语解释:
<dl>
<dt>HTML</dt>
<dd>超文本标记语言,xxxxxxx</dd>
<dt>元素</dt>
<dd>组成HTML文档的单元，每个xxxxx</dd>
</dl>
# 容器元素
容器元素:该元素代表一块区域，内部用于放置其他元素
## div元素
没有语义
作用:用来划分区域
## 语义化容器元素
header: 通常用于表示页头，也可以表示文章的头部
footer:通常表示页脚，也可以用于表示文章的尾部
article:通常表示整篇文章
section:表示文章的章节
aside:通常用于表示侧边栏
# 图片元素
## img元素
image缩写，空元素
src属性:source
alt属性:当该图片资源失效时，将使用该属性的文字代替图片
## 和a元素联用 图片的跳转
将img元素嵌套在a元素里
## 和map元素 图片的跳转
把图片当作一个地图，map是单独的，不嵌套img元素
加img属性 usemap="#名字"
加map属性 name="名字" ("名字"的命名：1.首单词首字母小写，后边每个单词首字母大写 2.在每个单词之间加-)
map:地图
map的子元素:area (空元素)
area元素属性:
shape:这个区域的形(圆形，矩形，多边形)
coords:表示这个形状的关键点坐标(坐标系原点在图片的左上角，向右x增加，向下y增加)
herf:点击这个形状的链接地址
alt:图片显示不出来的时候，这个区域显示什么内容
target:点击这个链接后跳转的窗口位置
shape形状是圆 circle 模板：shape="x,y,半径"
矩形：rect 左上角坐标，右下角坐标 每个坐标之间都用","隔开
多边形：poly 一次描述每一个点的坐标
衡量坐标时为了避免衡量误差，需要使用专业的衡量工具:
ps,pxcook
## 和figure元素
指代，定义，通常用于把图片，图片标题，描述包裹起来
子元素figcaption：表示指代的东西的标题
# 元素的包含关系
以前:块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。
元素的包含关系由元素的内容类别决定。
例如:查看h1元素中是否可以包含p元素
总结:
1.容器元素中几乎可以包括任何元素
2.a元素中几乎可以包括任何元素
3.某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素
三、CSS基础
# 为网页添加样式
## 术语解释
```css
h1{
color:red;
background-color:lightblue;
text-align:center;
}
```
CSS规则 = 选择器 + 声明块
### 选择器
1.ID选择器:选中的是对应id值的元素 格式：#+id名
2.元素选择器
3.类选择器 用class属性 格式: .类名 (元素名.属性+tab键，可快速生成)
### 声明块
出现在大括号中
声明块中包含很多声明(属性)，每个声明(属性)表示某一方面的样式。
## CSS 代码书写位置
1. 内部样式表
把代码书写到style元素里边
2. 内联样式表(元素样式表)
直接书写在元素的style属性中
3.外部样式表[推荐]
将样式书写在独立的css文件中
1）.外部样式表可以解决多页面重复问题
2）.有利于浏览器缓存从而提高页面响应速度
3）.有利于代码分开(HTML和CSS)，利于代码的阅读和维护
# 常见样式声明
1. color
元素内部的文字颜色
**预设值**:定义好的单词
**三原色，色值**:光学三原色(红，绿，蓝)，每个颜色可以使用0~255之间的数字来表示，色值。
```
reb表示法:
eg: color:rgb(0,255,0); (rgb: red green blue) ( red:0, green:255, blue:0 )
hex(16进制)表示法:
#红绿蓝 (每个颜色占两位)
eg: color:#008c8c;
```
淘宝红:#ff4400 在三个颜色每两位都相同时可以简写 eg:#f40
黑色:#000000 , #000
白色:#ffffff , #fff
红:#ff0000 , #f00
绿:#00ff00 , #0f0
蓝:#0000ff , #00f
紫色:#ff00ff , #f0f
青色:#00ffff , #0ff
黄色:#ffff00 , #ff0
灰色:#cccccc , #ccc
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
1）px:像素，绝对单位 (简单的理解为文字的高度占多少个像素)
2）em:相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素(html),则使用基准字号。
>user agent,UA,用户代理(浏览器)
4.font-weight
文字的粗细程度，可以取值数字，可以取值为预设值
normal(预设值:400) bold(预设值:700)
> strong 默认加粗。表示重要的不能被忽略的内容
5.font-family
文字类型
必须用户计算机必须存在的字体才会有效。
使用多个字体匹配不同的环境。
sans-style,非衬线字体
6.font-style
字体样式，通常用它设置字体倾斜(斜体)
> i元素，默认样式为倾斜文字；实际使用中，通常用它表示一个图标
> em元素
7.text-decoration
文本修饰，给文本加线
>a元素:超链接
>del元素:错误的内容
>s元素:过期的内容
8.text-indent
首行文本缩进
eg:text-indent:$px
text-indent:$em (中文中表示缩进几个字，英文缩进与中文缩进距离相同)
9.line-height
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
10. width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
元素内部文字的水平排列方式
# 选择器
选择器:帮你精准选中想要的元素
## 简单选择器
1.ID选择器
2.元素选择器
3.类选择器
4.通配符选择器
*，选中所有元素
eg: *{ }
5.属性选择器
根据属性名和属性值
eg:[href]{ } [href="http://www.sina.com"]{ }
6.伪类选择器
都是加一个 : eg:a:hover{
color:red;
}
选中某些元素的某种状态
1）link:超链接未访问过时的状态
2）visited:超链接访问过后的状态
3）hover表示鼠标悬停时的状态
4）active:激活状态，鼠标按下状态
多个伪类选择器时必须按照如上顺序
爱恨法则: love hate
a:nth-child($) 表示选中a元素父元素中的第$个a元素
a:nth-child($n) 表示选中a元素父元素中的第$n个a元素
7.伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
```
元素名::before{content:"加入内容；"}
元素名::after{content:"加入内容；"}
```
before
after
::first-letter 选中元素的第一个文字
## 选择的组合
1.并且
直接连在一起
2.后代元素 —— 空格 (包含子元素)
3.子元素 —— >
4.相邻下一个兄弟元素 —— +
5.后边出现的所有兄弟元素 —— ~
## 选择器并列
多个选择器，用逗号隔开
语法糖
# 层叠
声明冲突:同一个样式，多次应用到同一个元素
层叠:解决声明冲突的过程，浏览器自动处理(权重计算)
比较顺序如下：
## 1. 比较重要性
重要性从高到低:
>作者样式表:开发者书写的样式
1） 作者样式表中的 !important样式
2） 作者样式表中的普通样式
3） 浏览器默认样式表
## 2. 比较特殊性
看选择器
总体规则:选择器选中的范围越窄，越特殊
具体规则:通过选择器，计算出一个4位数 (x x x x)哪个的数大，那个特殊
1. 千位:如果是内联样式，记作1，否则记0
2. 百位:将选择器中所有id选择器的个数
3. 十位:等于选择器中所有类选择器，属性选择器，伪类选择器的数量
4. 个位:等于选择器中所有元素选择器，伪元素选择器的数量
这里的四位数是逢256进1(可以不用管进位)
## 3. 比较源次序
代码书写靠后的胜出
## 应用
1. 重置样式表
书写一些作者样式表，覆盖浏览器的默认样式表
用重置样式表 -> 浏览器默认样式
常见的重置样式表: normalize.css、reset.css、meyer.css
2.爱恨法则
link>visited>hover>active
# 继承
子元素会继承父元素的某些CSS属性
通常，跟字体内容相关的属性都能被继承
# 属性值的计算过程
一个元素一个元素渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件: 该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
1.确定声明值:参考作者样式表和浏览器默认样式表中没有冲突的声明，作为CSS属性值
2.层叠冲突:对样式表中有冲突的声明使用层叠规则，确定CSS属性值
3.使用继承:对仍然没有值的属性，若可以继承，则继承父元素的属性值
4.使用默认值:对仍然没有值的属性，使用默认值
特殊的两个CSS取值:
- inherit:手动(强制)继承，将父元素的值取出应用到该元素
- initial:初始值，将该属性设置为默认值
# 盒模型
box: 盒子，每个元素在页面中都会生成一个矩形区域(d盒子)
盒子类型:
1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认样式为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
##盒子的组成部分
无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是:
1. 内容 content
width、height,设置盒子内容的宽高
内容部分通常叫做整个盒子的**内容盒 content-box**
2. 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
patting: 简写属性
patting: 上 右 下 左
填充区 + 内容区 = **填充盒 padding-box**
3. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式: border-style (默认没有样式)
边框宽度: border-width
边框颜色: border-color (默认为字体颜色)
边框 + 填充区 + 内容区 = **边框盒 border-box**
4. 外边距 margin
边框到其他盒子的距离
margin-top、 margin-left、 margin-right、 margin-bottom
速写属性 margin
# 盒模型的应用
## 改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
> 页面重构师: 将psd文件 (设计稿) 制作为静态页面
衡量设计稿尺寸时，往往使用的是边框盒，但设置 width 和 height，则设置的是内容盒
1. 精确计算
2. CSS3:box-sizing (可以通过这个改变宽高的作用对象)
## 改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
## 溢出处理
overflow,控制内容溢出边框盒后的处理方式
overflow:auto (需要滚动条的时候出现滚动条)scroll (滚动条一直出现)hidden(溢出部分隐藏)
## 断词处理
word-break,会影响文字在什么位置被截断换行
normal: 普通。CJK(中日韩)字符(文字位置截断)，非CJK字符(单词位置截断)
break-all:截断所有，所有字符都在文字处截断 (英语会在单词內部截断)
keep-all:保持所有，所有文字都在单词之间截断 (中文不会被截断换行，它认为这是一个单词)
## 空白处理
white-space:nowrap (表示空白折叠仍会发生，但不会换行)
white-space:pre (不会空白折叠)
```
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
```
只能控制单行文本将其溢出部分变成省略号
# 行盒的盒模型
常见的行盒: 包含具体内容的元素
span、strong、em、i、img、video、audio
## 显著特点
1.盒子沿着内容延伸
2.行盒不能设置宽高
调整行盒的宽高，应使用字体大小、行高、字体类型，间接调整。
3. 内边距(填充区)
水平方向有效，垂直方向只会影响背景，不会实际占据空间。
4. 边框
水平方向有效，垂直方向不会实际占据空间。
5. 外边距
水平方向有效，垂直方向不会实际占据空间。
## 行块盒
display:inline-block 的盒子
1. 不独占一行
2. 盒模型中所有尺寸都有效
## 空白折叠
空白折叠，发生在行盒 (行块盒) 内部 或 行盒 (行块盒) 之间
## 可替换元素 和 非可替换元素
大部分元素，页面上显示结果，取决于元素内容，称为**非可替换元素**
少部分元素，页面上显示的结果，取决于元素属性，称为**可替换元素**
可替换元素： img、 vedio、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效
# 常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中多个盒子排列规则
视觉格式化模型，大体上将页面中的盒子的排列分为三种方式:
1. 常规流
2. 浮动
3. 定位
## 常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则: 块盒独占一行，行盒水平依次排列
包含块(containing block) : 每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大大部分情况下:盒子的包含块，为其父元素的内容盒
**块盒**
1.每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以为auto，默认值是0
auto: 将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该空间被margin-right全部吸收
在常规流中， 块盒在其包含块中居中，可以定宽，然后让左右margin设置为auto
2. 每个块盒垂直方向上的auto值
height:auto,适应内容的高度
margin:auto, 表示0
3.百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度百分比:
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
4. 上下外边距的合并
两个常规流块盒，上下“外边距”“相邻”，会进行合并
合并距离取两个外边距最大值
# 浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式:
1. 常规流
2. 浮动
3. 定位
## 应用场景
1. 文字环绕
2. 横向排列
## 浮动的基本特点
修改float属性值为:
-left: 左浮动，元素靠上靠左排列
-right: 右浮动，元素靠上靠右排列
默认值为none(即常规流)
1. 当一个元素浮动后，元素必定为块盒(原本为行盒会被强制将display属性改为block)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒
## 盒子尺寸
1. 宽度为auto时，适应内容宽度
2. 高度为auto时，适应内容宽度(与常规流一致)
3. margin为auto,为0.
4. 边框、内边距、百分比设置与常规流一致
## 盒子排列
1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在内容块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生
>如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
## 高度坍塌
高度坍塌的根源:常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及CSS属性:clear
-默认值:none
- left:清除左浮动，该元素必须出现在"前面"所有左浮动盒子的下方
- right:清除右浮动，该元素必须出现在“前面”所有右浮动元素盒子的下方
- both:清除左右浮动，该元素必须出现在“前面”所有浮动盒子的下方
或者给浮动元素的父元素加属性值
```
.clearfix::after{
content:"";
display: block;
clear:both;
}
```
# 定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式:
1. 常规流
2. 浮动:float
3. 定位:position
定位:手动控制元素在包含块中的精准位置
涉及CSS属性:position
## position
- 默认值:static,静态定位
- relative: 相对定位
- absolute: 绝对定位
- fixed: 固定定位
一个元素，只要position的值不是static,认为该元素是一个定位元素。
定位元素会脱离常规流(相对定位除外)
一个脱离了文档流的元素:
1.文档流中的元素摆放时，会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时，会忽略脱离了文档流的元素
## 相对定位
不会导致元素脱离文档流，只是让元素在原位置上进行偏移。
可以通过四个CSS属性设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
如果出现矛盾时它以左边和上边为准
## 绝对定位
1. 宽高为auto,适应内容
2. 包含块变化:找祖先元素中第一个定位元素，该元素的填充盒为其包含块.若找不到，则他的包含块为整个网页(初始化包含块)
## 固定定位
其他情况和绝对定位完全一样。
包含块不同: 固定为视口 (浏览器的可视窗口)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
