5

display:table-cell的应用[转]

 2 years ago
source link: http://www.poetries.top/2016/09/07/display_table-cell%E7%9A%84%E5%BA%94%E7%94%A8%5B%E8%BD%AC%5D/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

display:table-cell的应用[转]

Created at 2016-09-08 Updated at 2017-01-06 Category Front-End Tag CSS

display:table-cell属性简述

  • display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用
  • table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与loat:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性

display:table-cell与大小不固定元素的垂直居中

  • 使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了
display:table-cell;
width:1em;
height:1em;
border:1px solid #beceeb;
font-size:144px;
text-align:center;
vertical-align:middle;
div img{
vertical-align:middle;

display:table-cell与两栏自适应布局

  • display:table-cell可以用在两栏的自适应布局上
  • 对于不认识display:table-cell属性的IE6/7呢，使用display:inline-block属性代替display:table-cell就完全ok

display:table-cell下的等高布局

  • table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性
  • table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK