行元素不能设置大小 ,如span
只有块元素能设置大小,如div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 练习网 </title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
a {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>块元素</div>
<a href="#">行元素</a>
</body>
</html>
但是通过display:block
可以将其转化为块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 练习网 </title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
a {
width: 100px;
height: 100px;
background-color: pink;
display: block
}
</style>
</head>
<body>
<div>块元素</div>
<a href="#">行元素</a>
</body>
</html>
也可以转化为行内块元素
当然也可以使用display:inline
转换为行元素
实例
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 练习网 </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">java</a>
<a href="#">HTML</a>
<a href="#">C++</a>
<a href="#">C</a>
<a href="#">Python</a>
<a href="#">C#</a>
</body>
</html>
css代码
/* 整体 */
body {
font: 16px/28px "Microsoft YaHei";
}
/* a 标签 */
a {
display: block;
text-decoration: none;
width: 260px;
height: 40px;
background-color: grey;
color :#ffffff;
font-size: 14px;
text-indent: 2em;
line-height: 40px;
}
/* a经过变色 */
a:hover {
background-color: #ff6700;;
}