目录
元素的display显示方式有多种,隐藏、块级、内联、内联-块级
1.隐藏
通过display的方式隐藏一个元素
display:none; 使得被选择的元素隐藏,并且不占用原来的位置
<style>
div.d{
display:none;
}
</style>
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
2.块级
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
div,span{
border: 3px solid lightgray;
margin: 10px;
width: 200px;
height: 100px;
}
.d{
display: block;
}
<div>div是块元素</div>
<span id="">
span是内联元素,不自动换行
</span>
<span id="">
span是内联元素,不自动换行
</span>
<span id="">
span是内联元素,不自动换行
</span>
<span id="">
span是内联元素,不自动换行
</span>
<span class="d">被改造成块元素的span</span>
3.内联
display:inline; 表示内联元素
内联元素前后没有换行,并且在其上的width和height也无效。 其大小由其中的内容决定
div默认是块级元素
span默认是内联元素
<div style="display: inline;">
这是一个块元素被改成内联元素的例子
</div>
4.内联-块级
内联是不换行,但是不能指定大小
块级时能指定大小,但是会换行
有时候,需要元素处于同一行,同时还能指定大小,这个时候,就需要用到内联-块级 inline-block
<style>
span{
display:inline-block;
border: 1px solid lightgray;
margin:10px;
width:100px;
}
</style>
像这样 ,每个都能设置宽度 ,同时还能在同一行。
<br>
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>
5.其他显示方式
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
(1)list-item
div{
display: list-item;
border: 3px solid lightblue;
}
<div id="">
Amecia
</div>
<div id="">
China
</div>
<div id="">
Russia
</div>
<div id="">
Germen
</div>
<div id="">
Austria
</div>
<div id="">
England
</div>
(2) table
div{
display:table ;
border: 3px solid lightblue;
}
html文件没变,只变了CSS
(3)内联-表格 前后不换行的表格
div{
display:inline-table ;
border: 3px solid lightblue;
}
(4)单元格 table-cell
div{
display:table-cell ;
border: 3px solid lightblue;
}