display——table-cell属性

display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局，本文就display：table-cell做学习总结。


display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

 
 
 
 
 
值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
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>）
inherit 规定应该从父元素继承 display 属性的值。

 

display：table-cell可以代替浮动布局，但是其不是最好的方法。其他方法有待进一步学习！


这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多，但是在某些时候还是挺管用的，如下：

1.多行文字居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .parent{
            display: table;
            width: 400px;
            height: 400px;
            text-align: center;
            border:1px solid red;
            margin:0 auto;
            background: blue;   /*背景颜色无效*/
        }
        .child{
            display: table-cell;    /*子元素成为表格单元格（类似 <td> 和 <th>）*/
            height: 200px;
            background: yellow;
            vertical-align: middle; /*表格容器可以设置垂直对齐属性*/
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
        </div>
    </div>
</body>
</html>

效果如下：

　　　　

 

设置了display：table-cell的元素：

  • 对宽度高度敏感
  • 对margin值无反应
  • 响应padding属性
  • 内容溢出时会自动撑开父元素

2.制作自适应搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
            .search-box{
                display: table;
                width:100%;
            }
            .search-content{
                width: 30%;
                display: table-cell;
                border: 1px solid #ccc;
                padding: 8px 0px;
            }
            .search-btn{
                display: table-cell;
                width: 5%;
                white-space: nowrap;
                padding: 5px 12px;
                background-color: #ccc;
                border: 1px solid #ccc;
                border-radius: 4px;
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
                font-size: 14px;
                color: #555;
                border-right: 0;
            }
    </style>
</head>
<body>
        <div class="search-box">
            <span class="search-btn">搜索</span>
            <input type="text" class="search-content"/>
        </div>
</body>
</html>

效果如下:
　　　　

3.大小不固定的垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .content {
            display: table-cell;
            padding: 10px;
            border: 2px solid #999;
        }

        .content div {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="content">
        <div style="padding: 50px 40px;background: #cccccc;color: #fff;"></div>
        <div style="padding: 60px 40px;background: #639146;color: #fff;"></div>
        <div style="padding: 70px 40px;background: #2B82EE;color: #fff;"></div>
        <div style="padding: 80px 40px;background: #F57900;color: #fff;"></div>
        <div style="padding: 90px 40px;background: #BC1D49;color: #fff;"></div>
    </div>
</body>
</html>

效果如下：
　　　　

4.俩列自适应布局(宽度自动调节)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .content {
            display: table;
            padding: 10px;
            border: 2px solid #999;
            width:20%;
        }
        .left-box {
            float: left;
            margin-right: 10px;
        }
        .right-box {
            display: table-cell;
            padding: 10px;
            width: 3000px;  /*右侧自适应*/
            vertical-align: top;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="content">
            <div class="left-box">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563504355842&di=38efab5b4e8d2d2546238af82ce055d9&imgtype=0&src=http%3A%2F%2Fimg.9ku.com%2Fgeshoutuji%2Fsingertuji%2F1%2F15169%2F15169_1.jpg" width="70">
            </div>
            <div class="right-box">...</div>
    </div>
</body>
</html>

 

效果如下：
　　　　

左边头像部分使用了float左浮动属性，右侧使用 display: table-cell则实现了两列自适应布局。

注：我们为一个元素设置了display：table-cell属性，而不将其父元素设置为display：table-row属性，浏览器会默认创建一个表格行。

5.列表布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
    .content {
        padding: 10px;
        margin: 10px auto;
        display: table;
        width: 20%;
        border: 2px solid #999;
    }

    .content ul {
      display: table-row;
    }

    .content ul li {
      display: table-cell;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid #ccc;
    }
    </style>
</head>
<body>
    <div class="content">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
    </div>
</body>
</html>

效果如下：

　　　　　　

这类布局常用浮动布局（给每个li加上float：left属性）实现，但这样做有明显不足：

  • 需要清除浮动
  • 不支持不定高列表的浮动

 

posted @ 2019-07-19 02:03  给时光以生命  阅读(32734)  评论(0)  编辑  收藏  举报