您的位置：首页 > Web前端 > CSS

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

2017-05-24 18:41 537 查看
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{<
4000
br />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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航