display

lipengjgs大约 3 分钟

display

设置元素的内外部显示类型

inline

行内元素

不会换行，与其它行内元素位于同一行，设置宽高不起作用，
可设置左右margin，padding, 上下padding不会影响其它元素
只能嵌套内联元素，不能嵌套块级元素
多个空格会被合成一个空格

    <div class="inline">            
        <span>aaa</span><b>bbb</b>            
        <em>ccc</em>            
        <s>ddd</s>            
        <strong>eee</strong>            
        <div style="display: inline; margin: 0 10px; padding: 10px;">ggg</div>            
        <div style="display: inline;">hhh</div>            
        <a href="#">                
            fff                
            <!-- 按规定不能嵌套块级（规范），但是浏览器依旧处理 -->                
            <div>1111</div>            
        </a>        
    </div>

inline-block

行内块元素

具有block宽度高度特性，具有inline的同行特性
【注意】strut

        <div class="inline-block-01">
            <span style="display: inline-block;"></span>
        </div>
        <div class="inline-block-02" style="font-size: 0;">
            <!-- 默认 会有个假想元素 strut 需要把 外层的font-size改为0，或采用其它方式如flex -->
            <span style="display: inline-block; font-size: 14px;">111</span>
        </div>
        <div class="inline-block-03" style="font-size: 0;">
            <span style="display: inline-block; font-size: 14px;">aaaaaaaaaa</span>
            <span style="display: inline-block; font-size: 14px;">bbbbb bbbbb</span>
            <span style="display: inline-block; font-size: 14px;">ccccc ccccc</span>
            <span style="display: inline-block; font-size: 14px;">ddddd ddddd</span>
            <span style="display: inline-block; font-size: 14px;">eeeee eeeee</span>
            <span style="display: inline-block; font-size: 14px;">fffff fffff</span>
            <span style="display: inline-block; font-size: 14px;">ggggg ggggg</span>
            <span style="display: inline-block; font-size: 14px;">hhhhh hhhhh</span>
        </div>

block

块级元素

独占一行

        <div class="block" style="text-align: center;">
            <div class="child" style="display: inline-block; border: 1px solid #eee;">111</div>
            <div class="child" style="display: inline-block; border: 1px solid #eee;">222</div>
            <div class="child" style="display: inline-block; border: 1px solid #eee;">333</div>
        </div>

flex

弹性伸缩盒

flex布局中子元素的float、clear和vertical-align属性失效
容器的属性： flex-flow --- flex-direction, flex-wrap, align-items, justify-content, align-content(用在多根轴线的情况下)
子元素项目属性： order, align-self, flex --- flex-grow, flex-shrink, flex-basis

<!-- 各种flex布局实现 -->
        <div class="flex-01" style="display: flex; height: 300px;">
            <div style="flex: 0 0 200px;">
                <div>menu</div>
            </div>
            <div style="flex: 1; word-break: break-all;">
                <div> content <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </div>
            </div>
        </div>

inline-flex

内联块级弹性伸缩盒

grid

<!--Grid-->
<a href="https://www.jianshu.com/p/3762f214cd6f">地址</a>
<hr>
<div class="grid-0 grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
<hr>
<div class="grid-1 grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
<hr>
<div class="grid-2 grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>
<hr>
<div class="grid-3 grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>
<hr>
<div class="grid-4 grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
<hr>


/* 容器属性，项目属性 */
.grid > div {
    background: #ddd;
    text-align: center;
    line-height: 100px;
}
.grid-0 {
    display: grid;
    /* 行 */
    grid-template-rows: repeat(3, 100px); 
    /* 列 */
    grid-template-columns: repeat(3, 100px);
    /* 项目顺序 */
    grid-auto-flow: row;
    /* 间距, row-gap, column-gap */
    gap: 10px;
}
.grid-1 {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: column;
    row-gap: 10px;
    column-gap: 20px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(4, 100px);
    gap: 5px;
}
.grid-2 > div:first-child {
    /* 项目属性 */
    grid-column-start: 1;
    grid-column-end: 3;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 2fr 3fr 2fr;
    gap: 5px;
}
.grid-4 {
    display: grid;
    /* minmax 范围 */
    grid-template-columns: 1fr 1fr minmax(100px, 1fr) 1fr;
    grid-template-rows: 1fr 2fr;
    gap: 5px;
}

inline-grid

table

none

隐藏元素

元素不会被显示，也不会占据文档空间
【注意】当嵌套iframe时的

MDN Docs