二、装饰
1.1 认识基线（了解）
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
1.2 文字对齐问题
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的，而是图片底部和文字基线是对齐的
1.3 垂直对齐方式
属性名：vertical-align（设置行内、行内块元素的垂直对齐方式）
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
（拓展补充）项目中 vertical-align 可以解决的问题
1、文本框和表单按钮无法对齐问题，只有行内元素和行内块元素有默认对齐方式的影响
2、input和img无法对齐问题
3、div中的文本框，文本框无法贴顶的问题
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<body>
<div class="father">
<input type="text">
</div>
</body>
4、div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
<style>
.father {
width: 400px;
background-color: pink;
}
</style>
<body>
<div class="father">
<img src="./img/1.jpg" alt="">
</div>
</body>
5、使用line-height让img标签垂直居中问题
注意点：
2.1 光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | |
| text | 工字形，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
3.1 边框圆角
属性名：border-radius
常见取值：数字+px、百分比
原理：
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
3.2 边框圆角的常见应用
画一个正圆：
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半 ->border-radius:50%;
胶囊按钮：
- 盒子要求是长方形
- 设置 ->border-radius:盒子高度的一半
4.1 溢出部分显示效果
溢出部分：指的是盒子内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条.....
属性名：overflow
常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
5.1 元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性：
- visibility:hidden;
- display:none;
区别：
- visibility:hidden;隐藏元素本身，并且在网页中占位置
- display:none;隐藏元素本身，并且在网页中不占位置
注意点：
5.2 元素显示隐藏切换案例
需求：默认son元素隐藏，当鼠标移入father后让son显示的效果
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
display: none;
}
/* father 被悬停的时候 son盒子的效果 */
.father:hover .son {
display: block;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>(案例)导航二维码显示隐藏切换案例
<!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>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
background-color: red;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
Box-sizing: border-Box;
text-align: center;
line-height: 40px;
}
ul li:last-child {
border-right: 0;
}
ul li a {
/* 为了让用户可点击的范围更大，点击整个框就可以跳转而不是点击文字，所以给a
标签设置了高度和宽度，转换成块元素 */
display: block;
height: 40px;
/* background-color: red; */
text-decoration: none;
color: #000;
}
.nav .app {
position: relative;
}
.nav .app .code {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
display: none;
}
/* 当a标签被悬停之后，它的子标签图片显示 */
.nav .app:hover .code {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#" class="app">手机微金所<img src="../img/code.jpg" class="code"></a></li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</body>
</html>（拓展补充）元素整体透明度
属性名：opacity
- 1：表示完全不透明
- 0：表示完全透明
注意点：
(拓展补充)边框合并
场景：让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse:collapse;
<style>
table {
width: 400px;
height: 300px;
border: 1px solid #000;
/* 给table标签设置边框合并 */
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
<body>
<table>
<caption>
<h3>前端与移动开发学员学习情况</h3>
</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小可爱</td>
<td>女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>giegei</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>郭老师</td>
<td>女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总成绩</td>
<td colspan="2">300</td>
</tr>
</tfoot>
</table>
</body>
三、选择器拓展
1.1 链接伪类选择器
场景：常用于选中超链接的不同状态
选择器语法：
| 选择器语法 | 功能 |
|---|---|
| a:link { } | 选中a链接未访问过的状态 |
| a:visited { } | 选中a链接访问之后的状态 |
| a:hover { } | 选中鼠标悬停的状态 |
| a:active { } | 选中鼠标按下的状态 |
注意点：
- 如果需要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写
- 其中，:hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态
（拓展补充）用CSS画三角形技巧（面试题）
场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
实现原理：
- 利用盒子边框完成
实现步骤：
<style>
div {
width: 0;
height: 0;
/* background-color: yellow; */
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid palegreen;
border-left: 100px solid transparent;
}
</style>
<body>
<div></div>
</body>
拓展：通过调整不同边框的宽度，可以调整三角形的形态
2.1 焦点伪类选择器
场景：用于选中元素获取焦点时的状态，常用于表单控件
选择器语法：
效果：
3.1 属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择input标签
选择器语法：
| 选择器 | 功能 |
|---|---|
| E[attr] | 选择具有 attr 属性的 E 元素 |
| E[attr="val"] | 选择具有 attr 属性并且属性值等于 val 的E元素 |
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
