display属性详解及用法

display属性详解1 block、inline、inline-block2 flow-root3 table、inline-table4 flex、inline-flex5 none6 list-item7 contents8 grid、inline-grid

橘猫吃不胖～

10251人浏览 · 2022-11-06 11:53:08

橘猫吃不胖～ · 2022-11-06 11:53:08 发布

display属性详解

1 block、inline、inline-block
2 flow-root
3 table、inline-table
4 flex、inline-flex
5 none
6 list-item
7 contents
8 grid、inline-grid

1 block、inline、inline-block

display: block;，使用之后生成一个块级元素盒，在标准文档流中，该元素之前和之后产生换行。
display: inline;，使用之后生成一个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。
display: inline-block;，在内联和块之间提供了一个中间状态，使用之后生成一个内联块元素，该元素width和height属性会生效，padding，margin，以及border会推开其他元素。但是，它不会跳转到新行。

块级盒子与内联盒子的行为：

块级盒子会表现出以下行为：
1、盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
2、每个盒子都会换行
3、width和height属性可以发挥作用
4、内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”
5、除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。

内联盒子会出现以下行为：
1、盒子不会产生换行。
2、width和height属性将不起作用。
3、垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开。
4、水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
5、用做链接的<a>元素、<span>以及<strong>都是默认处于inline状态的。

2 flow-root

无论是内联元素还是块级元素，使用之后都会变成块级元素，同时会建立一个新的块级格式化上下文（BFC），定义格式化上下文的根元素。

BFC的作用有：①布局；②清除浮动；③去除margin合并现象，因此，display: flow-root;也有类似的作用。

用盒子塌陷举个例子，为父元素规定了宽度，子元素规定宽度和高度，并设置浮动，这样的子元素脱离了文档流，导致父元素没有高度撑起来，从而盒子塌陷，因此只能看到子元素的效果：

<div class="container">
    <div class="child"></div>
