常用的display属性
block、inline、inline-block的区别
<!DOCTYPE html>
<html lang="en">
<head>
<title>display</title>
<style>
div{
width: 100px;
height: 100px;
}
.inline{
background-color: aqua;
display: inline;
}
.inlineblock{
background-color: aquamarine;
display: inline-block;
}
.block{
background-color: blue;
display: block;
}
</style>
</head>
<body>
<div class="inline">
inline
</div>
<div class="inlineblock">
inline-block
</div>
<div class="block">
block
</div>
</body>
</html>
inline
前后无换行,width和height对其不起作用,文本的内容决定了它的长度
inline-block
前后无换行,而且可以指定长宽,所以,多元素并列一行,又想指定长宽,该属性较方便
block
前后换行,可指定长宽