用CSStabes实现更简单的用户界面开发和交互式布局.docxVIP

用CSS tables实现更简单的用户界面开发和交互式布局 CSS tables 提供了简单可靠的UI布局解决方案。因为CSS tables十分简单易懂，因此在交互式设计中用起来十分方便。下面我们来具体介绍这些超赞的CSS属性。 CSS 属性/值 模式能够实现很多用其他方式（如Flexbox）实现比较麻烦的布局。本文主要介绍display: table 和 display :table-cell。首先我们要解释一下这里没有任何新的技术，其实人们已经讨论这些技术很多年了。只不过很少有人知道它们并真正去使用它们。 CSS tables 首先大家要清楚。CSS tables只是用来展示的。也就是说，CSS tables 和 HTML table 标签没有任何相关联性，它们之间的使用互不影响。CSS tables在我得书中有很多例子，大家可以去? HYPERLINK http://benfra.in/1y5 Responsive web design with HTML5 and CSS3 中查看。有些读者可能认为使用CSS tables是不好的。希望我们这篇文章能够澄清开发者概念中的一些混淆。 我们以前常用的是将一个标签属性设为‘display:block’所以类似的我们只需要用‘display:table’或者‘display:table-cell;’就可以了。这些属性纯粹是用于布局设计。 为什么CSS tables 很棒 CSS table 不是新的东西。它是CSS2.1章程里的内容。它的兼容性很强。除了IE7及以下版本，其他的浏览器它都可以使用。我第一次看到CSS table是在我读的一本书里。这要追溯到2008年。那个时候很多人认为这个技术不好用（那个时候IE8其实也只是刚刚出现）。但如今CSS table已经相对容易维护和开发。 常见问题及实例 让我们来看看这些CSS属性能做什么。 纵向居中内容 用display：table把容器中内容横向纵向居中十分简单。如下： 注意我只需要把一个标签（table-cell）放入另一个标签（table）中: div class=tbl h1 class=cellYes, Im centred/h1 /div .tbl { display: table; width: 100%; table-layout: fixed; background-color: hotpink; height: 8rem; } .cell { display: table-cell; vertical-align: middle; text-align: center; } 注意事项： Display属性设定为table 没有宽度的话，table宽度将是它内容的宽度。 我已经把table-layout属性定位fixed。默认的auto。之后我们会详细说明。 嵌套的元素设定为table-cell。Vertical-align属性用来纵向居中。（不需要任何padding！） Text-align:center用于将水平轴的文本居中 Fixed – fluid – fixed 布局 看以下例子： 这里是一个table内包含了三个table-cells。第一个和最后一个被设定了一个固定宽度。第二个没有设定宽度，于是它占用了其他可用的空间。以下是相关HTML和CSS代码： div class=tbl div class=cell fixed1/div div class=cell fluid/div div class=cell fixed2/div /div .tbl { display: table; width: 100%; table-layout: fixed; } .cell { display: table-cell; height: 300px; } .fixed1 { background-color: aquamarine; width: 200px; } .fluid { background-color: hotpink; } .fixed2 { background-color: wheat; width: 150px; } 这里方便的一点就是无论table的宽度设为多少，嵌在table-cells的元素是等高的并等同于table的高度。所以说css table很适用于多列布局。 在嵌入元素中使用overflow hidden 我们来继续上一个例子。设想你有一个display:table在最外层。然后里面有display:table-cell 的元素（可能是主体内容或者侧边条）。其中有一部分你有一个