当支持HTML5时，我们可以使用样式把DIV实现一个表格table. 关键样式语法：display: table，display: table-row，display: table-cell 下面例子说明。样式代码： div { display: table; } div div { display ...
分类：
Web程序 时间：
2016-07-08 15:16:03
阅读次数：
160
在网页响应式布局中，实现水平居中很简单。可是，垂直居中方面，元素的宽度和高度是不可控的，所以很多办法并不适用。 总结了下平时用到的垂直居中的几种办法： demo中HTML代码： 一：使用table-cell; CSS代码： HTML结构： 从上面代码可以看出，为了实现垂直居中，添加了额外的元素作为外 ...
分类：
Web程序 时间：
2016-06-30 16:09:55
阅读次数：
193
CSS Resetreset link引入或者内联reset都必须写在第一位 table 块状 table-cell 单元格 flex 只做小范围的布局 否则会影响性能 table-layout：fixed 布局优先 table布局下默认等分 1.最耗资源的，最简单的 2.选择性初始化举例（综合） ...
分类：
Web程序 时间：
2016-06-23 18:49:50
阅读次数：
202
第一种： 利用 display:table 和 display:table-cell 的方式 这种方式就好像将table布局搬过来一样，相信大家对table的td还是有印象的，它的内容是可以设置垂直居中的. DEMO: 第二种方式：利用css3 display:box弹性盒子模型,css3的特别样式 ...
分类：
Web程序 时间：
2016-06-16 17:38:38
阅读次数：
244
说起居中就来气，说居中可以看出工作经验，我总结几个，大家可以参考下 1、行内元素的居中 这点不用多说，水平居中用text-align:center,垂直居中用line-hight：高值 2、已知宽高的块级元素居中 3、未知宽高的块级元素居中之table-cell 4、未知宽高的块级元素居中之tran ...
分类：
其他好文 时间：
2016-06-12 12:08:54
阅读次数：
186
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元 ...
分类：
其他好文 时间：
2016-06-04 17:36:59
阅读次数：
147
上集《CSS深入研究:display的恐怖故事解密(1) - display-inline》已经把display的属性列表拉出来溜了，发现在这个属性恐怖面貌其实都是脆弱的伪装。除了部分常用属性外，其他的都是传说哥。既然是传说哥，请不要迷恋。就让传说继续传说着吧。这次我们来搞定table-cell这个 ...
分类：
Web程序 时间：
2016-05-30 22:56:05
阅读次数：
176
float本质 float属性原本的作用就是让文字环绕，要牢记这一点 float特性 具有包裹性的其他性质 display:inline-block/table-cell/... position:absolute/fixed/sticky overflow:hidden/scroll 包裹方式 收 ...
分类：
其他好文 时间：
2016-05-28 19:08:50
阅读次数：
605
使用table-cell完成以下几种布局（ie8及以上兼容） 1、左侧定宽-右侧自适应 效果如下： （调整窗口大小，来测试右侧是否根据窗口大小改变） 2、右侧定宽-左侧自适应 效果如下： 与左侧定宽稍有不同，虽然只是定宽的位置换了，但是不能直接使用浮动像左侧定宽那种方式完成。 3、左右定宽-中间自适 ...
分类：
其他好文 时间：
2016-05-25 18:50:00
阅读次数：
225
为了达到如下图所示的效果：有三种方案：
1）float：left;
2）display:table-cell;
3）display:inline-block;
第一种方案：
弊端：1）父元素清除浮动2）最关键的是：不支持不等高的排列：
所以：如果是高度确定的元素可以通过这样的方式来排列；
第二种方案：dispaly:table-cell;对于用很多li元素的情...
分类：
其他好文 时间：
2016-05-12 17:16:17
阅读次数：
157
