块级元素、行内元素、行内块级元素以及转换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
display: inline; /*把块级元素转换为行内元素*/
}
span {
width: 100px;
height: 100px;
background-color: purple;
display: block; /*把行内元素转换为块级元素*/
}
a{
width: 100px;
height: 100px;
background-color: skyblue;
display: inline-block; /*把行内元素转换为行内块元素*/
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<a href="#">百度</a>
<a href="#">谷歌</a>
<a href="#">百度</a>
<a href="#">谷歌</a>
</body>
</html>