方法一 content .table {display:table;}.table-cell {display:table-cell; vertical-align:middle;}优点：content 可以动态改变高度，如果你不需要支持IE7浏览器，这个应该是首选方案，也是W3C推荐的方案。缺点：IE7和IE8 beta不支持。方法二Content#content { p...
分类：
Web程序 时间：
2015-04-19 22:50:42
阅读次数：
180
1 2 未知高度和宽度的内容3 未知高度和宽度内容4 需要实现两个子容器中一个依据另外一个的高度而自动等高，同时父容器也是同样自动等高，宽度可以自适应或者按需分配。目前我学习到的两种解决办法一种是利用flexbox，另外一种是利用table和table-cell，下文均有解释。//-...
分类：
其他好文 时间：
2015-04-10 15:22:34
阅读次数：
424
一、浮动的特性 float最初设计的初衷仅仅是为了文字环绕效果。 float的特性：包裹和破坏 包裹具有三种行为和表现：收缩（水平方向收缩），坚挺，隔绝。 下图可以形象的描述： 具有包裹性的其他情况比如： dispaly:inline-block/table-cell/... ...
分类：
其他好文 时间：
2015-04-01 23:40:55
阅读次数：
186
display:table:此元素会作为块级表格来显示（类似 ）; display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了displa...
分类：
Web程序 时间：
2015-03-20 14:20:49
阅读次数：
163
一、把容器当作表格单元
按钮
.middle-demo1{
display: table-cell;
height: 100px; //可以动态改变高度，这里只是演示
vertical-align: middle;
border: 1px solid #666;...
分类：
Web程序 时间：
2015-03-18 12:27:30
阅读次数：
167
display：none |inline| block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-colum...
分类：
Web程序 时间：
2015-03-13 12:11:09
阅读次数：
120
table-cell我们却能用得到，而且是用它来干一件很重要的事情——多列布局。 多列布局在css中有多重要就不用我说了吧，传统模式下大家都使用float来解决这一问题，但是float写出来的东西代码复杂，宽度调整不灵活，浏览器兼容性有问题。所以才有了新方案——table-cell，注意，IE6、....
分类：
其他好文 时间：
2015-03-10 17:00:56
阅读次数：
137
一、BFC(Block Formatting Context)相关网址：http://www.cnblogs.com/dolphinX/p/3508869.html1.怎样才能形成BFC float的值不为none。overflow的值不为visible。display的值为table-cell, ...
分类：
其他好文 时间：
2015-03-03 21:58:03
阅读次数：
165
一、BFC(Block Formatting Context)相关网址：http://www.cnblogs.com/dolphinX/p/3508869.html1.怎样才能形成BFC float的值不为none。overflow的值不为visible。display的值为table-cell, ...
分类：
Web程序 时间：
2015-03-03 01:10:27
阅读次数：
263
BFC与hasLayout都是CSS布局上的概念。几个月前在微博上才了解什么是BFC，算是对布局有点初步的了解。hasLayout则是IE6、7产生许多bug的根源。浮动、绝对定位元素，不是块框的块容器（inline-block, table-cell, and table-caption），以及设...
分类：
其他好文 时间：
2015-03-02 23:45:40
阅读次数：
232
