display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同
1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。
2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。
<body>
<div style="background-color:#63A35C">
<ol >
<li>元素</li>
<li style="visibility: hidden;">元素2</li>
<li>元素</li>
<li>元素</li>
</ol>
</div>
<div style="background-color: #4390EE;">
<ol>
<li>元素</li>
<li style="display: none;">元素2</li>
<li>元素</li>
<li>元素</li>
</ol>
</div>
</body>运行截图：
3.这里补充一下里面涉及到了回流和重绘，给大家普及一下回流和重绘的知识，对了解网页和以后写网页有很有帮助
回流：网页中元素的大小和位置发生改变时，需要重新对网页的结构进行布局，这个过程就被称为回流（网页最少会发生一次回流，网页最开始被渲染的时候）。
例如：块元素大小和位置被改变。
浮动后高度塌陷
重绘：只改变样式，不会影响网页的布局，只改变样式。
改变字体的颜色，字体的粗细，等等...
总之， 不会影响页面的布局
扫一扫
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
