css之元素显示方式的转换（display的用法）

最新推荐文章于 2024-05-03 12:12:21 发布

流年lh

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量2.2k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/m0_37302495/article/details/72690904

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS元素的显示方式的转换

1、隐藏元素

（1）display样式的none
<style type="text/css">
#p1{
display: none;
}
</style>
</head>
<body>
<p id="p1">段落1</p>
<p>段落2</p>
</body>

释放该元素所占的空间。

（2）visibility定义为hidden
<style type="text/css">
#p1{
visibility: hidden;
}
</style>
</head>
<body>
<p id="p1">段落1</p>
<p>段落2</p>
</body>

visibility 的hidden属性，它虽然也能隐藏元素但是，并不释放占用的空间

因此，一般情况下使用display的none值将元素隐藏。

例1：
<style type="text/css">
ul{
list-style-type: none;
}
li{
font-size: 20px;
font-weight: bold;
background-color: gray;
width: 100px;
}
.two li,.two{
font-size: 16px;
font-weight: normal;
background-color: yellow;
}
.two{
display: none;
}

</style>
</head>
<body>
<ul>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>

2、display属性（block）

将元素将显示为块级元素，此元素前后会带有换行符。（一旦某个元素以块级元素显示后，那么它就可以设置块级元素的样式）

如，span元素原来是行内元素，将其的display属性定义为block后，该元素显示变成块级元素，具有块级元素的特征。
span{
width: 50px;
height: 50px;
background-color: yellow;
display: block;
}

例2：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type: none;
}
li{
font-size: 20px;
font-weight: bold;
background-color: gray;
width: 100px;
}
.two li,.two{
font-size: 16px;
font-weight: normal;
background-color: yellow;
}
.two{
display: none;
}
.one>li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="one">
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>

3、display属性（inline）
设置display属性值为inline后，元素会被显示为内联元素，元素前后没有换行符。
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div>div</div><div>div</div>
</body>

4、display属性（inline-block）
inline-block属性值可以将元素转换成行内块元素。
应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: yellow;
display:inline-block;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>div</div><div>div</div>
</body>

流年lh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之元素显示方式的转换（display的用法）

CSS元素的显示方式的转换1、隐藏元素（1）display样式的none#p1{display: none;}段落1段落2释放该元素所占的空间。（2）visibility定义为hidden#p1{visibility: hidden;}段落1段落2visibility 的hi
复制链接

扫一扫