提示:在特殊情况下,我们需要元素转换,一个元素转换为别的特性。
比如想增加链接<a>触发范围
-
display:block; 块元素(转化)
- display:inline; 行内元素 (转化)
- display:inline-block; 行内块 (转化)
自己代码展示:
<!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>元素模块显示转换</title>
<style>
a {
width: 300px;
/* 设置宽 */
height: 50px;
/* 设置高度 */
background-color: pink;
/* 表示设置底部颜色 */
text-decoration: none;
/* 表示去下划线 */
color: red;
/* 颜色 */
display: block;
/* 这里“displak”表示元素模块转换、这里“block”表示块 */
}
.nav {
width: 200px;
height: 100px;
text-decoration: #333;
display: inline;
/* 这里“inline”表示行转化 */
}
div {
width: 300px;
height: 100px;
display: inline-block;
text-decoration: aquamarine;
/* 这里“inline-block”表示元素模块转化、 */
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<div class="nav">佩奇一家</div>
<div>佩奇</div>
<div>佩奇</div>
</body>
</html>
显示结果:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了在特殊情况下,我们需要元素转换,一个元素转换为别的特性。