display属性：

根据CSS规范的规定，==每一个网页元素都有一个display属性==，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。

display常见属性值：

1. none：隐藏对象
2. inline：指定对象为内联元素
3. block：指定对象为块元素
4. inline-block：指定对象为内联块元素
5. table-cell：指定对象作为表格单元格
6. flex：弹性盒

div,span{
    width:200px;
    height:200px;
}
div{
    background: red;
    /*1.设置为行内元素，则变成与span一样了*/
    /*display: inline;*/

    /*2.设置元素为行内块元素，具有宽高属性，并且不会独占一行，但是一般不用，图文混排不太好用*/
    /*之间会有空隙*/
    /*display: inline-block;*/

    /*3.设置为表格单元格元素，并且之间不会有空隙*/
    /*display: table-cell;*/

    /*4.隐藏元素*/
    /*（1）隐藏元素，并且不占据原来的物理位置，这个属性很有用：可以结合js实现动态效果*/
    /*此时如果想再显示出来需要写：display:block，即把默认的display属性显式地写出来*/
    /*display: none;*/

    /*（2）隐藏元素，占据原有物理位置*/
    /*visibility: hidden;*/
    /*如果元素是使用visibility设置的隐藏方式，那么需要用visibility：visible的方式来让元素显示*/
    /*visibility: visible;*/
    /*
        visibility:设置元素是否显示
            visible显示
            hidden隐藏
           注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是
           直接隐藏该元素的内容和位置。
    */
    /*（3）隐藏元素：设置元素透明度为0，也占据原有地理位置，数值位于0-1之间，越小越透明*/
    opacity: 0;
}
span{
    /*设置为块状元素，变成了div*/
    /*display: block;*/
    background: fuchsia;
}

    <!--div:块状元素：具有宽高属性，并且独占一行-->
    <div>这是块状元素</div>
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
    <!--行内元素：没有宽高属性，不会独占一行-->
    <span>这是行内元素</span>

==visibility:hidden和display:none和opacity:0的区别：==

1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在

2.display:none 影藏元素，不保留物理空间