zoukankan      html  css  js  c++  java
  • 博客园首页新随笔联系管理订阅订阅随笔- 34 文章- 0 评论- 0 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设置会失效。【可自己测试一下】

    .table {
            display: table;
            margin: 5px;
            width: 1000px;
            border:1px solid red;
    
        }

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

     .row {
           display: table-row;
           padding:100px;
           margin:100px;
    }

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

    .cell {
            display: table-cell;
            padding: 10px;
            vertical-align: middle;/*定义行内元素垂直对齐*/
            height: 300px;
            border:1px solid green;
    
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

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

     转载:https://www.cnblogs.com/lee90/p/6602478.html

  • 相关阅读:
    作为前端开发兼任产品专员是一种咋样的体验
    css忽略某一层的存在:pointer-events:none
    响应式网站对百度友好关键
    移动站点对百度友好全解
    如何布局您的PC站和移动站,并表达两者之间内容的对应关系
    猫眼电影App抓包获取评论数据接口
    字符串模拟大数相加——Java实现
    计算机网络知识小结
    二叉树与双向链表问题
    算法编程题积累(4)——腾讯笔试"有趣的数字“问题
  • 原文地址:https://www.cnblogs.com/taohuaya/p/14285108.html
Copyright © 2011-2022 走看看