css隐藏元素的四种实现方法以及之间的区别是什么?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
1。可见性:隐藏,设置元素隐藏
代码实例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>元素隐藏——可见性:hidden
& lt; style>
.demo {
宽度:800 px;
身高:200 px;
保证金:50 px汽车;
}
跨度{
可见性:隐藏;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>元素隐藏1——可见性:隐藏起来,元素隐藏2——可见性:隐藏起来,元素隐藏3——可见性:hidden
& lt; p>元素隐藏1——可见性:隐藏,& lt; span>元素隐藏2——可见性:hidden元素隐藏3——可见性:hidden
& lt;/div>
& lt;/body>
& lt;/html> 效果图:
能见度属性规定元素是否可见,将它的值设为隐藏只能从视觉上隐藏元素,被隐藏的元素本身依然占据它自己的位置并对我们的网页布局起作用。
2。透明度:0,设置元素隐藏
代码实例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>元素隐藏——不透明度:0 & lt;/title>
& lt; style>
.demo {
宽度:800 px;
身高:200 px;
保证金:50 px汽车;
}
跨度{
透明度:0;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>元素隐藏1——不透明度:0元素隐藏2——不透明度:0元素隐藏3,不透明度:0 & lt;/p>
& lt; p>元素隐藏1——不透明度:0,& lt; span>元素隐藏2——不透明度:0 & lt;/span>,元素隐藏3,不透明度:0 & lt;/p>
& lt;/div>
& lt;/body>
& lt;/html> 效果图:
透明度属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(边界框)而设计的。这意味着将不透明度设为0只能从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的可见性:隐藏相似。
3。显示:没有,设置元素隐藏
代码实例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>元素隐藏——显示:none
& lt; style>
.demo {
宽度:800 px;
身高:200 px;
保证金:50 px汽车;
}
跨度{
透明度:0;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>元素隐藏——显示:没有,元素隐藏——显示:没有,元素隐藏——显示:none
& lt; p>元素隐藏——显示:没有,& lt; span>元素隐藏——显示:none元素隐藏——显示:none
& lt;/div>
& lt;/body>
& lt;/html> 效果图:
显示属性依照词义真正隐藏元素。将显示属性设为没有确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦显示设为没有任何对该元素直接打用户交互操作都不可能生效。
4。位置:绝对的,设置元素隐藏
代码实现:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>元素隐藏——位置:absolute
& lt; style>
.demo {
宽度:800 px;
身高:200 px;
保证金:50 px汽车;
}
跨度{
位置:绝对的;
前:-9999像素;
左:-9999 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
& lt; p>元素隐藏1——位置:绝对的,元素隐藏2——位置:绝对的,元素隐藏3,位置:absolute
& lt; p>元素隐藏1——位置:绝对& lt; span>元素隐藏2——位置:absolute
