二、装饰
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标签垂直居中问题
注意点：
- 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
- 如果需要让块元素一行显示，推荐优先使用浮动完成效果
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;隐藏元素本身，并且在网页中不占位置
注意点：
- 开发中经常会通过display属性完成元素的显示隐藏切换
- display:none;(隐藏)、display:block;(显示)
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
属性值：0~1之间的数字
- 1：表示完全不透明
- 0：表示完全透明
注意点：
- opacity会让元素整体透明，包括里面的内容，如：文字、子元素等....
(拓展补充)边框合并
场景：让相邻表格边框进行合并，得到细线边框效果
代码：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画三角形技巧（面试题）
场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
实现原理：
- 利用盒子边框完成
实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框（盒子四周的每一个边框都是一个梯形）
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
<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元素 |
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
