CSS世界中那些说起来很冷的知识，你听过几个？
最近读了张鑫旭的新书《CSS世界》收获了不少奇技淫巧和对CSS的深度理解
也正值个人在公司内部进行部分章节的内容分享，于是顺带着直接把我即将分享的内容先给大家过过目了，就当省去了大家买了书后，无暇顾及观看的尴尬吧！
本书的最后三章分别是
元素的显示与隐藏
用户界面样式
流向的改变
下面我就直接进入主题，开始对每一章节进行一个非系统的分享了
元素的显示与隐藏
使用CSS让元素不可见的方法很多，剪裁、定位到屏幕外、透明度变化等都是可以的。虽然它们都是肉眼看不见，但背后却在多个维度上都有差别
下面是总结的一些比较好的隐藏实践，大家一起来根据实际开发场景来选择合适的使用
比较好的隐藏实践
不占空间，不渲染 使用script
<script type="text/html">
<!-- 图片是不会发送请求的 -->
<img src="1.jpg" />
<!-- 如果想嵌套需要借助textarea了 -->
<textarea style="display: none;">
<img src="2.png" />
</textarea>
</script>
.out {
position: relative;
left: -999em; } .clip {
position: absolute;
clip: rect(0, 0, 0, 0);
} <div class="clip">
<div class="out">青花瓷</div>
</div>
display与元素的显隐
我们都知道display如果值为none，则该元素以及所有后代元素都隐藏，反之如果值是非none的情况，则都为显示了
display可以说是web显隐交互中出场频率最高的一种隐藏方式，是真正意义上的隐藏，干净利落，不留痕迹
none做到了无法点击、无法使用屏幕阅读器等辅助设备访问，不占空间，其实不仅仅是这样，更应该知道的是
me: 我有酒，那么别说你没有故事
我知道display:none你才不是一个没有故事的女同学
display: none的元素的background-image图片根据不同浏览器的情况加载情况不一
在Firefox浏览器下，display:none的background-image图片不加载，包括父元素display:none也是如此
在Chrome和Safari浏览器，则根据父元素是否是否为none来影响图片加载情况，父元素带有display:none，图片不加载。
父元素不带有display:none,而自身有背景图元素带的话，那也照样加载
在IE浏览器下，无论怎么搞都会请求图片资源，就是这么任性
因此，在实际开发的时候，例如头图轮播切换效果
那些默认需要隐藏的图片作为背景图藏在display:none元素的子元素上，这样的细小改动就可以明显提升页面的加载体验，也是非常实用的小技巧
whatever
上面说的兴致盎然，但实际中不可能全部都是背景图去加载图片资源的
还有另外一个好朋友，img元素，然并卵的是，上面说了一大堆加载不加载的情况，对img来说没个鸟用，人家不管你none不none的，依旧带着勇闯天涯的气概去请求着资源
活久见
都说display:none做事最纯粹，最干净，不能被点击，触碰到，然而下面这种情况又是什么鬼？
出来解释解释，我们都是文明人是绝对不会动武的！
<form action="/index.php">
<input type="submit"
id="hi" style="display: none;">
<label for="hi">提交</label>
</form>
隐藏的按钮会触发click,触发表单提交，此现象出现在时髦的浏览器中(IE9+，现代标准浏览器中）
既然有这种例外情况那加了display:none的意义又是什么呢？
意义在于：当按钮和label元素不在一个水平线上的时候，点击label元素不会触发锚点定位
But：作者不推荐这么做，因为submit按钮会丢失键盘可访问性
很多都是纯天然的
HTML中有很多标签和属性天然自带display:none
标签：style, script, dialog
属性：
对于ol有序列表来说，如果子元素li有一项被设置了display:none，那么原本有10相的元素，最后总计数会被计算成9项，设置display:none的那项被后面的兄弟给取代了
还有一点就是display:none其实并不会影响css3 animation动画的实现，而只是会影响transition过渡效果的执行，因此transition和visibility属性关系更好 （老铁扎心了）
既然说到了visibility了，那么就赶紧邀请visibility闪亮登场吧
visibility与元素的显隐
visibility要为自己正名，不仅仅是保留空间这么简单
看点多多：
继承性(最有意思的一个特点，不是我说的)
父元素设置visibility:hidden，子元素也继承了该属性，也是看不见的
不过本质区别在于，父元素设置了hidden后，子元素设置visible后，子元素是可以被看都的
这点父元素设置了display:none，子元素就永远看不到了
2. 与css计数器
visibility:hidden虽然让元素不可见了，但是不影响其计数效果，不会重新计算结果
3. 与transition
设置了visibility:hidden的元素，可以很好的展现transition过渡效果
这是因为transition支持的css属性中有visibility(果然是兄弟)，而并没有display属性
与JS
visibility:hidden除了对transition友好外，对js来说也很友好
在实际开发中，需要对隐藏元素进行尺寸和位置的获取，来实现布局精确定位的交互
此时，就建议使用visibility:hidden
作者：chenhongdong
链接：https://juejin.cn/post/6844903635248218126
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
想要了解更多可以点击了解更多哦~
