Open cqupt-yifanwu opened 7 years ago
虽然table布局因为它的一些非语义化、布局代码冗余，以及不好维护改版等缺点被赶出了布局界。但是在css不给力时期，table布局也曾风靡一时，就算现在看来table的一些布局的特性也是非常给力的，而幸好css也吸取了table布局一些好的特性为己用。让我们可以使用更少、更语义化的标签来模拟table布局，可以跳过table布局的缺点又实现我们想要的效果，所以我们首先需要了解table的一些特性以及对应的css属性。 我们在不居中使用到的也就是table、tr、td的一些特性，所以我们只需要了解这三个标签的特性就足够了。
在上面几个中，我们用display:table-cell用的比较多。与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
关于table布局
虽然table布局因为它的一些非语义化、布局代码冗余，以及不好维护改版等缺点被赶出了布局界。但是在css不给力时期，table布局也曾风靡一时，就算现在看来table的一些布局的特性也是非常给力的，而幸好css也吸取了table布局一些好的特性为己用。让我们可以使用更少、更语义化的标签来模拟table布局，可以跳过table布局的缺点又实现我们想要的效果，所以我们首先需要了解table的一些特性以及对应的css属性。 我们在不居中使用到的也就是table、tr、td的一些特性，所以我们只需要了解这三个标签的特性就足够了。
一些table的表现
display：table
display：table-row
display:table-cell
着重学习display:table-cell
在上面几个中，我们用display:table-cell用的比较多。与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
参考：