display可以将元素变为内联元素,也可以将元素变为块元素
一、display:inline 将元素变为内联元素(同一行显示块元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
background: red;
display: inline;
}
.box2 {
background: blue;
display: inline;
}
</style>
</head>
<body>
<div class="box1">
内联元素
</div>
<div class="box2">
内联元素
</div>
</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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
background: red;
display: block;
width: 100px;
height: 100px;
}
.box2 {
background:blue;
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="" class="box1">变为块元素</a>
<a href="" class="box2">变为块元素</a>
</body>
</html>
如图所示：
注意：内联元素变为块级元素后,独占一行,并且可以设置宽高。
三、display：inline-block 将元素设置为内联-块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
background: red;
display: inline-block;
width: 100px;
height: 100px;
}
.box2 {
background:blue;
display: inline-block;
width: 100px;
height: 100px;
}
.box3 {
background:pink;
display: inline-block;
width: 100px;
height: 100px;
}
.box4 {
background:green;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="" class="box1">变为内联-块元素</a>
<a href="" class="box2">变为内联-块元素</a>
<hr>
<div class="box3">
变为内联-块元素
</div>
<div class="box4">
变为内联-块元素
</div>
</body>
</html>
如图所示：
注意：将元素设置为inline-block后,元素既是内联元素也是块元素,在一行显示，支持设置宽高。
四：display:inline-block 带来的问题:元素间的换行会被解析,元素间有个大约4~5px。
解决方案 ：
1. 删除换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
background: red;
display: inline-block;
width: 100px;
height: 100px;
}
.box2 {
background:blue;
display: inline-block;
width: 100px;
height: 100px;
}
.box3 {
background:pink;
display: inline-block;
width: 100px;
height: 100px;
}
.box4 {
background:green;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="" class="box1">变为内联-块元素</a><a href="" class="box2">变为内联-块元素</a>
<hr>
<div class="box3">
变为内联-块元素
</div>
<div class="box4">
变为内联-块元素
</div>
</body>
</html>
如图所示：
2. 给父元素字体大小改为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
background: red;
display: inline-block;
width: 100px;
height: 100px;
}
.box2 {
background:blue;
display: inline-block;
width: 100px;
height: 100px;
}
.box {
font-size: 0px;
}
.box3 {
background:pink;
display: inline-block;
width: 100px;
height: 100px;
font-size: 14px;
}
.box4 {
background:green;
display: inline-block;
width: 100px;
height: 100px;
font-size: 14px;
}
</style>
</head>
<body>
<a href="" class="box1">变为内联-块元素</a>
<a href="" class="box2">变为内联-块元素</a>
<hr>
<div class="box">
<div class="box3">
变为内联-块元素
</div>
<div class="box4">
变为内联-块元素
</div>
</div>
</body>
</html>
如图所示：
