display属性

display属性

display能修改元素的显示类型

1、display的常用值

1. block：让元素显示为块级元素
2. inline：让元素显示为行内级元素
3. none：隐藏元素
4. inline-block：内联块（行内块）

2、取以下值等同于某些html元素

• table：,一个block-level表格
• inline-table：,一个inline-level表格
• table-row：
• table-row-group：
• table-header-group：
• table-footer-group：
• table-cell:,,一个单元格
• table-caption：,表格的标题
• list-item：

3、display:none与visibility:hidden的异同

3.1、相同点

都能是元素隐藏

3.2、不同点

<div class="dis_vis">
    <div class="dis">display</div>
    <div class="vis">visibility</div>
    <div></div>
</div>

div{
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 20px;
}
.dis{
    display: none;
}
.vis{
    visibility: hidden;
}

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。如果重新给子元素设置visibility: visible,则又会显示出来,但是其他内容被隐藏。这个和display: none有着质的区别

    <div class="dis">display</div>
    <div class="vis">visibility
        <div class="vis_inner"></div>
    </div>
    <div></div>
</div>

            div{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-top: 20px;
            }
            .vis_inner{
                width: 100px;
                height: 100px;
                background-color: blue;
                visibility: visible;
            }
            .dis{
                display: none;
            }
            .vis{
                visibility: hidden;
            }

2、visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。display: none更像是完全消失，如下

li{
    width: 500px;
    background-color: red;
    margin-top: 10px;
}

<ol>
    <li></li>
    <li style="visibility: hidden"></li>
    <li></li>
    <li></li>
</ol>

<ol>
    <li></li>
    <li style="display: none"></li>
    <li></li>
    <li></li>
</ol>

3、transition可以设置visibility属性，但是不能设置display，所以visibility常用来跟transition一起使用实现过渡动画。

4、display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

4、display、position、float脱离标准流

当display属性不为none时，设置position属性为absolute或flex值、或者设置float属性时，会脱离标准流，使其元素display属性会变成block，即可以设置宽高，宽高默认属性是auto,但是因为脱离标准流所以width:auto并没有变现出占父元素width的100%，而是表现出由内容撑开（类似与inline-block）