本文深入探讨了CSS定位，包括静态、相对、绝对、固定定位及其应用场景，详细阐述了子绝父相定位策略。同时，介绍了装饰技巧，如垂直对齐、光标样式、边框圆角、overflow控制、元素透明度和画三角形等，以及选择器拓展知识。
Web前端系列技术之CSS基础定位+装饰
今天主要介绍的是关于网页的CSS定位和装饰，下面就是CSS非常重要的三个进阶知识点：
十八、CSS定位
十九、装饰
二十、选择器拓展
十八、CSS定位
网页中常见的布局方式主要分为：标准流、浮动和定位；
-
标准流：
块级元素独占一行 →垂直布局；
行内元素/行内块元素一行显示多个 →水平布局； -
浮动：
可以让原本垂直布局的 块级元素变成水平布局； -
定位：
可以让元素自由的摆放在网页的任意位置；
一般用于盒子之间的层叠情况；
1. 定位的基本介绍
① 为了解决盒子与盒子之间的层叠问题（定位之后的元素层级最高，可以层叠在其他盒子上面）；
② 可以让盒子始终固定在屏幕中的某个位置；
2. 定位的基本使用
- 设置定位方式
属性名：position；
常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位（相当于未定位） | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
- 设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则 （离哪边近用哪个）
注意：属性值也可以写成百分比的形式；
3. 静态定位
介绍：是定位属性的默认值，也就是所谓的标准流；
代码段：position：static；
注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动；
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定；
4. 相对定位
介绍：属于自恋型定位，相对于自己之前的位置进行移动；
代码段：position：relative；
特点：
- 需要配合方位属性实现移动；
- 相对于自己原来位置进行移动；
- 在页面中占位置 → 没有脱标（脱标：就是脱离标准流的控制）；
应用场景：
- 配合绝对定位使用，构成
子绝父相的定位效果； - 用于小范围的移动；
5. 绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动；
代码段：position：absolute；
特点：
- 需要配合方位属性实现移动；
- 默认相对于浏览器可视区域进行移动；
- 在页面中不占位置 → 已经脱标；
应用场景：
- 配合绝对定位使用，构成
子绝父相的定位效果；
注意：绝对定位相对于谁移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
6. 子绝父相
场景：让子元素相对于父元素进行自由移动；
含义：
• 子元素：绝对定位
• 父元素：相对定位
子绝父相好处：
• 父元素是相对定位，则对网页布局影响最小；
拓展：
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
原因：父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局；
案例：
案例①：子绝父相水平居中案例
- 子绝父相
- 先让子盒子往右移动父盒子的一半
• left：50% - 再让子盒子往左移动自己的一半
• 普通做法：margin-left：负的子盒子宽度的一半；
缺点：子盒子宽度变化后需要重新改代码；
• 优化做法：transform：translateX(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码；
案例②：子绝父相水平垂直都居中案例
- 子绝父相
- 让子盒子往右走大盒子一半
• left：50% - 让子盒子往下走大盒子一半
• top：50% - 让子盒子往左+往上走自己的一半
•transform：translate(-50%，-50%)；
7. 固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动；
代码段：position：fixed；
特点：
- 需要配合方位属性实现移动；
- 相对于浏览器可视区域进行移动；
- 在页面中不占位置 → 已经脱标；
应用场景：
- 让盒子固定在屏幕中的某个位置；
8. 四大定位特点：
9. 元素的层级关系
9.1 元素层级问题
不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同；
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素；
9.2 更改定位元素的层级
场景：改变定位元素的层级；
属性名：z-index；
属性值：数字（数字越大，层级越高）；
十九、装饰
1. 垂直对齐方式
对于对齐方式，首要了解的知识就是【基线】，基线就是浏览器文字类型元素排版中存在用于对齐的基线（baseline）
场景：解决行内/行内块元素垂直对齐问题；
属性名：vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
注意：
• 但凡处理行内块，或者文字对齐，都要用到vertical-align！
• 但学习浮动之后，不推荐使用本方式解决行内块元素让div一行中显示，因为可能会出现垂直对齐问题;
• 推荐优先使用浮动完成效果;
那么所谓的对齐问题就分为五类：
1.1 文本框和表单按钮无法对齐问题
HTML代码：
<input type="text"><input type="button" value="搜索">
CSS代码：
input {
height: 50px;
}
可以从图中看出来，两个文本框高度无法对齐；
解决方法：
CSS代码：
input {
height: 50px;
box-sizing: border-box; /* 解决边框撑开元素，改变元素大小的问题 */
vertical-align: middle;/* 解决中部对齐问题 */
}
1.2 input和img无法对齐问题
HTML代码：
<img src="../images/1.jpg" alt=""><input type="text">
可以从图中看出来，图片和文本底部无法对齐；
解决方法：
CSS代码：
img {
vertical-align: bottom;/* 解决底部对齐问题 */
}
1.3 div中的文本框，文本框无法贴顶问题
HTML代码：
<div class="father">
<input type="text">
可以从图中看出来，块级元素和文本框底部无法对齐；
解决方法：
注意：给子级元素加vertical-align属性；
CSS代码：
input {
vertical-align: top;/* 解决顶部对齐问题 */
}
1.4 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
HTML代码：
<div class="father">
<img src="../images/1.jpg" alt="">
可以从图中看出来，块级元素和图片底部无法对齐；
解决方法（两种方式）：
CSS代码：
img {
/* 原因：浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
/* 方法①：vertical-align: middle; */
display: block; /* 方法②： */
/* 采用这个方式就会促使浏览器认为这是一个图片标签，而非文字，所以就不存在基线对齐了，因此也就完美处理问题了 */
}
1.5 使用line-height让img标签垂直居中问题
HTML代码：
<div class="father">
<img src="../images/1.jpg" alt="">
父级CSS代码：
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
}
可以从图中看出来，块级元素和图片水平垂直无法对齐；
解决方法（这个情况在工作中用到的几率很大）：
CSS代码：
img {
vertical-align: middle;
}
2. 光标类型
场景：设置鼠标光标在元素上时显示的样式；
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字（可以复制） |
| move | 十字光标，提示用户可以移动 |
3. 边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验；
属性名：border-radius
常见取值：数字+px 、百分比；
原理：
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
① 画一个正圆：
- 盒子必须是正方形；
- 设置边框圆角为盒子宽高的一半 →
border-radius:50%；
② 胶囊按钮：
- 盒子要求是长方形；
- 设置 →
border-radius：盒子高度的一半；
4. overflow溢出部分显示效果
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域；
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow
常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
5. 元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏；
常见属性：
visibility：hidden（工作中不太常用）display：none
区别：
- visibility：hidden 隐藏元素本身，并且在网页中 占位置；
- display：none 隐藏元素本身，并且在网页中 不占位置；
注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换；
• display：none；（隐藏）、 display：block；（显示）
6. 元素整体透明度（常配合JS使用）
场景：让某元素整体（包括内容）一起变透明；
属性名：opacity
属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
7. 边框合并
场景：让相邻表格边框进行合并，得到细线边框效果；
代码：border-collapse：collapse；
8. 用CSS画三角形技巧（常见面试题）
场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成；
实现原理：
• 利用盒子边框完成；
实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
拓展： 通过调整不同边框的宽度，可以调整三角形的形态；
二十、选择器拓展
1. 链接伪类选择器
场景：常用于选中超链接的不同状态；
选择器语法：
| 选择器语法 | 功能 |
|---|---|
| a：link { } | 选中a链接 未访问过的 状态 |
| a：visited { } | 选中a链接 访问之后 状态 |
| a：hover { } | 选中a链接 鼠标悬停 状态 |
| a：active { } | 选中a链接 鼠标按下 状态 |
注意点：
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写；
• :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态；
2. 焦点伪类选择器
场景：用于选中元素获取焦点时状态，常用于表单控件；
选择器语法：选择的元素 : focus { }
效果：
• 表单控件获取焦点时默认会显示外部轮廓线（需要点击以后才能实现），如图第一个文本输入框所示：
3. 属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法：
| 选择器 | 功能 |
|---|---|
| E [ attr ] | 选择具有 attr 属性的 E 元素 |
| E [ attr = “val” ] | 选择具有 attr 属性并且属性值等于val的 E 元素 |
代码段及演示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
效果：
总结
◆ 能够说出 定位 的常见应用场景
◆ 能够说出 不同定位方式 的特点
◆ 能够使用 子绝父相 完成元素水平垂直案例
◆ 能够写出三种常见的 光标类型（cursor）
◆ 能够使用 圆角边框 属性完成 正圆 和 胶囊按钮 效果
◆ 能够说出 display 和 visibility 让 元素本身隐藏 的区别
以上就是所要介绍的CSS的第五节内容，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！
扫一扫
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
