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

display和visibility的区别

2016-07-12 18:05 465 查看

style.visibility和style.display都可以实现对页的隐藏，但visibility要占用域的空间，而display则不占用
将元素display属性设为 block，会在该元素后换行。
将元素display属性设为 inline，会消除元素换行。
将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。
将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。
将元素visibility属性设为 visible，显示元素内容。
占不占用域有什么影响呢？但好像推荐都用display；
<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8"/>
<title>visibility and display different</title>
<style>

.test-display {

display:none;

}

.test-visibility {

visibility:hidden;

}
</style>

</head>

<body>
<h1>Twilight</h1>
<p>if you hard you will be more lucky!</p>
<p>next will display；none!</p>
<p class="test-display">so i will make this paragraph!</p>
<p>next will visibility；hidden；</p>
<p class="test-visibility">this paragraph use visibility；hidden</p>
<p>let's begin!</p>

</body>

</html>

运行结果是：

Twilight

if you hard you will be more lucky!
next will display；none!
next will visibility；hidden；

let's begin!

所以是visibility虽然隐藏了，但是还在占用位置，今天吴老师讲了，所以觉得应该试一下，以前都是看过而已

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航