</div>
<style>
    .container {
        width: 200px;
        background-color: orange;
    }

    .child {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
</style>

在这里插入图片描述
如果给父元素设置display: flow-root;，触发BFC，那么它就会把浮动元素的高度计算上，从而达到清除浮动的效果：

<div class="container">
    <div class="child"></div>
</div>
<style>
    .container {
        display: flow-root;
        width: 200px;
        background-color: orange;
    }

    .child {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
</style>

在这里插入图片描述

3 table、inline-table

display: table;的行为类似于HTML的<table>标签，也就是说可以通过设置css样式，取代<table>标签，来形成一个表格布局。
display: inline-table;的行为类似于 HTML 的<table>元素，但实际是一个内联盒，而不是一个块级盒子。table盒内部是一个块级上下文。

属性值与<table>元素的关系如下所示：

属性值	类似元素	说明
`table`	`<table>`	此元素会作为块级表格来显示，表格前后带有换行符
`inline-table`	`<table>`	此元素会作为内联表格来显示，表格前后没有换行符
`table-row-group`	`<tbody>`	此元素会作为一个或多个行的分组来显示
`table-header-group`	`<thead>`	此元素会作为表格标题组来显示
`table-footer-group`	`<tfoot>`	此元素会作为表格脚注组来显示
`table-row`	`<tr>`	此元素会作为一个表格行显示
`table-column-group`	`<colgroup>`	此元素会作为一个或多个列的分组来显示
`table-column`	`<col>`	此元素会作为一个单元格列显示
`table-cell`	`<td>`和`<th>`	此元素会作为一个表格单元格显示
`table-caption`	`<caption>`	此元素会作为一个表格标题显示

示例：写一个成绩表

<div style="display: table;">
    <div style="display: table-caption;">XXX成绩表</div>
    <div style="display: table-header-group;">
        <div style="display: table-row;">
            <div style="display: table-cell;">姓名</div>
            <div style="display: table-cell;">语文</div>
            <div style="display: table-cell;">数学</div>
        </div>
    </div>
    <div style="display: table-row-group;">
        <div style="display: table-row;">
            <div style="display: table-cell;">张三</div>
            <div style="display: table-cell;">100</div>
            <div style="display: table-cell;">100</div>
        </div>
    </div>
    <div style="display: table-row-group;">
        <div style="display: table-row;">
            <div style="display: table-cell;">李四</div>
            <div style="display: table-cell;">99</div>
            <div style="display: table-cell;">99</div>
        </div>
    </div>
</div>

在这里插入图片描述

4 flex、inline-flex

该属性会将元素变为弹性盒子（或内联的弹性盒子），它能够扩展和收缩容器内的元素，以最大限度地填充可用空间。与Flexbox 是一个更强大的方式，主要表现在：

在不同方向排列元素
重新排列元素的显示顺序
更改元素的对齐方式
动态地将元素装入容器

它与以下属性搭配使用：

属性	说明	属性值
`flex-direction`	设置布局方向	`row`：默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列 `row-reverse`：主轴为水平方向（水平布局），起点在右端，从右向左排列 `column`：主轴为垂直方向（垂直布局），起点在上沿，从上往下排列 `column-reverse`：主轴为垂直方向（垂直布局），起点在下沿，从下往上排列
`flex-wrap`	设置元素环绕效果	`nowrap`：默认值，表示不换行 `wrap`：换行 `wrap-reverse`：换行，第一行在下方
`justify-content`	水平对齐方式	`flex-start`：默认值，左对齐 `flex-end`：右对齐 `center`：居中 `space-between`：两端对齐，项目之间的间隔相等 `space-around`：项目两侧的间距相同，项目之间的间距比两侧的间距大一倍
`align-items`	交叉轴对齐方式	`flex-start`：交叉轴的起点对齐 `flex-end`：交叉轴的终点对齐 `center`：交叉轴的中点对齐 `baseline`: 项目的第一行文字的基线对齐 `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
`align-content`	轴线对齐方式	`flex-start`：与交叉轴的起点对齐 `flex-end`：与交叉轴的终点对齐 `center`：与交叉轴的中点对齐 `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布 `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 `stretch`：默认值，轴线占满整个交叉轴
`order`	项目的排列顺序，数字越小排列越靠前，默认为0。	数字
`flex`	综合属性设置	flex属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为0，1，auto。

5 none

display: none;使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。

6 list-item

list-item的单独值将导致元素的行为类似于一个列表元素。其可以与list-style-type和list-style-position一起使用。

示例代码：

<div>1111111111</div>
<div>2222222222</div>
<div>3333333333</div>
<style>
    div {
        display: list-item;
        list-style-type: disc;
        list-style-position: inside;
    }
</style>

在这里插入图片描述

7 contents

使用display: contents;后，元素自身不会产生特定的盒子，但是它保留其子代元素的正常展示。它的样式规则使div元素不产生任何边界框，因此元素的背景、边框和填充部分都不会渲染。然而，继承的属性如颜色（color）和字体（font）却能照常影响到子元素。

例如下面的html结构：

<div class="d1">
    <div class="d2">
        <div class="d3"></div>
    </div>
</div>

首先为其添加这样的样式：

.d1 {
    width: 200px;
    height: 100px;
    background: pink;
}

.d2 {
    border: 2px solid red;
    padding: 20px;
}

.d3 {
    border: 2px solid purple;
    padding: 20px;
}

在这里插入图片描述
如果我们为中间的盒子添加display: contents;，可以看到中间的盒子好像不存在了，但是它的子元素可以正常的渲染：

.d2 {
    display: contents;
    border: 2px solid red;
    padding: 20px;
}

在这里插入图片描述
根据这样的特性，这个属性适用于那些充当遮罩的元素，这些元素本身没有什么作用，是可以被忽略的布局场景。

8 grid、inline-grid

display: grid;：行为类似块级元素并且根据网格模型布局（Grid布局）它的内容
display: inline-grid;：行为类似于内联元素并且它的内容根据网格盒模型布局

grid布局即网格布局，是一种 CSS 二维布局，布局需要配合以下属性来完成：

属性	说明	示例
`grid-template-columns`	设置列宽，有几列就写几列的宽度	`grid-template-columns: 100px 100px 100px;` 显示为三列每一列宽度100px
`grid-template-rows`	设置行高，有几列就写几列的高度	`grid-template-rows: 100px 100px 100px;` 显示为三行每一行高度100px
`row-gap`	设置行间距	`row-gap: 10px;` 行间距为10px
`column-gap`	设置列间距	`column-gap: 15px;` 列间距为15px
`grid-template-areas`	定义区域，一个区域由多个单元格组成	为需要布局的div添加`grid-area`属性起名，例如`grid-area: a`，该区域就叫a `grid-template-areas: "a a b" "a a c" "d e e";` abcde字母就代表定义的区域
`justify-items`	主轴方向项目对齐	`justify-items: start \| end \| center \| stretch;`
`align-items`	交叉轴方向项目对齐	`align-items: start \| end \| center \| stretch;`
`justify-content`	主轴内容对齐，控制整个内容区域在容器里面的水平位置	`justify-content: start \| end \| center \| stretch \| space-around \| space-between \| space-evenly;`
`align-content`	交叉轴内容对齐，控制整个内容区域的垂直位置	`align-content: start \| end \| center \| stretch \| space-around \| space-between \| space-evenly;`

简单的使用示例：

<div class="d1">
    <div class="a" style="grid-area: a"></div>
    <div class="b" style="grid-area: b"></div>
    <div class="c" style="grid-area: c"></div>
    <div class="d" style="grid-area: d"></div>
    <div class="e" style="grid-area: e"></div>
</div>
<style>
    .d1 {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        row-gap: 10px;
        column-gap: 15px;
        grid-template-areas: "a a b" "a a c" "d e e";
    }

    .a {
        background-color: pink;
    }

    .b {
        background-color: orange;
    }

    .c {
        background-color: aquamarine;
    }

    .d {
        background-color: aqua;
    }

    .e {
        background-color: blanchedalmond;
    }
</style>