要让网页设计版面看着顺眼些，关键在于让某些元素变得不那么抢眼。这可以通过CSS里的display、visibility、opacity、position或clip这些属性来实现，或者用HTML里的hidden属性也是个好办法。那怎么操作？别急，我马上告诉你！
使用CSS的display属性
嘿~跟你说，CSS里那个显示属性真的超级实用！懂了没？只要加点”none”，元素瞬间就会消失得一干二净，不管你之前放哪儿了。给你打个比方，要是你偶尔想在页面上隐藏点啥，直接用这招儿就行。
记住，如果你把某个元素用display: none;给藏起来的话，那这个元素就在页面上消失，设计也不受影响。但得注意，这样隐藏后，用JavaScript是操作不了或查询不到的！
别忘了用JavaScript也能搞些花样，就比如改个元素的“display”属性就能随意地隐藏或展示。你说了算，想让用户看见什么还是看不到什么都行！
使用CSS的visibility属性
visibility和display可不一样，它就是让你的东西能不能被看见，不管你怎么藏，它都会占据那里。当你把某个元素的 visibility设为 hidden时，它马上就消失了，但是它所占的空白页面可一点没减少！
#element-to-hide {
display: none;
}
用这个办法，就像把珍贵的东西藏起来不让人看见，比如那个网页上的透明度:隐藏；这个功能很实用！能让你想出现的时候才出现，又不会破坏页面的美观，关闭后还会恢复正常。
记得，设置成hidden是真的隐藏掉了，尽管还占据空间。做响应式布局的时候别忘记这点，否则整个页面就丑了。
使用CSS的opacity属性
你看见opacity属性了？它就是调节元素透明度的神器。调到0的话，元素就能彻底隐形
嘛意思？就是把网页搞得漂亮点儿，好玩点儿呗！用css3的过渡或动画，加点渐变色和进出效果就能搞定。
#element-to-hide {
visibility: hidden;
}
记住设置opacity的时候，上头有啥下头也不能忽略，特别是小朋友跟那个角落。这个属性会影响元素和事件穿行，用不用得看具体情况。
使用CSS的position和clip属性
亲们猜怎么着？想隐藏元素，可不仅仅靠 display、visibility 或opacity 这几种方法~我们还能用 position 和 clip 这俩牛逼哄哄的 CSS 属性控制它在哪里露脸，以及呈现给用户哪些部分。
定位画框是个神奇的工具，能把你不想露出来的东西隐藏掉，让别人只看见你想展示的部分~用得最多的就是快速裁剪或滑动查看图片。
#element-to-hide {
opacity: 0;
}
记住在搞布局、剪辑之类的时候，得先找好老爸（父容器）在哪儿（别忘了动起来~），然后得关注下浏览器兼容性和响应式设计这两个大事儿。
使用HTML的hidden属性
HTML5的隐藏属性你可别轻视！只要给要隐藏的标签加这个东西，就能神不知鬼不觉的藏好！看到没，我就是这样搞定的。输入框瞬间消失无踪，厉害？
其实，hidden这个属性虽然能瞬间把东西藏起来，不过太单调了，而且没法儿用css调戏它，所以我们通常不怎么用~实际上，用css控制显示隐藏的效果已经够我们用！
说白了，在做网页编辑时有些小技巧可以藏点什么东东。到底是用哪个，就看咱们自己需要和页面设计。记住这5招，页面布局会变得得心应手，阅读起来也会顺畅很多
#element-to-hide {
position: absolute;
clip: rect(0 0 0 0);
}
除了之前说的5招，咱们还有新的小技巧能用得更溜！比如巧妙用好z-index调整层级，或者直接用overflow:hidden处理超范围的部分什么的。
这儿教你几个小技巧，以后面对页面开发里的隐藏元素再也不发愁！我会详细告诉你怎么用这些方法搞定他们。
评论0