display
inline:以行级元素渲染标签
block:以块级元素渲染标签
inline-block:同时以行级和块级元素渲染标签
inherit:继承
none:可用于把当前元素隐藏
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 300px;
background-color: orchid;
}
.div2{
width: 400px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果图：
此时两个div为块级元素，不能同行显示
然后我们给这两个div加上display: inline属性
使其成为行级元素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 300px;
background-color: orchid;
display: inline;
}
.div2{
width: 400px;
height: 100px;
background-color: orange;
display: inline;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
此时两个div没有了高度 我们看不到这两个div了；
接着我们在给他加上display: inline-block属性
此时两个div既具有行级元素的特点又具有块级元素的特点，
此时两个div既具有高度 又可以同行显示
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 300px;
background-color: orchid;
display: inline-block;
}
.div2{
width: 400px;
height: 100px;
background-color: orange;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果图：
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
