Question

display：none和visibility：hidden的区别

Answer 1

-
数容易CSS属性displayvisibility混淆看似没同其实差别却

visibility属性用确定元素显示隐藏用visibility="visible|hidden"表示（visible表示显示hidden表示隐藏）

visibility设置"hidden"候元素虽隐藏仍占据原所位置例：

第行文本触发"hidden""visible"属性注意第二行变化 visibility保留元素位置所虽第行看见位置第二行内容移

[Ctrl+A 全部选择进行拷贝 提示：先修改部代码再点击运行]

注意元素隐藏能再接收其事件所第段代码其设"hidden"候能再接收响应事件通鼠标点击第段文本令其显示

另面display属性点同visibility属性隐藏元素保持元素浮位置display实际设置元素浮特征

display设置block(块)容器所元素作单独块像元素点放入页面(实际设置display:block使其像工作

display设置inline使其行元素inline---即使普通块元素组合像输流

面看我实例代码效：

蓝色文字点击查看效.

[Ctrl+A 全部选择进行拷贝 提示：先修改部代码再点击运行]

display设置：none元素实际页面移走面所元素自跟填（应用display: none;元素相于消失visibility: hidden;则表示隐藏位置）

display 属性别block, inline, none 值及使用visibility: hidden;情况调试示例：

display 属性别block, inline, none 值及使用visibility: hidden;情况调试

This is a SPAN in a sentence.

• 元素设 block该元素换行
• 元素设 inline消除元素换行
• 元素设 none隐藏该元素内容