元素转换
-
属性名: display
- 属性值:
- none 隐藏(不占位)
- block 转为 块级元素
- inline 转为 行级元素(内联元素)
- inline-block 转为 行块级元素(内联-块元素)
- table 转为 块级表格
- table-cell 转为 td单元格
- 属性值:
-
属性名: visibility
- 属性值:
- hidden 隐藏(占位)
- visible 显示
- 属性值:
<style>
.box{width: 100px;height: 100px;}
.box1{background: #E99D9D;}
.box2{background: #77ADF0;}
.box3{background: #79F67C; width: 150px; height: 150px;}
.box2{
/* display: none; */
visibility: hidden;
}
.b1{
width: 300px;
height: 100px;
background: pink;
display: inline;
}
.i1{
width: 300px;
height: 100px;
background: skyblue;
}
.b2{
width: 300px;
height: 100px;
background: pink;
}
.i2{
width: 300px;
height: 100px;
background: skyblue;
display: block;
}
.b3{
width: 300px;
height: 100px;
background: pink;
display: inline-block;
}
.i3{
width: 300px;
height: 100px;
background: skyblue;
display: inline-block;
}
</style>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<hr>
<h2>All grown-ups</h2>
<div class="b1">All grown-ups were once children…but only a few of them remember it.</div>
<span class="i1">所有的人都曾经是个孩子,可惜只有很少的一些人记得这一点。</span>
<hr>
<div class="b2">All grown-ups were once children…but only a few of them remember it.</div>
<span class="i2">所有的人都曾经是个孩子,可惜只有很少的一些人记得这一点。</span>123
<hr>
<div class="b3">All grown-ups were once children…but only a few of them remember it.</div>
<span class="i3">所有的人都曾经是个孩子,可惜只有很少的一些人记得这一点。</span>
<hr>