推荐几个响应式网站做参考,wordpress会员写文章,简单的网站设计,php很简单的商城源码1. display:table-cell属性指让标签元素以表格单元格的形式呈现#xff0c;类似于td标签。我们都知道#xff0c;单元格有一些比较特别的属性#xff0c;例如元素的垂直居中对齐#xff0c;关联伸缩等#xff0c;所以display:table-cell还是有不少潜在的使用价值的
与其他…1. display:table-cell属性指让标签元素以表格单元格的形式呈现类似于td标签。我们都知道单元格有一些比较特别的属性例如元素的垂直居中对齐关联伸缩等所以display:table-cell还是有不少潜在的使用价值的
与其他一些display属性类似table-cell同样会被其他一些CSS属性破坏例如float, position:absolute所以display:table-cell与float:left或是position:absolute属性尽量不要用时使用。设置了display:table-cell的元素对宽度高度敏感对margin值无反应响应padding属性基本上就是活脱脱的一个td标签元素了
2. display:table-cell与大小不固定元素的垂直居中 这里的实现是借助了IE默认文字空间的概念将font-size设置得很大目的是撑开IE下默认文字空间的高度然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐
3. display:table-cell与两栏自适应布局 左侧为头像右侧内容自适应。其中头像部分使用了float属性左浮动IE8以及Firefox、Chrome、Opera等现代浏览器右侧使用了display:table-cell属性结果就自适应了很简单的代码很神奇的效果
在本例demo中右侧内容足够多所以宽度完整的撑开了如果内容有限则宽度就是内容的宽度此时想要让某个元素例如关闭按钮右侧定位就会有问题解决方法就是定义一个非常宽的宽度就像上面facebook截图中的CSS属性一样所以考虑到各种情况更健壮耐用的CSS代码应如下 4. display:table-cell下的等高布局
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以很多时候我们需要等高布局的时候就可以借助display:table-cell属性。说到table-cell的布局不得不说一下“匿名表格元素创建规则” 举个例子吧如果我们为元素使用“display:table-cell;”属性而不将其父容器设置为“display:table-row;”属性浏览器会默认创建出一个表格行就好像文档中真的存在一个被声明的表格行一样
实现等高布局毫无疑问display:table-cell是首选这就好比鼹鼠生下来就是为了打洞用的。考虑到匿名创建表格元素的问题所有table-cell元素外一定要留有一个用来包裹的标签。于是我们有类似下面的CSS代码 5. display:table-cell下的列表布局
这里的列表布局专指横向repeat的布局就像下图所示的 一般这类布局都是使用浮动的。但是浮动布局的不足在于一是需要清除浮动造成影响二是不支持不定高列表的浮动。替代浮动布局的方法是有的如果深究细节以及一些思想方法还不少。其中有一个方法就是使用display:table-cell
display:table-cell下的列表布局最适用的场景是列表个数不固定但是无论列表几个都平分容器空间。什么意思呢就是如果4个列表希望每个宽度25%3个就33.3333%2个列表希望每个宽度50%。此时没有比display:table-cell更合适的技术了
父级设置display:table同时宽度为容器宽度或者直接width:100%此时display:table-cell子元素就会自动等分
