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属性剖析的主要内容,如果未能解决你的问题,请参考以下文章

inline-block,真的懂吗

浅析XSS的几种测试方法

结合阿里代码规范约定+源码剖析属性拷贝性能安全问题

css常用代码片段 (更新中)

httpd三种MPM的原理剖析

51.关于display属性的一点点总结,看代码