display:table;使用小结

IE8支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

一、为什么不用table元素?

目前,在大多数开发环境中已经不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table元素呢?

  1. 用DIV+CSS编写出来的文件k数比用table写出来的要小。
  2. table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示。
  3. 非表格内容用table来装,不符合标签语义化要求,不利于SEO。
  4. table的嵌套性太多,用DIV代码会比较简洁。
 .......
二、要是想要一个表格的布局方式怎么办?

可以用display:table来解决。
display:table系列几乎是和table系的元素相对应的,请看下表:

table (类似)此元素会作为块级表格来显示,表格前后带有换行符。
inline-table (类似)此元素会作为内联表格来显示,表格前后没有换行符。)此元素作为一个或多个行的分组来显示。)此元素作为一个或多个行的分组来显示。)此元素作为一个或多个行的分组来显示。)此元素会作为一个表格行来显示。)此元素会作为一个或多个列分组来显示。)此元素作为一个表格单元格列来显示。
table-row-group (类似
table-header-group (类似
table-footer-group (类似
table-row (类似
table-column-group (类似
table-column (类似
table-cell (类似)此元素作为一个表格单元格来显示。
table-caption (类似
)此元素会作为一个表格标题来显示。













三、如何使用display:table?

1、元素两端对齐



	
		
		内容不固定,文字居中显示
		
	
	
		

元素两端对齐

B box
A box
通过设置left、right为display:table-cell;实现两部分的并行排列,运行效果如下:

display:table;使用小结_第1张图片

2、自动平均划分每个小模块,使其一行显示



	
		
		内容不固定,文字居中显示
		
	
	
		

自动平均划分每个小模块,使其一行显示

遇到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做, 并且都要给他们设置一个宽度,而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来, 如果li都设置成display:table-cell; 就不会出现这种情况,即使不设置宽度他们也会在一行显示, 你在加多一行他也不会掉下来,依旧会在一样显示。

  • 1
  • 2
  • 3
  • 4
  • 5

遇到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做,并且都要给他们设置一个宽度,而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来,如果li都设置成display:table-cell;就不会出现这种情况,即使不设置宽度他们也会在一行显示,你在加多一行他也不会掉下来,依旧会在一样显示。运行结果如下:

display:table;使用小结_第2张图片

3、图片垂直居中与元素/使大小不固定的元素垂直居中



	
		
		内容不固定,文字居中显示
		
	
	
		

图片垂直居中与元素

运行结果如下:

display:table;使用小结_第3张图片

4、两box实现等高对齐



	
		
		内容不固定,文字居中显示
		
	
	
		

两box实现等高对齐

左侧的box的高度始终跟随右侧的box的高度变化而变化

案例不对右侧的box设置display:table-cell,只对左侧设置,所以就会出现左侧跟随右侧高度变化而变化。

如果要实现不管两个box哪个高度产生变化另一个就跟随,只需要把右侧的box也设置成display:table-cell就可以实现了。

左侧的box的高度始终跟随右侧的box的高度变化而变化,案例不对右侧的box设置display:table-cell,只对左侧设置,所以就会出现左侧跟随右侧高度变化而变化。

如果要实现不管两个box哪个高度产生变化另一个就跟随变化,只需要把右侧的box也设置成display:table-cell就可以实现了。运行结果如下:

display:table;使用小结_第4张图片

5、弹性、响应式布局  display实现兼容性的两栏自适应布局



	
		
		内容不固定,文字居中显示
		
	
	
		

弹性、响应式布局 display实现兼容性的两栏自适应布局

移动端布局因为有display:box这等属性,所以table-cell相对就排不上什么大用场, 不过在移动端你要用table-cell也不是不可以,根据自己对属性的理解去使用就可以了。


微博评论就是使用的这种布局,运行结果如下:

display:table;使用小结_第5张图片

附:常用的左侧菜单文字上下居中显示。



	
		
		文字竖直方向居中显示
		
	
	
		
  • 热销榜热销榜热销榜热销榜
  • 优惠
  • 套餐一
  • 单点
  • 饮料










你可能感兴趣的:(CSS)