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属性生效作用。

css中display设置为table、table-row、table-cell后的作用及其注意点的更多相关文章

  1. CSS中水平居中设置的几种方式

    1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...

  2. Css中display:inline-block用法详解

    display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...

  3. 个人收集(转载)CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  4. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  5. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  6. CSS 中 display:inline-block 属性使用详解

    本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...

  7. css中display的属性解析

    display 属性规定元素应该生成的框的类型. 他有很多属性值,见如下表格: none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会 ...

  8. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  9. 整理CSS中display flex(布局利器)

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

随机推荐

  1. [Sciter] Script与Native交互

    原帖地址:http://www.cnblogs.com/yinxufeng/p/5653920.html Script与Native交互基础简化方式Script调用NativeNative调用Scri ...

  2. 返回零长度的数组或者集合,而不是null

    <<Effective Java>> 第四十三条:返回零长度的数组或者集合,而不是null 假设一个方法的返回值类型是集合或者数组 .假设在方法内部须要返回的集合或者数组是零长 ...

  3. centos7 配置虚拟交换机(物理交换机truckport设置)(使用brctl)

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  4. Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content

    Content-Type https://tools.ietf.org/html/rfc7231#section-3.1.1.5 https://tools.ietf.org/html/rfc7231 ...

  5. commons-fileupload、smartUpload和commons-net-ftp

    1.本地上传 在许多Web站点应用中都需要为用户提供通过浏览器上传文档资料的功能,例如,上传个人相片.共享资料等.在DRP中,就有这个一个功能,需要将对应的物料图片上传并显示.对于上传功能,其实在浏览 ...

  6. 设计模式-(18)命令模式 (swift版)

    一,概念: 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这种情况下,如何将 ...

  7. SERVLET类常用接口及方法

    SERVLET类常用接口及方法 2011-09-09 16:14:43    [size=xx-small]SERVLET类常用接口及方法2007年04月05日 星期四 04:46 P.M.基本类和接 ...

  8. bzoj 4543 HOTEL 加强版

    题目大意: 求树上取三个点这三个点两两距离相等的方案数 思路: 远古时候的$n^2$做法是换根 但那样无法继续优化了 学习了一波长链剖分 考虑如何在一棵树上进行dp 设$f[i][j]$表示以$i$为 ...

  9. Git 仓库结构 (一)***

    Git 仓库      1.1Git 基本概念    在Git中,我们将需要进行版本控制的文件目录叫做一个仓库(repository),每个仓库可以简单理解成一个目录,这个目录里面的所有文件都通过Gi ...

  10. 【基于libRTMP的流媒体直播之 AAC、H264 推送】

    这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...