在网页设计中，CSS样式的显示和隐藏是很常见的设计需求。通过给指定的元素设置display属性，可以让元素在页面中显示或者隐藏。在CSS中，display属性可以设置为以下几种值。
1. Display:none
这个属性值可以让元素在页面中完全消失，相当于元素被从文档流中移除。在浏览器中看不到这个元素的任何影响，也就是它不占据空间，不会与其他元素发生重叠，更不会响应用户的交互事件。
下面是一个示例：
p.hidden {
display: none;
}这个样式将所有class为hidden的段落隐藏起来。
2. Display:block
这个值将会让元素独占一整行，并且会按照文档流的顺序排列。它会在前面和后面各自放置一个换行符，让元素完全区分成一块。
下面是一个示例：
p.block {
display: block;
}这个样式将所有class为block的段落呈现为一个块元素。
3. Display:inline
这个值将会让元素按照本来的宽度排列，不会使元素在页面中独占一行，也不会在前面和后面添加任何换行符。inline元素是可以嵌套在block元素中的，因为它们只占据自己的行内空间。
下面是一个示例：
p.inline {
display: inline;
}这个样式将所有class为inline的段落呈现为一个内联元素。
4. Display:inline-block
这个值将会让元素按照inline将位于同一行，同时还能够自由设置内部等同于块元素的宽高属性，以及边距、边框、背景等样式。
下面是一个示例：
p.inline-block {
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
margin-right: 10px;
}这个样式将所有class为inline-block的段落呈现为一个内联块元素，它的宽高为50px，并且带有一个绿色背景。
总之，通过设置display属性，我们可以将元素在页面中随意切换显示或隐藏。怎样使用它取决于你的具体需求。
本文链接：https://my.lmcjl.com/post/18644.html
展开阅读全文
4 评论