zoukankan      html  css  js  c++  java
  • css中display设置为table、table-row、table-cell后的作用及其注意点

    html:

    <div class="table">
        <div class="row">
            <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
            <div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </div>
    </div>
    

    1、当设置display:table;时,table的padding设置会失效。【可自己测试一下】

    1 .table {
    2         display: table;
    3         margin: 5px;
    4         width: 1000px;
    5         border:1px solid red;
    6 
    7     }
    View Code

    2、当设置display:table-row;时,margin和padding设置会失效。这里我进行了设置,可以看出是没有效果的。

    1 .row {
    2         display: table-row;
    3         padding:100px;
    4         margin:100px;
    5     }
    View Code

    3、当设置display:table-cell;时,margin设置会失效。这里我进行了设置,可以看出是没有效果的。

     1 .cell {
     2         display: table-cell;
     3         padding: 10px;
     4         vertical-align: middle;/*定义行内元素垂直对齐*/
     5         height: 300px;
     6         border:1px solid green;
     7 
     8         -webkit-box-sizing: border-box;
     9         -moz-box-sizing: border-box;
    10         box-sizing: border-box;
    11     }
    View Code

    4、认识了上面的设置的作用和注意点以后,我们可以发现可以通过display:table-cell和vertical-align:middle;来进行垂直居中设置的,也是运用了cell时,vertical-align属性生效作用。

  • 相关阅读:
    R语言入门视频笔记--2--一些简单的命令
    Java 虚拟机内存优化
    Apollo 配置中心
    Apollo本地缓存文件
    SpringBoot 远程调试
    SpringCloud微服务架构下 部署在ECS上 403
    Nginx 常用命令
    阿里云数据库Redis版 ERR invalid password
    Apollo配置中心搭建
    Gateway 访问超时 返回504
  • 原文地址:https://www.cnblogs.com/lee90/p/6602478.html
Copyright © 2011-2022 走看看