CSS 定位属性 Position
- CSS 定位属性
- 1. position 属性: 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)
- 1.1 top 属性: 定位元素的 上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性)
- 1.2 bottom 属性: 定位元素的 下偏移量 (搭配 position 属性)
- 1.3 left 属性: 设置 定位元素的 左偏移量 (搭配 position 属性)
- 1.4 right 属性: 设置 定位元素的 右偏移量 (搭配 position 属性)
- 1.5 z-index 属性: 设置 定位元素和 伸缩项的 层叠顺序 (auto/ 整数值, 搭配 position 顺序)
- 1.6 clip 属性: 设置 绝对/固定 定位元素的 可见区域 (搭配 position 属性, 可指定 四条剪切线的位置 , 已废弃,用 clip-path 替代)
- 2. float 属性: 设置元素的 浮动方向 (不浮动 none/左浮动/右浮动/开始处/结束处)
- 3. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局)
- ♣ 结束语 和 友情链接
CSS 定位属性
用于 | 属性名 | CSS 版本 |
---|---|---|
① 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)。 | position | 2 |
❶ 定位元素的 上偏移量 (长度值/百分比值/不偏移 auto , 搭配 position 属性)。 | top | 2 |
❷ 定位元素的 右偏移量 (搭配 position 属性)。 | right | 2 |
❸ 定位元素的 下偏移量 (搭配 position 属性)。 | bottom | 2 |
❹ 定位元素的 左偏移量 (搭配 position 属性)。 | left | 2 |
❺ 定位元素和 伸缩项的 层叠顺序 (auto / 整数值, 搭配 position 顺序)。 | z-index | 2 |
❻ 绝对/固定 定位元素的 可见区域 (剪切区域) (搭配 position 属性, 可指定 四条剪切线的位置 , 已废弃,用 clip-path 替代)。 | clip | 2 |
② 设置元素的 浮动方向 (不浮动 none /左浮动/右浮动/开始处/结束处)。 | float | 1 |
❶ 清除 前面的 浮动元素的浮动 (清除类型 = 前面的浮动元素的类型,搭配 float 属性)。 | clear | 1 |
③ 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局)。 | display | 1 |
1. position 属性: 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)
- 涉及内容 较多,另写了一个博客: 点击 查看详情: 【CSS 定位之 position 属性】
1.1 top 属性: 定位元素的 上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性)
- ⑴ 设置 定位元素的 上偏移量:
top
- ① 偏移距离 范围
- ❶ 相对定位元素
relative
的 偏移范围 = 上边框的外边界 和 原位置的 上边框的外边界 之间的距离 (相对于 自身的位置) = 距离 原位置 之间的 距离top: 50px;
(因为原位置 与右边的元素平行,所有, 这里用 右边的元素 做参照。)
- ❷ 绝对定位元素
absolute
的 偏移范围 = 上外边距的外边界 与 其 包含块的 边框的内边界 之间的 偏移距离。top: 50px;
= 定位元素的 上外边距的外边界 到 包含块的 边框的内边距的距离- 上偏移量 不包括的范围: 不包括 包含块的边框宽度 ,也不包括 定位元素的 上外边距宽度。
- 其他偏移量
bottom,right,left
也是如此。
- 其他偏移量
- ❶ 相对定位元素
- ② 适用对象: 定位元素
- 定位元素 = 非静态元素 =
position
值 ≠static
的元素 =position
值 =relative | absolute | fixed | sticky
的元素
- 定位元素 = 非静态元素 =
- ③ 不适用对象: 非定位元素 = 静态元素 = 元素的默认定位 =
position
值 =static
的元素- 静态元素(普通元素),不会有 任何偏移效果。除了设置了 不同
static
的position
值。
- 静态元素(普通元素),不会有 任何偏移效果。除了设置了 不同
- ① 偏移距离 范围
- ⑵ 偏移量的 优先级: 根据高度 是否固定值 决定。
- ① 高度 不固定时: 上/下 偏移量 都有效
- 当
top
和bottom
同时指定时,并且height
没有被指定 或者 指定为auto
或100%
的时候,top
和bottom
都会生效
- 当
- ② 高度 为固定值时: 上偏移量
top
优先- 如果
height
被限制,则top
属性会 优先设置,bottom
属性则会被 忽略。
- 如果
- ① 高度 不固定时: 上/下 偏移量 都有效
- ⑶ 上偏移量的 语法
top: auto|%|length|inherit;
/* 长度值 <length> values */
top: 3px;
top: 2.4em;
/* 包含块的高度 百分比值 <percentage>s of the height of the containing block */
top: 10%;
/* 关键字值 Keyword value */
top: auto;
/* 全局值 Global values */
top: inherit;
top: initial;
top: unset;
- ⑷ 上偏移量的 属性值
- 长度值/百分比值/不偏移 auto
- ① 长度值:
<length>
- 可以是负的,正的 或者
null
长度值表示。
- 可以是负的,正的 或者
- ② 百分比值(包含块高度):
%, <percentage>
- 元素 包含块的高度的 百分比 。
- ③ 不偏移(不指定 偏移量):
auto
- 下偏移量
bottom
优先: 将忽略top
属性,以bottom
偏移量 属性为准。 - 不偏移: 如果
bottom
也为auto
未指定具体值 的话,元素的垂直位置 = 作为静态(即static
)元素时 该在的位置, 即 不偏移。
- 下偏移量
- 上偏移量的 浏览器支持
- 在 IE7之前,当同时指定
top
和bottom
时,元素位置 被过度约束,top
属性 具有优先级;将bottom
的计算值 设置为-top
,而忽略其 指定值。
- 在 IE7之前,当同时指定
- 相关示例,参见
position
属性的 示例。
1.2 bottom 属性: 定位元素的 下偏移量 (搭配 position 属性)
- ⑴ 设置 定位元素的 下偏移量:
bottom
属性- 偏移距离 范围 : 与
top
属性 相同, 只是 方向不同。
- 偏移距离 范围 : 与
- ⑵ 下偏移量的 语法和属性值: 与
top
属性 相同, 只是 方向不同。
1.3 left 属性: 设置 定位元素的 左偏移量 (搭配 position 属性)
- ⑴ 设置 定位元素的 左偏移量:
left
属性- 偏移距离 范围 : 与
top
属性 相同, 只是 方向不同。
- 偏移距离 范围 : 与
- ⑵ 左偏移量的 语法和属性值: 与
top
属性 相同, 只是 方向不同。 - ⑶ 百分比值: 相对于 包含块的宽度 的百分比。
1.4 right 属性: 设置 定位元素的 右偏移量 (搭配 position 属性)
- ⑴ 设置 定位元素的 右偏移量:
right
属性- 偏移距离 范围 : 与
top
属性 相同, 只是 方向不同。
- 偏移距离 范围 : 与
- ⑵ 右偏移量的 语法和属性值: 与
top
属性 相同, 只是 方向不同。 - ⑶ 百分比值: 相对于 包含块的宽度 的百分比。
1.5 z-index 属性: 设置 定位元素和 伸缩项的 层叠顺序 (auto/ 整数值, 搭配 position 顺序)
- ⑴ 设置 定位元素和 伸缩项的 层叠顺序:
z-index
属性- ① 适用对象: ❶ 定位元素 (非静态元素=
position
≠static
的元素) + ❷ 伸缩项 (flex items
)z-index
设置 定位元素及其后代元素 或 伸缩项(flex items
) 的 z 轴顺序 (z-order
,即 层叠次序)。
- ② 层叠次序:
- 当元素之间 重叠的时候,
z-index
值较大的元素 会覆盖在 较小的元素上方 = 在上层显示。
- 当元素之间 重叠的时候,
- ① 适用对象: ❶ 定位元素 (非静态元素=
-
⑵ 二维坐标系(普通文档流) 和 不重叠:
- 没有重叠: 一般情况下,页面 可以被认为是 二维的,因为文本、图像和其他元素 被安排在页面上 而没有重叠。
- 在这种情况下,只有一个 渲染进程,所有元素 都知道其他元素 占用的空间。
- 没有重叠: 一般情况下,页面 可以被认为是 二维的,因为文本、图像和其他元素 被安排在页面上 而没有重叠。
-
⑶ 三维坐标系 和 层叠 (元素 相互覆盖)
- ① 盒模型和三维坐标系:
- 在
CSS 2.1
中, 所有的 盒模型元素 都处于 三维坐标系中。
- 在
- ②
z
轴顺序:- 除了我们常用的
x
横坐标和y
纵坐标, 盒模型元素 还可以沿着“z
轴”层叠摆放, 当他们 相互覆盖时,z
轴顺序 就变得十分重要。
- 除了我们常用的
- ① 盒模型和三维坐标系:
- ⑷ 定位元素 和 层叠次序:
- ① 层叠次序:
z-index
属性 允许 在呈现内容时 调整对象的层叠顺序。 - ② 定位元素和元素相互覆盖
- 比如 在定位元素中,绝对定位元素,从文档流中删除 重新定位,此时 可能出现和 文档中 其他元素 相互重叠/覆盖 的可能, 这个时候 谁在上 谁在下,谁覆盖谁,就需要设置了,
z-index
就有了存在的 意义。
- 比如 在定位元素中,绝对定位元素,从文档流中删除 重新定位,此时 可能出现和 文档中 其他元素 相互重叠/覆盖 的可能, 这个时候 谁在上 谁在下,谁覆盖谁,就需要设置了,
- ③ 定位元素的 层叠次序 和 层叠上下文
- 即
position
值 ≠static
的元素,z-index
属性 指定:- ❶ 层叠层级: 盒子 在当前 层叠上下文中的 层叠层级。
- ❷ 本地 层叠上下文: 盒子 是否创建 一个 本地层叠上下文。
- 即
- ① 层叠次序:
- ⑸ 层叠放置: CSS 允许 在现有的渲染引擎上 层叠地 摆放盒模型元素。
- ①
z
轴 元素的顺序:z-index
属性 来指定。 - ②
z
轴 方向: 相当于 垂直于 屏幕,指向 用户。- ❶ 整数: 所有的层 都可以用一个整数(
z
轴顺序)来表示 = 当前层 在z
轴的位置。 - ❷ 数字越大: 元素 越接近 用户。
- 覆盖 在上方: 数字大的元素, 层叠/覆盖在 数字小的 元素的上方。
- ❶ 整数: 所有的层 都可以用一个整数(
- ①
- ⑹ 层叠顺序 的语法
z-index: auto | <integer>|inherit;
/* 关键字值 Keyword value */
z-index: auto;
/* 整数值 <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */
/* 全局值 Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
- ⑺ 层叠顺序 的属性值
- 与父元素的层叠级别相同 auto/ 层叠级别
- ① 和包含块层 层叠级别相同 (默认值):
auto
- 不创建 新的 本地层叠上下文:
- 该盒子 不会创建 一个新的本地 层叠上下文。
- 与包含块 层叠级别相同:
- 当前 层叠上下文中 生成的盒 的层叠级别 = 父盒子(包含块)的 层叠级别。
- 不创建 新的 本地层叠上下文:
- ② 整数值(层叠级别):
<integer>
- 设置元素的 层叠顺序。
- 整数值 = (当前 层叠上下文中 生成的 盒子的) 层叠级别。
- 本地 层叠上下文:
- 该盒子 还会创建 一个本地 层叠上下文,层叠级别 =
0
。 - (设置层叠级别的 元素的) 后代 不和 其他元素的层叠级别 做比较:
- 后代元素的
z-index
不和 该元素之外的 其他元素的z-index
进行对比。
- 后代元素的
- 该盒子 还会创建 一个本地 层叠上下文,层叠级别 =
- 负值: 层叠顺序(层叠级别) 可以为 负值
- 正整数: 则 离用户 更近。
- 负整数: 则 离用户 更远。
-
⑻ 不指定
z-index
属性时的层级- 默认层级
0
层:- 当没有指定
z-index
的时候, 所有元素 都在会被渲染在 默认层(0
层)
- 当没有指定
- 同一级:
- 当多个元素的
z-index
属性相同 的时候(在 同一个层 里面),那么将按照 以下 描述的规则 进行布局。
- 当多个元素的
- 默认层级
-
⑼ 不指定
z-index
属性 (同一层级)时 的层叠顺序- 当没有元素 指定
z-index
属性 时,元素 按照如下顺序 层叠(从底层到最上层 顺序):- ① 根元素的 背景和边框。
- ② 非定位元素 = 静态块元素(
position:static;
)- 按 HTML中的 出现顺序 层叠。
- ③ 定位元素
- 按 HTML中的 出现顺序 层叠。
- ④ 定位元素 和 非定位元素 混合时
- 非定位元素 在下层: 非定位元素,始终先于定位元素渲染 并出现在 定位元素的下层,即便它们在 HTML结构中 出现的位置 晚于定位元素也是如此。
- ⑤
order
属性 和flex
容器- 当
order
属性从flex
容器中的 “HTML中的外观顺序” 更改呈现时,它同样会 影响 层叠上下文的顺序。
- 当
- ⑥ 透明度和 定位元素的层叠顺序
- 所有设置了 透明度
opacity
小于1
的定位元素, 都会隐式地生成 一个层叠上下文(和给元素 增加一个z-index
值的效果 相同)。
- 所有设置了 透明度
- 当没有元素 指定
- ⑽ 层叠顺序的 浏览器支持
-
示例1: 给定位元素,设置 层叠的顺序
-
html
<!--定位元素-->
<div class="posiancestor">
<p class="position red fixed">古人学问无遗力,</p>
<p class="position green relative1">少壮工夫老始成。</p>
<p class="position red relative2">纸上得来终觉浅,</p>
<p class="position green absolute">绝知此事要躬行。</p>
</div>
- css
/*设置一个 定位的祖先 浮动元素的包含块*/
.posiancestor {
position: relative;
top: 40px;
left: 40px;
margin: 10px;
border: solid 10px;
padding: 10px;
width: 50%;
height: 400px;
}
/*让包含块的高度 自动调整,适用 其中的浮动元素*/
.posiancestor::after {
/*添加一个空内容*/
/*content: "";*/
/*设为 块元素*/
/*display: block;*/
/*清除所有浮动*/
/*clear: both;*/
}
/*第1个元素 设置为 固定定位*/
.fixed {
/*设置 固定定位*/
position: fixed;
top: 50px;
left: 50px;
z-index: 2;
/*border: double 2px;*/
}
/*第2,3个元素,设置为 相对定位*/
.relative1 {
/*设置 相对定位类型*/
position: relative;
/*position: absolute;*/
/*设置偏移量*/
top: 50px;
bottom: 50px;
/*left: 50px;*/
/*border: solid 10px;*/
z-index: 1;
}
.relative2 {
/*设置 相对定位类型*/
position: relative;
/*position: absolute;*/
/*设置偏移量*/
top: -10px;
left:20px;
z-index: 0;
}
/*第 4 个元素 ,设置为 绝对定位 */
.absolute{
/*设置 绝对定位类型*/
position: absolute;
top: 210px;
left: 60px;
z-index:-1;
}
- ① 定位元素: 默认的 层叠顺序 (默认地, 按照在 html 中的标签的 先后顺序)
- ② 定位元素: 改变层叠顺序后
- 下面示例的代码 css
/*理解 层叠上下文*/
#div2 { z-index: 2; }
#div3 { z-index: 1; }
#div4 { z-index: 10; }
#div1,#div3 {
border: solid 2px green;
width: 50%;
margin: 10px;
padding: 10px;
background-color: #e2ffdd;
position: relative;
/*设置为 相对定位的元素,不设置下方的 偏移量,也会把元素 认定为 相对定位元素*/
top: 5px;
}
#div2{
border: dashed 2px red;
background-color: #ffdcdd;
position: absolute;
top: 50px;
left: 100px;
}
#div4{
border: dashed 2px rebeccapurple;
background-color: #f5d3ff;
position: absolute;
top: 10px;
left: 180px;
}
- html
<!--理解 层叠上下文-->
<div id="div1">
<b>DIV #1</b><br />
position: relative;
<!-- 新建1个div-->
<div id="div2"><b>DIV #2</b><br />position: absolute;
<br />
z-index: 2;
</div>
</div>
<div id="div3">
<b>DIV #3</b><br />
position: relative;<br />
z-index: 1;
<!-- 新建一个div-->
<div id="div4">
<b>DIV #4</b><br />
position: absolute;<br />
z-index: 10;
</div>
</div>
- 示例2: 理解 层叠上下文 的概念。(代码在上方)
-
z-index
属性 被分配在 两个水平的层次结构中。 -
⑴ 同一个层叠上下文
DIV #2 (z-index: 2)
在DIV #3 (z-index: 1)
的上面,因为他们 都属于 同一个层叠上下文( = 根元素 创建的层叠上下文),所以z-index
的值 决定了 元素之间的叠放顺序。- ① 静态元素(普通的元素 = 非定位元素) ⇒ 不会创建 层叠上下文⇒ 非定位元素 一般都以 在同一层叠上下文 = 根元素 创建的层叠上下文 中。
- ② 谁能 创建层叠上下文: 点击查看: 层叠上下文 的详细介绍 。
-
⑵ 不属于 同一个层叠上下文:
z-index
不起排序作用。DIV #2 (z-index: 2)
在DIV #4 (z-index: 10)
的上面,尽管DIV #2
的z-index
值 小于DIV #4
。- ① 原因在于: 它们 不属于 同一个层叠上下文。
- ②
DIV #4
处于:DIV #3
(相对定位元素) 所创建的 层叠上下文中。DIV #2
处于:DIV #1
(相对定位元素) 所创建的 层叠上下文中。-
⇒ ❶
DIV #1
,DIV #3
创建的是 兄弟层叠上下文⇒ 不是 同一 层叠上下文 ⇒z-index
无效。 -
❷ 父子元素⇒ 同一层叠上下文:
DIV #3
和 子元素div#4
在 同一层叠上下文⇒z-index
有效 ⇒div#3
在div#4
的 下方 。
-
- ③
div#1
,div#3
设置为 相对定位元素- ⇒ 会各自创建 新的层叠上下文
- ⇒
div#3
的后代div#4
和div#1
的后代div#2
不在 同一个层叠上下文中 - 不在 同一个层叠上下文中 ⇒
z-index
在div#2
,div#4
之间 无效
-
⑶ 相对定位元素 和 层叠上下文⇒ 层叠顺序
- 定位元素 ⇒ 创建 新的层叠上下文。
- 如果
#div1
,#div3
不设置为 相对定位元素,就不会创建 新的层叠上下文,那么 这4个div
,都是 同一层叠上下文,z-index
对4个div
就都起作用了。 z-index
值大的,显示在上方。
- 如果
- 定位元素 ⇒ 创建 新的层叠上下文。
-
-
⑷ 层叠上下文 之间的 关系
- ① 父子 层叠上下文 ⇒ 同一 层叠上下文 ⇒
z-index
有效- 层叠上下文 可以包含在 其他层叠上下文中,并且一起创建一个层叠上下文的层级。
- 比如 包含块是定位元素,会创建一个层叠上下文,子元素也是定位元素,也会创建 一个层叠上下文,这时
z-index
对于这样的父子,还是可以进行 层叠顺序排序的,即z-index
有效。 - 比如
div#3
和它的子元素div#4
都是定位元素,都各自创建 新的层叠上下文,div#3
(z-index: 1;) 还是 处于div#4( z-index: 10; )
下方。
- 比如 包含块是定位元素,会创建一个层叠上下文,子元素也是定位元素,也会创建 一个层叠上下文,这时
- 层叠上下文 可以包含在 其他层叠上下文中,并且一起创建一个层叠上下文的层级。
- ② 兄弟之间的 层叠上下文 ≠同一层叠上下文了 ⇒
z-index
无效。- 每个层叠上下文 都完全 独立于 它的兄弟元素:当处理层叠时 只考虑子元素。
- 比如
DIV #2 (z-index: 2)
在DIV #4 (z-index: 10)
的上面,因为 各自的父元素 都是定位元素,都创建了 一个新的 层叠上下文 (两个兄弟级别的 层叠上下文)
- ③ 每个层叠上下文 都是自包含的:
- 当一个元素的内容 发生层叠后,该元素 将被作为整体 在父级层叠上下文中 按顺序进行层叠。
- ① 父子 层叠上下文 ⇒ 同一 层叠上下文 ⇒
-
⑸ 层叠上下文的 层次结构
- 通常HTML的层次结构 和 层叠上下文的层次结构是 不同的。
- 父子 同一层级:
- 在层叠上下文的 层次结构中,没有 创建层叠上下文的元素 同其父级 处于一个层叠上下文。
- 父子 同一层级:
- 能创建 层叠上下文的元素:
- 有的元素可以创建 层叠上下文,比如定位元素,有的元素 不能创建层叠上下文, 比如 普通的 静态元素(
position: static
)。
- 有的元素可以创建 层叠上下文,比如定位元素,有的元素 不能创建层叠上下文, 比如 普通的 静态元素(
- 通常HTML的层次结构 和 层叠上下文的层次结构是 不同的。
1.6 clip 属性: 设置 绝对/固定 定位元素的 可见区域 (搭配 position 属性, 可指定 四条剪切线的位置 , 已废弃,用 clip-path 替代)
- ⑴ 剪切 绝对/固定定位的元素:
clip
属性- ① 可见区域:
clip
属性定义了 元素的哪一部分 是可见的。- 可指定 四条剪切线的位置 ⇒ 上下/左右剪切线 中间的区域 = 可见区域。
- ② 适用对象:
- 只适用于 ❶ 绝对定位元素 =
position:absolute
的元素和 ❷ 固定定位的元素position:fixed
(固定定位,也算是 某种绝对定位)。
- 只适用于 ❶ 绝对定位元素 =
- ③ 已废弃
- 该特性 已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性,使用 clip-path 属性 替代。
- ① 可见区域:
- ⑵ 剪切的 语法
clip: rect(top,right,bottom,left)|auto|inherit;
<shape> | auto
where
<shape> = rect(<top>, <right>, <bottom>, <left>)
/* 关键字值 Keyword value */
clip: auto;
/* 矩形值,要带单位 可用空格符或逗号 分隔 <shape> values
空格分隔: 向后兼容的语法*/
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* 全局值 Global values */
clip: inherit;
clip: initial;
clip: unset;
- ⑶ 剪切的 属性值
- ① 不剪切(默认值):
auto
- 浏览器 设置元素的形状。
- ≠ 这与
rect(auto, auto, auto, auto)
不同,rect()
会剪切到 元素的边框的内边界。
- ② 可见区域 (剪切线的位置):
rect()
- 合法的形状值是:
- ❶
rect(<top>, <right>, <bottom>, <left>)
- ❷
rect(<top> <right> <bottom> <left>)
- ❶
<top>
,<right>
,<bottom>
,<left>
的取值- ❶ 长度值
<length>
或 ❷auto
.。
- ❶ 长度值
- 偏移量 = 剪切线的位置
- 设置剪切的区域 偏移量 ,和 绝对定位的位置 偏移量 无关 ,只和元素本身的 整体宽高 有关。
- 剪切位置 相对于: 相对 元素的 左边框 和 上边框 的距离。
<top>
和<bottom>
- 相对于盒子 上边框边界 的偏移量 = 剪切线的位置。
- 相对于盒子 上边框边界 的偏移量 = 剪切线的位置。
<right>
和<left>
- 相对于盒子 左边框边界 的偏移量 = 剪切线的位置。
- 元素的 整体宽高
- 元素的 整体高度 = 上下边框+上下内边距+高度 (外边距透明,此处 不含外边距)
- 元素的 整体宽度 = 左右边框+左右内边距+宽度 (外边距透明,此处 不含外边距)
- ❶ 上
top
= 上方 会剪切掉的距离 (从上往下剪切) 。- 最大值: 不能超过 元素的整个高度,否则会整个剪切掉。
- 显示上边框 ⇒ 设置
top
=0px
- ❷ 下
bottom
= 距离 上边框外边界的距离 。- 下方被剪切的距离 = 整个元素高度 -
bottom
的值 (负值 表示不剪切) - 显示下边框 ⇒ 设置
bottom
= 元素的 整个高度 。- 小于 这个值,意味着 距离上边框更近, 从下往上剪切 一部分。
- 下方被剪切的距离 = 整个元素高度 -
- ❸ 左
left
= 左边 会剪切掉的距离 。- 最大值: 不能超过 元素的整个宽度,否则会整个剪切掉。
- 显示左边框 ⇒ 设置
left
=0px
- ❹ 右
right
= 距离 左边框外边界的距离 。- 右方被剪切的距离 = 整个元素宽度 -
right
的值 (负值 表示不剪切) - 显示下边框⇒ 设置
right
= 元素的整个宽度 。
- 右方被剪切的距离 = 整个元素宽度 -
- 合法的形状值是:
- ① 不剪切(默认值):
- ⑷ 剪切区域的 浏览器支持
- 示例1: 定义一个定位元素 进行剪切
- 剪切线的位置 相对于: 是相对于 元素的 左边框和上边框的距离。
- 剪裁区域和内容区: 取决于 剪切线的位置。
- 可能 比元素的内容区大
- 也可能 比内容区小。
- html
<!--定位元素和剪切区域-->
<div class="posiancestor">
<p class="position red">古人学问无遗力,</p>
<p class="position green">少壮工夫老始成。</p>
<p class="position red">纸上得来终觉浅,</p>
<p class="position green absolute">绝知此事要躬行。</p>
</div>
- css
.red {
background-color: indianred;
/*margin: 10px;*/
margin: 10px;
}
.green {
background-color: lightseagreen;
margin: 10px;
}
/*去除各浏览器的 默认内外边距*/
* {
margin: 0;
padding: 0;
}
/*元素的包含块*/
.posiancestor {
position: relative;
top: 40px;
left: 40px;
margin: 10px;
border: solid 10px;
padding: 10px;
width: 50%;
}
.position {
/* 设置宽高 */
width: 150px;
height: 50px;
text-align: center;
/*文字垂直居中: line-height = height*/
line-height: 50px;
border: solid 10px;
margin: 5px;
padding: 5px;
}
.absolute {
/*设置 绝对定位类型*/
position: absolute;
top: 100px;
left: 360px;
/*z-index:-1;*/
/* 设置 剪切线的位置 */
clip: rect(0px, 180px, 80px, 0px);
clip: rect(10px, 180px, 80px, 10px);
}
clip: rect(10px, 180px, 80px, 10px);
- ⑴ 显示出来的部分= 上下 两条剪切线中间的部分 和 左右 两条剪切线中间的部分
- ① 上边的 剪切线位置
- 距离 元素的上边框
10px
的位置 开始剪切 (上边会被剪切10px
)。
- 距离 元素的上边框
- ② 右边的 剪切线位置
- 距离 元素左边框
180px
的位置 开始剪切 。 180px
= 左右边框+左右内边距+宽度 =10*2
+5*2
+150
=180px
- 距离 元素左边框
- ③ 下边的 剪切线位置
- 距离 元素的上边框
80px
的位置 开始剪切。 80px
= 上下边框+上下内边距+高度 =10*2
+5*2
+50
=80px
- 距离 元素的上边框
- ④ 左边的 剪切线位置
- 距离 元素左边框
10px
的位置 开始剪切。
- 距离 元素左边框
- ① 上边的 剪切线位置
- ⑵
clip: rect(auto, auto, auto, auto);
≠clip:auto;
因为后者 是不剪切,前者是剪切到边框处,虽然看上去差不多。- 四条剪切线的位置 都是
auto
= 被剪切到该边的边框 = 边框和以内的内容 都可见。
- 四条剪切线的位置 都是
2. float 属性: 设置元素的 浮动方向 (不浮动 none/左浮动/右浮动/开始处/结束处)
- ⑴ 设置元素的 浮动方向:
float
属性- ① 浮动元素的 位置: 容器的左侧/右侧
- 左右侧: 属性 将元素放在 其容器的左侧或右侧。
- 环绕元素: 允许 ❶ 文本 和 ❷ 内联元素 环绕它。
- 可用于 图像, 使文本围绕 在图像周围。
- ② 从文档流中 删除:
- 该元素 从网页的 正常流动中(文档流) 移除。
- 保持 部分流动性:
- ❶ 影响 非浮动元素的 文本位置:
- 因为浮动元素, 还会影响 区域内的 非浮动元素的 文本的显示( 如,文本环绕)
- ❷ 浮动元素和非浮动元素的 相对位置:
- 非浮动元素下面的元素(html 中的次序) 进行浮动, 也会参考上方 非浮动元素的位置,所以 浮动元素,尽管从 文档流中删除了, 仍然保持 部分的流动性(与绝对定位相比)。
- ❶ 影响 非浮动元素的 文本位置:
- ③ 适用对象
- 所有元素
- 但如果
display
的值为none
= 不可见的元素, 则没有效果。 - 浮动元素, 其中
float
的计算值≠none
。
- ① 浮动元素的 位置: 容器的左侧/右侧
- ⑵ 浮动 和 块布局
- 浮动 ⇒ 块布局 ⇒ 块级框 ⇒ 修改
display
的计算值- 浮动
float
意味着 使用块布局,它在某些情况下 修改display
值的计算值: - 浮动 ⇒ 块级框
- 会生成一个 块级框
block
,不论它本身是 何种元素。
- 会生成一个 块级框
- 浮动
- 浮动 ⇒ 块布局 ⇒ 块级框 ⇒ 修改
指定值 (Specified value) | 计算值 (Computed value) |
---|---|
inline | block |
inline-block | block |
inline-table | table |
table-row | block |
table-row-group | block |
table-column | block |
table-column-group | block |
table-cell | block |
table-caption | block |
table-header-group | block |
table-footer-group | block |
inline-flex | flex |
inline-grid | grid |
other | unchanged |
- ⑶ 浮动元素的 js 引用: 不同名字
- 如果要在 JavaScript 中把
float
属性当作HTMLElement.style
对象的一个成员 来操作,- 现代浏览器 都支持
float
- 在Firefox 34 和更老的版本中,必须拼写成
cssFloat
。 - 在 IE 8 和更老的版本当中,要使用
styleFloat
属性。
- 现代浏览器 都支持
- 这是
DOM
驼峰命名和 CSS 所用的连字符分隔命名法 对应关系中的一个特例- 这是因为 在 JavaScript 中"
float
"是一个保留字, - 因为同样的原因,"
class
“被改成了”className
" 、"for
“被改成了”htmlFor
"。
- 这是因为 在 JavaScript 中"
- 如果要在 JavaScript 中把
- ⑷ 浮动的 语法
float: left|right|none|inherit;
- 包含新属性值:
left | right | none | inline-start | inline-end;
- 包含新属性值:
/* 关键字值 Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* 全局值 Global values */
float: inherit;
float: initial;
float: unset;
- ⑸ 浮动的 属性值
- 不浮动 none/左浮动/右浮动/开始处/结束处
- ① 不浮动 (默认值):
none
- 元素 不能浮动。
- ② 左浮动:
left
- 元素必须 浮动在 其包含块的 左侧。
- ③ 右浮动:
right
- 元素 必须浮动在 其包含块的 右侧。
- ④ 开始处:
inline-start
- 元素必须浮动在 其所在 块容器的 开始一侧。
- 在 文本流向 从左到右
ltr
的脚本中 是左侧,在rtl
脚本中是右侧。
- ⑤ 结束处:
inline-end
- 元素必须浮动 在其所在块容器的 结束一侧
- 在
ltr
脚本中 是右侧,在rtl
脚本中 是左侧。
- ⑹ 浮动的 浏览器支持
- 新的属性值 开始处/结束处 支持度还很差,只有 火狐浏览器支持。
-
示例1: 浮动元素的 定位
- 移出 文档流: 从文档流中 删除 (尽管仍然是 文档的一部分)。
- 当一个元素浮动之后,它会被移出 正常的文档流。
- 停靠位置: 容器的边框/ 另一个浮动元素
- 浮动元素 向左或者向右平移,一直平移直到 碰到了所处的容器的边框,或者碰到 另外一个浮动的元素。
- 移出 文档流: 从文档流中 删除 (尽管仍然是 文档的一部分)。
-
css
* {
margin: 0;
padding: 0;
}
.position {
/* 设置宽高 */
width: 130px;
height: 100px;
text-align: center;
/*文字垂直居中: line-height = height*/
line-height: 100px;
/*让块元素 排成一行,默认是从上到下 一列*/
/*display: inline-block;*/
border: solid 10px;
}
.red {
background-color: indianred;
/*margin: 10px;*/
margin-top: 10px;
}
.green {
background-color: lightseagreen;
margin-top: 10px;
}
/*设置一个 包含块 的样式*/
.posiancestor {
margin: 10px;
border: solid 10px;
padding: 10px;
width: 50%;
height: 500px;
}
/*第3个元素,最中间元素的*/
.middlepos{
border: dotted 2px red;
}
/*浮动元素*/
.floatleft{
float: left;
}
.floatright{
float: right;
}
- html
<!--浮动元素-->
<div class="posiancestor">
<p class="position red floatleft">古人学问无遗力,</p>
<p class="position green floatleft">少壮工夫老始成。</p>
<p class="middlepos">古人在学习上不遗余力,年轻时下功夫,到老年才有所成就。
从书本上得来的知识毕竟不够完善,要透彻地认识事物还必须亲自实践。</p>
<p class="position red floatright">纸上得来终觉浅,</p>
<p class="position green">绝知此事要躬行。</p>
</div>
- ⑴ 默认显示
- ⑵ 浮动 前两个元素
- ① 非浮动元素的位置 和 文本环绕
- ❶ 非浮动元素的 位置
- 前两个元素 左浮动 = 从文档流中删除 = 不占据 文档流中的位置 ⇒ 所以 第3个元素,占据了 最开始的位置
- ❷ 非浮动元素的 文本位置
-
但 第 3个元素的文本,没有直接显示在该位置上 ,而是在 考虑到 该范围内的浮动元素⇒ 非浮动元素的文本, 在浮动元素的 周围环绕。
-
- ❸ 第4个元素的位置
- 排在 第3个元素下方,有一部分区域,和浮动元素重叠,也会影响显示。
- 区域重叠 和 文本显示:
- 可以看到 第4个元素区域,因为和浮动元素的区域 有部分重叠, 文本 也不再是 居中显示的了。
- ❶ 非浮动元素的 位置
- ① 非浮动元素的位置 和 文本环绕
- ⑶ 前两个元素 左浮动,第3,5个元素 不浮动,第4 个元素 右浮动
- 浮动元素 和 不浮动元素的 相对位置
- 不浮动元素,后面的浮动元素, 浮动时的位置,考虑 不浮动元素
- 第 4个元素 右浮动,排在 第3个 不浮动的 块元素的下方。
- 第 5 个元素,不浮动,也按顺序 排 第3个 不浮动的 块元素 的下方。
- 不浮动元素,后面的浮动元素, 浮动时的位置,考虑 不浮动元素
- 浮动元素 和 不浮动元素的 相对位置
- ⑷ 前两个左浮动,后两个右浮动,中间的不浮动
- 浮动元素 和 包含块的高度
- ① 如果 包含块 没有设置固定值
- ❶ 高度 = 没有浮动的内容的高度,受浮动元素的 影响。
- ❷ 如果一个元素里 只有浮动元素,那 包含块的高度 会是
0
。如果你想要它 自适应 ,即 包含 所有浮动元素,需要 自清除 它的子元素。一种方法叫做clearfix,即clear
一个不浮动的::after
伪元素。
- ❶ 高度 = 没有浮动的内容的高度,受浮动元素的 影响。
- ① 如果 包含块 没有设置固定值
- 浮动元素 和 包含块的高度
/*当包含块的高度, 没有设置固定值时, 让包含块的高度 自动调整,适用 其中的浮动的子元素= 符合 需要的高度*/
.posiancestor::after {
/*添加一个 空内容*/
content: "";
/*设为 块元素*/
display: block;
/*清除所有浮动*/
clear: both;
}
- ② 设置 包含块 设置 固定高度
- 高度 = 固定值 ,则 包含块的高度 不会因为 元素浮动而变化。
- 高度 = 固定值 ,则 包含块的高度 不会因为 元素浮动而变化。
2.1 clear 属性: 清除 前面的 浮动元素的浮动 (清除类型 = 前面的浮动元素的类型,搭配 float 属性)
- ⑴ 清除 前面的 浮动元素的浮动:
clear
属性- ① 清除对象: 属性设置 是否清除 ❶ 前面的 + ❷ 浮动元素的 浮动。
- ② 位置下移: 并 把设置 清除浮动的 该元素,位置 下移到 前方的浮动元素的下方。
- ⑵ 清除浮动的 适用对象:
clear
属性适用于 ❶ 浮动元素 和 ❷ 非浮动元素。- Ⅰ. 用于 非浮动元素/非浮动块:
- ① 位置下移:
clear
将 非浮动块的 边框的边界 移动到 所有相关 浮动元素 外边距的边界 的下方。- 边框和外边距 都有宽度时,要区分 区域的内外边界 (清除浮动 是针对 外边界)。
- ② 垂直外边距 合并: 这个非浮动块的 垂直外边距 会折叠/合并。
- 在非浮动元素中 清除浮动: 浮动元素的外边距 和 非浮动元素的外边距 会合并( 成一个)。
- ❶ 浮动元素的外边距
- ❷ 非浮动元素的 外边距
- ❶ 浮动元素的外边距
- 在非浮动元素中 清除浮动: 浮动元素的外边距 和 非浮动元素的外边距 会合并( 成一个)。
- ① 位置下移:
- Ⅱ. 用于 浮动元素
- ① 浮动元素之间: 垂直外边距不合并
- 两个浮动元素的 垂直外边距 将不会合并。
- ❶ 第1个 浮动元素的 外边距:
- ❷ 第2个 浮动元素的 外边距:
- ❶ 第1个 浮动元素的 外边距:
- 两个浮动元素的 垂直外边距 将不会合并。
- ② 移动: 用于浮动元素 ⇒ 底部浮动元素 移到下方。
- 它将 底部的浮动元素的 外边距的边界 移动到 所有相关的 浮动元素的 外边距边界 的下方。
- 它将 底部的浮动元素的 外边距的边界 移动到 所有相关的 浮动元素的 外边距边界 的下方。
- ① 浮动元素之间: 垂直外边距不合并
- ③ 浮动元素的 相对位置
- 这会影响 后面的浮动元素的布局,因为 会让 后面的 浮动元素的位置 无法高于它之前的元素。
- 这会影响 后面的浮动元素的布局,因为 会让 后面的 浮动元素的位置 无法高于它之前的元素。
- ④ 前置浮动 被清除:
- ❶ 清除 谁的浮动:
- 在该元素上 设置清除浮动,清除的 都是 该元素 ❶ 前面的 + ❷ 浮动元素 的浮动
- 被清除的 相关浮动,指的是 在相同的 块级格式化 上下文(区域)中 的 前置/前面的 浮动。
- 这个 “前面” ,指的是 元素 在 html 中的 先后次序,排在前面的元素。
- ❷ 设置清除浮动的 元素的位置: 浮动元素的下方。
- 在该元素上 设置清除浮动,会使该元素 下移, 清除浮动的元素 ⇒ 在浮动元素的下方。
- ❶ 清除 谁的浮动:
- Ⅰ. 用于 非浮动元素/非浮动块:
- 上图涉及代码
- 清除 左浮动
- 两个 左浮动元素,则在第2个浮动元素上,设置 清除左浮动
- 因为第一个元素左边 没有左浮动的元素。
- 对右边的元素 清除右浮动也不对,因为右边的元素,是左浮动的元素。
- 清除 浮动,清除的是 该元素的 前面的 浮动元素的浮动。
- html
<div class="posiancestor">
<p class="position red floatleft1">古人学问无遗力,</p>
<p class="position green floatleft2">少壮工夫老始成。</p>
<p class="middlepos">古人在学习上不遗余力,年轻时下功夫,到老年才有所成就。
从书本上得来的知识毕竟不够完善,要透彻地认识事物还必须亲自实践。</p>
<p class="position red floatright">纸上得来终觉浅,</p>
<p class="position green">绝知此事要躬行。</p>
</div>
- css
* {
margin: 0;
padding: 0;
}
.position {
/* 设置宽高 */
width: 130px;
height: 100px;
text-align: center;
/*文字垂直居中: line-height = height*/
line-height: 100px;
/*让块元素 排成一行,默认是从上到下 一列*/
/*display: inline-block;*/
border: solid 10px;
}
.red {
background-color: indianred;
/*margin: 10px;*/
margin-top: 10px;
}
.green {
background-color: lightseagreen;
margin-top: 10px;
}
/*设置一个 包含块 的样式*/
.posiancestor {
margin: 10px;
border: solid 10px;
padding: 10px;
width: 50%;
height: 500px;
}
.middlepos{
border: dotted 2px red;
/*clear: left;*/
margin: 10px;
}
/*浮动元素*/
.floatleft1{
float: left;
}
.floatleft2{
float: left;
/*两个左浮动元素,则在第2个元素上,清除左浮动 ,因为第一个元素左边 没有左浮动的元素,对右边的元素 清除右浮动也不对,因为右边的元素,是左浮动的元素,清除 浮动,都是清除 前面浮动元素的浮动*/
clear: left;
}
.floatright{
float: right;
}
- ⑶ 清除浮动的 处理方式
CSS1
和CSS2
中: 增加 上外边距- 这是通过 自动为 清除浮动的元素 (设置了
clear
属性的元素), 增加 上外边距 实现的。
- 这是通过 自动为 清除浮动的元素 (设置了
- 在
CSS2.1
中: 增加 清除空间- 会在 清除浮动的元素 上外边距之上 增加 清除空间
- 而 外边距本身 并不改变。
- ⑷ 清除浮动的 语法
clear: none|left|right|both|inherit;
- 包含新的属性值:
none | left | right | both | inline-start | inline-end;
- 包含新的属性值:
/* 关键字值 Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* 全局值 Global values */
clear: inherit;
clear: initial;
clear: unset;
- ⑸ 清除浮动的 属性值
clear
清除的 浮动类型 = 浮动float
对应的类型- ① 允许浮动 (默认值):
none
- 允许 浮动元素 出现在两侧。
- 元素 不会向下移动 以清除 元素前面的浮动元素。
- ② 清除 左浮动:
left
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 左浮动元素
float: left
的 浮动。 - 左浮动元素≠ 在左边的浮动元素 (相对位置)
- 只对 左浮动元素 有效,不是指 左边的浮动元素,指的是 清除
float: left
的左浮动元素的 浮动影响。
- 只对 左浮动元素 有效,不是指 左边的浮动元素,指的是 清除
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 左浮动元素
- ③ 清除 右浮动:
right
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 右浮动元素
float: right;
的 浮动。 - 右浮动元素 ≠ 在右边的浮动元素 (相对位置)
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 右浮动元素
- ④ 清除 左右浮动:
both
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 左浮动元素
float: left
的 浮动+ ❸ 右浮动元素float: right;
的 浮动。
- 该元素 向下移动 以清除 ❶ 元素前面的 + ❷ 左浮动元素
- ⑤ 清除 开始处浮动:
inline-start
- 元素 向下移动 ,以清除 开始处浮动元素的浮动。
- ⑥ 清除 结束处浮动:
inline-end
- 元素 向下移动 ,以清除 结束处处浮动元素的浮动。
- ⑹ 清除浮动的 浏览器支持
- 新属性值 = 开始处/结束处浮动的 清除,支持度 还很差。
- 示例1: 让包含块的高度 自动调整,适用 其中的浮动的子元素
- 浮动元素 和 包含块的高度
- ① 如果 包含块 没有设置固定值
- ❶ 高度 = 没有浮动的内容的高度,受浮动元素的 影响。
- ❷ 如果一个元素里 只有浮动元素,那 包含块的高度 会是
0
。如果你想要它 自适应 ,即 包含 所有浮动元素,需要 自清除 它的子元素。一种方法叫做clearfix,即clear
一个不浮动的::after
伪元素。- 让浮动元素不会 溢出 包含块的 边框
- 让浮动元素不会 溢出 包含块的 边框
- ❶ 高度 = 没有浮动的内容的高度,受浮动元素的 影响。
- ① 如果 包含块 没有设置固定值
- 浮动元素 和 包含块的高度
/*让包含块的高度 自动调整,适用 其中的浮动的子元素*/
.posiancestor::after {
/*添加 空内容*/
content: "";
/*设为 块元素*/
display: block;
/*清除所有浮动*/
clear: both;
}
- 示例2: 清除元素的浮动,让该元素下移。
- html
<!--浮动元素-->
<div class="posiancestor">
<p class="position red floatleft1">古人学问无遗力,</p>
<p class="position green floatleft2">少壮工夫老始成。</p>
<p class="middlepos">古人在学习上不遗余力,年轻时下功夫,到老年才有所成就。
从书本上得来的知识毕竟不够完善,要透彻地认识事物还必须亲自实践。</p>
<p class="position red floatright1">纸上得来终觉浅,</p>
<p class="position green floatright2">绝知此事要躬行。</p>
</div>
- css
.middlepos {
/*处在中间的 = 第3个元素*/
border: dotted 2px red;
margin: 10px;
}
/*浮动元素*/
.floatleft1 {
float: left;
}
.floatleft2 {
float: left;
}
.floatright1 {
float: right;
}
.floatright2 {
float: right;
}
- ⑴ 默认显示
/*浮动元素*/
.floatleft1 {
float: left;
}
.floatleft2 {
float: left;
/*两个左浮动元素,则在第2个元素上,清除左浮动 ,因为第一个元素左边 没有左浮动的元素,对右边的元素 清除右浮动也不对,因为右边的元素,是左浮动的元素,清除浮动,清除的是 前面的 浮动元素的浮动*/
clear: left;
}
- ⑵ 第 2 个元素,设置清除 左浮动 (代码如上)
- 元素下移,清除左边的 第1个元素的 左浮动元素的浮动
- 之所以设置在 第2个元素上,是因为 清除浮动的 前置性 = 只清除前面浮动元素的 浮动。
- 之所以设置在 第2个元素上,是因为 清除浮动的 前置性 = 只清除前面浮动元素的 浮动。
- 元素下移,清除左边的 第1个元素的 左浮动元素的浮动
.floatright1 {
float: right;
/*设置 清除右浮动元素 无效,因为该元素前面 没有右浮动的元素*/
/*clear: right;*/
/*设置 清除左浮动有效,因为 该元素前面 有左浮动的元素 */
clear: left;
}
- ⑶ 第 4 个 右浮动的元素 设置 清除左浮动
- 因为这个浮动元素,前面 有 左浮动的元素。
- 因为这个浮动元素,前面 有 左浮动的元素。
.floatright2 {
float: right;
/*可以设置 清除右浮动,因为前面有 右浮动元素*/
/*clear: right;*/
/*也可以设置 同时 清除 左右浮动,因为前面 同时 有左浮动元素和右浮动元素*/
clear: both;
}
- ⑷ 第 5 个 右浮动的元素 设置 清除右浮动
- 因为这个浮动元素,前面 有 右浮动的元素。
- 因为这个浮动元素,前面 有 右浮动的元素。
.middlepos {
/*中间 第3个元素*/
border: dotted 2px red;
margin: 10px;
/*设置 清除左浮动,因为 前面 有两个左浮动元素*/
clear: left;
/*设置 清除右浮动无效,因为元素前面 没有 右浮动的元素*/
/*clear: right;*/
}
- ⑸ 第 3 个元素,非 浮动元素,设置 清除左浮动(代码如上)
- 因为前面两个元素 是左浮动元素。
- 因为前面两个元素 是左浮动元素。
3. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局)
- 涉及内容 较多,另写了一个博客: 点击 查看详情: 【CSS 定位之 display 属性】
♣ 结束语 和 友情链接
- 参考文档
- 友情链接
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/103439673
- 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!