display属性剖析
Posted .tianqi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display属性剖析相关的知识，希望对你有一定的参考价值。
首先display常用属性大家应该已经有所了解，这里主要对display的以下四大属性进行“详剖”
- none
- block
- inline
- inline-block
一、display：none
我们知道，display具有隐藏元素的功能，但是同样我们知道visibility: hidden也具有隐藏元素的功能，下面我们通过一个例子来看一下两者的区别：
<span style="display: none;background-color: orange;width: 80px">我被隐藏</span> <span style="background-color: orange;width: 80px">我被显示_01</span><br/> <span style="visibility: hidden;background-color: green;width: 80px">我被隐藏</span> <span style="background-color: green;width: 80px">我被显示_02</span>
我们可以看到显示结果是这样的：
结论：使用display:none隐藏元素时，我们可以看到浏览器没有为被隐藏的元素保留物理空间；但是需要知道即使不为元素保留物理空间，display:none依然在页面结构加载时被加载，而不是在display属性变为block时才进行加载// 此处楼主理解的原因是页面结构与页面的层叠样式是分开加载的，而display：none属于在CSS层叠样式中对结构进行了隐藏，欢迎理解更深刻准确的同学在评论区进行指正；
而visiablity:hidden则只是看不见元素，却为元素保留了位置；
这里贴一个有意思的小程序通过jQuery来控制隐藏/显示（display:none/block）~
<html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏/显示三个小方块~</title> <script src = "https://code.jquery.com/jquery-3.2.1.js"></script> <style> .div1,.div2,.div3{ width: 70px; height: 70px; margin:10px 10px; float: left; display: none; } .div1{background-color: orange;} .div2{background-color: grey;} .div3{background-color: green;} </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <button class="btn1">点我显示/隐藏三个小方块</button> <script> $(document).ready(function(){ $(".btn1").click(function(){ $(".div1").fadeToggle(); $(".div2").fadeToggle("slow"); $(".div3").fadeToggle(3000); }); }); </script> </body> </html>
二、display: block
即为我们常说的块级元素，非常常见的块级元素如div流标签、h1-h6标题标签、p段落标签、ol、ul列表标签、table表格、form交互表单等等（不在这里列举了，感兴趣的小伙伴可以自行百度一下）；
它们的主要特点：1.块级元素会自动占据一定的矩形空间，可以对元素设置宽度、高度、内外边距等属性；
2.元素前后会带有换行符；
3.块级元素中可以容纳其他块级元素或行内元素；
display: block的用法比较灵活，常见的方式如1.将<a><span>等内联标签转化为block元素以改变他们的样式；
2.导航、链接等想要进行块级化显示的元素；
一个简单的小例子将a链接转为块级元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>aaa</title> <style> a{ display: block; background-color: bisque; width: 80px; height: 80px; text-align: center; line-height: 80px; } </style> </head> <body> <a href="#123">#123</a> </body> </html>
效果如图
三、display: inline
即为我们常说的行内元素，常见的行内元素如span、a、input、img、u、abbr等；
它们的主要特点：1.行内元素前后没有换行符，行内元素会始终在同一行排列直至排满一行；
2.行内元素无法设置宽度、高度、内外边距等属性；//这一点大家向上看我们display：none中的第一段代码，我为每个span元素均设置的width:80px，但其实这段代码对行内元素并不发挥作用；
四、display:inline-block
这是一个神奇的属性，解决了颇多问题，如float浮动同一行元素不同高导致错位等，这个属性自己用的并不是很多，经过查询发现在很多地方用display: inline-block布局其实有很多优势，由于没有很多的实践，在这里先推荐一篇张鑫旭鑫大佬的文章，以后自己有更多的实践再回来补充~http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮动布局-基于displayinline-block的列表布局/
display还有一些其他属性，如果碰到新奇的用法还会随时来补充.
以上是关于display属性剖析的主要内容，如果未能解决你的问题，请参考以下文章