首页 > 代码库 > 控制html元素的隐藏问题
控制html元素的隐藏问题
今天，参加了京东的面试，面试官提到了一个关于css控制html元素隐藏的问题，面试的具体情况这里就不提了，现在只对元素的隐藏相关做一个小结（如有不当的地方，还望指正）。
控制元素隐藏的方式，有display:none、visibility:hidden以及overflow:hidden。（面试时我还提到了将height|width设为0的情况）
一、display:none
被隐藏的元素，在页面中不占位，空出的位置会被相邻的元素占用。
<div id="div0" style="width:100px; height:100px;background:blue"></div><div id="div1" style="width:100px; height:100px;background:green;display:none"></div><div id="div2" style="width:200px; height:200px;background:red"></div>
效果图如下：
由图可见，div1即绿色部分空出的位子已被div2占用。
二、visibility:hidden被隐藏的元素，在页面中不显示，但是它仍然占用原来的位置，不会给相邻其他元素机会，说得不好听叫做占着茅坑不拉屎。
<div id="div0" style="width:100px; height:100px;background:blue"></div><div id="div1" style="width:100px; height:100px;background:green;visibility:hidden"></div><div id="div2" style="width:200px; height:200px;background:red"></div>
效果图如下：
由图可见，虽然div1被隐藏，变为不可见状态了，但是其原来占据的位置并未被div2占用。
三、overflow:hidden
可以简单的理解成为剪切，它会把超出元素范围的部分隐藏掉，被隐藏部分，可以简单理解成display:none的应用。
<div id="div1" style="width:100px; height:100px;background:green;padding:20px;overflow:hidden"> <div id="div2" style="width:200px; height:200px;background:red"></div></div>
效果图如下：
如果将overflow去掉,显示如下图：
控制html元素的隐藏问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。