「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
一、垂直对齐方式
1-1、认识基线
基线：浏览器文字类型元素排版中存在用于对齐的基线
可看成X的下边缘：
1-2、文字对齐问题
- 场景：解决行内 / 行内块元素垂直对齐问题
- 问题：当图片和文字在一行中显示时，其实底部不是对齐的
1-3、垂直对齐方式
- 属性名：vertical-align
- 属性值：
| 属性名 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
1-4、vertical-align可以解决的问题
1-4-1、文本框和表单按钮无法对齐问题
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
height: 50px;
/* 自动内减 */
box-sizing: border-box;
/* 方法一：设置垂直对齐方式 */
vertical-align: bottom;
/* 方法二：设置浮动 */
/* float: left; */
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜索">
</body>
</html>
- 效果 未使用vertical-align
使用了vertical-align: bottom
1-4-2、input和img无法对齐问题
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./images/111.jpeg" alt=""><input type="text">
</body>
</html>
！为img添加vertical-align: bottom;
- 效果 未使用vertical-align
使用了vertical-align: bottom
1-4-3、div中的文本框，文本框无法贴顶的问题
- 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
</div>
</body>
</html>
- 效果： 未使用vertical-align
使用vertical-align: top
1-4-4、div不设高度由img标签撑开，此时img标签下面会存在额外间隙的问题
- 解决方式一：为img设置vertical-align只要不为baseline即可
- 解决方式二：设置img转换成块级元素
- 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 解决方法一：改变img标签的垂直对齐方式不为baseline即可 */
vertical-align: bottom;
/* 解决方法二：设置img转换成块级元素 */
/* display: block; */
}
</style>
</head>
<body>
<div class="father">
<img src="./images/111.jpeg" width="300" alt="">
</div>
</body>
</html>
- 效果： 未解决之前
解决后
1-4-5、使用line-height让img标签垂直居中问题
给父元素设置高度=行高时，对于其中的img来说并无法居中，只是上面会产生一点空隙：
结合给父元素设置height = line-height后，再给img添加vertical-align: middle即可解决
- 代码示例
<!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>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src="./images/111.jpeg" width="300" alt="">
</div>
</body>
</html>
二、光标类型
用于设置鼠标光标再元素上时显示的样式
- 属性名：cursor
- 常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值。通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
三、边框圆角
- 属性名：border-radius
- 常见取值：数字+px、百分比
- 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
- 如：border-radius: 10px（为左上角、右上角、右下角、左下角设置边框圆角为10px）
- 如：border-radius: 10px 20px; （为左上角、右下角设置边框圆角为10px；右上角与左下角设置边框圆角为20px）
- 如：border-radius: 10px 20px 30px;（为左上角设置边框圆角为10px；右上角为20px；右下角为30px；左下角没有，看对角即右上角，所以为20px）
- 如：border-radius: 10px 20px 30px 40px;（分别为左上、右上、右下、左下圆角设置为10px、20px、30px 、40px）
- 常见应用
-
画一个正圆：
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半（border-radius: 50%）
-
胶囊按钮：
- 盒子是长方形
- 设置边框圆角是盒子高度的一半
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 画一个正圆 */
.one {
/* 1、盒子必须是正方形 */
width: 300px;
height: 300px;
/* 2、设置边框圆角为盒子宽高的一半 */
/* border-radius: 150px; */
border-radius: 50%;
background-color: orange;
margin-bottom: 20px;
}
/* 画一个胶囊按钮 */
.two {
/* 1、盒子要求是长方形 */
width: 300px;
height: 100px;
/* 2、设置边框圆角为盒子高度的一半 */
border-radius: 50px;
border: 1px solid orange;
text-align: center;
line-height: 100px;
font-size: 20px ;
color: orange;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
效果：
四、overflow溢出部分显示效果
溢出部分：指的是盒子内容部分超出盒子范围的区域
- 场景：用于控制内容溢出部分的显示效果，如显示、隐藏、出现滚动条
- 属性名：overflow
- 常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论内容是否溢出，都显示滚动条 |
| auto | 根据内容是否溢出，来显示 / 隐藏滚动条 |
五、元素本身隐藏
- 场景：让元素本身不可见
- 常见属性：
- visibility: hidden 隐藏元素本身，并且在网页中占位置
- display: none 隐藏元素本身，并且在网页中不占位置
- 常用场景：
常用display来进行元素显示/隐藏的切换（display: none / display: block）
六、元素整体透明度
- 场景：让元素整体（包括其中的内容）一起边透明
- 属性名：opacity
- 属性值：0~1之间的数字
- 1： 完全不透明
- 0：完全透明
- 注意点：
- opacity会让元素整体透明，包括里面的内容：如其中的文字、子元素等
七、边框合并
- 场景：让相邻表格边框进行合并，得到细线边框效果
- 代码：border-collapse: collapse;
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 400px;
height: 300px;
border: 1px solid #000;
/* 边框合并：border-collapse */
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- border="1" width="400" height="300"cellspacing="0" -->
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>4</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</tfoot>
</table>
</body>
</html>
