❮上一节 display模型示意图下一节盒子类别术语❯

7.6 display属性常用单值

display属性常用单值如下。

（1）基础：inline、block、table 、flex、grid；

（2）inline组合系列：inline-block、inline-table、inline-flex、inline-grid；

（3）隐藏：none；

（4）其它值：list-item 、table-系列；

（5）声明式的新建BFC：flow-root。

不是所有display单值写法都能用双值写法替换，例如none。

7.6.1 list-item

list-item是特殊的display属性值。特殊性包括两个方面：它只适用于li标签，li标签默认display:list-item；它的完整写法需display三值写法。

list-item = block flow list-item

list-item基本与display: block等价，前两个值与display: block完全相同。list-item是block的扩展，list-item结合list-style实现前面圆圈等符号。所以页面布局采用div标签最多，其次是就是ul-li标签。

示例代码

<body>    
    <li>小步教程 xiaobuteach.com</li>
    <li style="display:list-item;">小步教程 xiaobuteach.com</li>
    <li style="display:block flow list-item;">小步教程 xiaobuteach.com</li>
</body>

运行效果如下。三种写法完全等价。

7.6.2 inline组合系列

inline-系列包括：inline-block、inline-table、inline-flex、inline-grid。本质是display-outside值inline与display-inside各值的组合。

inline-block 等价写法 inline flow-root
inline-table 等价写法 inline table
inline-flex 等价写法 inline flex
inline-grid 等价写法 inline table

inline-block在项目比较常用，后3个基本不用，用它们不如在父元素直接设置相应布局。

inline-block特点：外部表现是inline盒子，内部表现是block盒子。所以它在一行内有inline的特点：不换行。它的内部有block的特点：内部能够包含多个block元素与inline元素，并且本身能够设置宽度。

示例代码

<!DOCTYPE html>
<html style="display: block flow-root;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小步教程</title>

    <style>
        body{
            margin-top: 0;
        }

        .box1 {
            display: inline-block;
            width: 200px;
            height: 70px;
            padding: 10px;
            border: 5px solid #0aaa76;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

    </style>
</head>
<body >    
    <span class="box1">
        <div>inline-block元素1 第1行</div>
        <div>第2行</div>
        <div>第3行</div>
    </span>
    <span class="box2">元素2</span>
    <div class="box3">小步教程 xiaobuteach.com</div>
</body>
</html>

运行效果

开发者工具查看inline-block盒子的各属性设置均生效，包括：width、height、各方向margin。

默认inline-block值的常用标签：input、button、select、textarea。表单元素设计成inline-block的两个原因：可设置宽高，看上去是一个元素，实际内部包含浏览器自动创建的其它元素，例如下拉框select自带箭头。

inline-block的双值等价代码：inline flow-root，内部自动新建BFC。inline-block详细内容见第9章行内IFC模型。

7.6.3 none

none值表示该元素以及后代元素不生成盒子，盒子在流式布局没有占位。

display:none与visibility:hidden的区别。visibility:hidden也不显示，但会创建盒子，会在流式布局进行占位。

示例

<body>
    <div>
        <span>小步教程</span>
        <span style="display: none;">看的到我吗?有占位吗?</span>
        <span>xiaobuteach.com</span>
    </div>

    <div>
        <span>小步教程</span>
        <span style="visibility: hidden;">看的到我吗?有占位吗?</span>
        <span>xiaobuteach.com</span>
    </div>
</body>

运行效果

7.6.4 flow-root

flow-root表示元素生成盒子是块容器block container盒子，内部新建BFC。