一、CSS 中 display 属性
网页设计中有时候需要藏起或展现特定内容，这时你该问怎么办？不用急，css中的display属性绝对是你的得力助手！不管是想让它消失不见（Hide），或是露出真面目（Show）甚至改变造型效果，全部都能帮你轻松搞定。而且这个神奇的功能还有各种不同的属性供你挑选~今天我们就一起来看看其中几个常用选项吧～
1. display:none
知道display: none不？这可是一招神奇的CSS属性。用了之后网页元素立马消失得无影无踪，而且还不会占有所在空间。就算特意去查HTML代码也找不到人家！厉害的是，虽然元素隐藏了，但原先占据的空间还是保留着。比如说，加入一段简单的CSS代码，就能让任意元素瞬间消失。
css
.hidden-element {
div {
display: none;
}
display: none;
}
div {
display: block;
}
2. display:block
你们知道吗？ display: block这招最常见了，厉害之处就是能独占一整行，占据父元素所有空间。想要调小点儿尺寸，直接设置它就行，别忘了其他元素只能装内联元素或文字节点，这个功能可是挺强大的。来，代码示例给你看下，我们先用css给div添上个block属性格式：
span {
display: inline;
}
.block-element {
display: block;
div {
display: inline-block;
}
3. display:inline
display:inline就像是让东西们挤在一起过家家，虽然可以调整它们的大小，但要知道，它们可不愿意自己跑去另一行！举个栗子，怎么用CSS把span凑近其他内容？很简单嘛……
.inline-element {
display: inline;
4. display:inline-block
div {
visibility: visible;
}
想让网页元素排得整整齐齐又不让他们占据太多空间吗？试试那个叫”内联块”的新玩意儿！这个奇特的组合兼具了并列排列和指定宽度的优点~想让那该死的div变成内联块，用以下几条简短的CSS命令就好！
.inline-block-element {
display: inline-block;
二、CSS 中 visibility 属性
div {
visibility: hidden;
}
要想显示或隐藏内容，就在visibility属性里面选public的visible或者是恐怖的hidden。轻轻一点，你就能掌控元素的可见度~
1. visibility: visible
Visibility那个，就是默认让元素显示出来咯。但你得记着，设为visible的元素位置是不受CSS排版影响哒，就算暂时不见了，用JavaScript或者别的办法找它还是可以的~
div {
opacity: 1;
}
。
评论0