WithCoderWithCoderWithCoder

CSS中display属性常用值介绍

    display属性是我们在前端开发中经常使用的一个属性,它的取值最常见的有:

    1. none

    2. block

    3. inline

    4. inline-block

    5. flex

    下面,按照上面的顺序,简单介绍这些取值的作用。

    1. display:none

    none表示隐藏元素。与visibility属性的hidden值不同,当元素的display属性值为none时被隐藏的元素不会保留其物理空间。

    有关dispaly:none和visibility:hidden的区别,可以参考“css隐藏元素方法display:none和visibility:hidden的区别”。

    2. display:block

    通过对一个行内元素设置display:block,可以将行内元素设置为块级元素,进而可以设置它的宽高和上下左右的padding和margin。

    例如,我们经常会制作导航栏,这时可能会使用ul li 和a组合的方式,但是<a>是行内元素,我们无法设置它的宽和高。这时,就可以在<a>的样式表中,将它设置为display:block,这样就可以将<a>元素转换为块级元素,然后就可以设置它的宽和高,以及上下左右的margin和padding,以达到我们想要的效果了。

    举例如下:   

     <style>
        * {
            padding0;
            margin0;
            list-stylenone;
        }
        
        ul li {
            floatleft;
        }
        
        a {
            displayblock;
            width50px;
            height30px;
            backgroundgrey;
            margin5px;
            text-decorationnone;
            text-aligncenter;
            line-height30px;
            colorwhite;
        }
    </style>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">图片</a></li>
        <li><a href="">关于</a></li>
    </ul>

    以上代码将<a>元素转换为块级元素,从而设置它的宽高、margin等,具体效果如下:

    1-20042R25111B1.png  

    3. display:inline

    当设置元素的dispaly属性值为inline时,此元素会被显示为内联元素,元素前后没有换行符。当将一个块级元素转换成行内元素,那么这个块级元素将不能再设置宽和高、上下方向的margin和padding。

    4. display:inline-block

    设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性,又保持了inline元素不换行的特性。通俗的将,可以理解为元素转换为不独占一行的块级元素。

    在上面第二部分中做导航菜单的时候,我们用ul li a组合,然后又设置了li元素的float属性,让li元素左浮动,得到横向的导航标签。而现在我们可以通过设置li的display:inline-block来实现。

    举例如下:   

    <style>
        ul,
        li,
        a,
        * {
            padding0;
            margin0;
            list-stylenone;
            text-decorationnone;
            colorwhite;
        }
        
        li {
            displayinline-block;
            width50px;
            height30px;
            backgroundgrey;
            margin5px;
            text-aligncenter;
            line-height30px;
        }
    </style>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">图片</a></li>
        <li><a href="">关于</a></li>
    </ul>

    以上代码将li元素转换为内联块级元素,多个li表现为内联元素,然而又可以如块级元素一般设置它的宽高、margin等,具体效果如下:

    1-20042R25111B1.png

    5. display:flex

    display的flex属性,将元素表现为弹性的伸缩盒容器。这在自适应布局中经常使用。

    依然以上面的导航菜单为例,我们将ul的diplay属性值设置为flex,此时,flex容器内的元素默认会水平布局,举例如下:

    <style>
        ul,
        li,
        a,
        * {
            padding0;
            margin0;
            list-stylenone;
            text-decorationnone;
            colorwhite;
        }
        
        ul {
            displayflex;
            width400px;
            justify-contentspace-around;
            background-colortomato;
        }
        
        li {
            width50px;
            height30px;
            backgroundgrey;
            margin5px;
            text-aligncenter;
            line-height30px;
        }
    </style>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">图片</a></li>
        <li><a href="">关于</a></li>
    </ul>

    以上代码将ul设置为flex布局后,使用justify-content属性设置水平方向多个元素的对齐方式后,效果如下:

    1-20042R31G0552.png

欢迎分享交流,转载请注明出处:WithCoder » CSS中display属性常用值介绍