>웹 프론트엔드 >HTML 튜토리얼 >table-cell的手机应用场景_html/css_WEB-ITnose

table-cell的手机应用场景_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:16:241277검색

前言

最近在 前端观察 看见了这篇老文章,看见了元素居中的5种办法,其中提到了 display:table-cell 这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒其实可以用到移动端来。

在PC端,应该很少用到 display:table-cell 这个属性,究其原因在于兼容性【IE8+以及现代浏览器才支持】,或者说很少去关注这个标签。此标签的用处就是垂直居中布局功能,这个功能可以让我们不用依赖 margin:0 auto 属性达到居中的目的,并且 margin 外边距还达不到 table-cell 的效果。

元素居中

让一个块级元素居中,我们都想到了 margin:0 auto 属性,一般的最外层的布局经常看见这属性,但是这样的居中只是把元素整体居中,元素中的内容依然按照正常流来排列,从左上角到右下角。但是这样并达不到我们需要的效果,我们需要的效果是不管元素里面的内容有多少,还是添加新内容都是垂直居中于元素。

关于垂直居中的办法,用的最多应该 position + margin 负值的办法达到居中的效果

.test{	height: 400px;	position: absolute;	top:50%;	margin-top: -200px;	background-color: #ccc;}

兼容性很好,但是必须先要确定元素的高度,并且假如包含块的高度容不下元素的内容,那么此时就要用 overflow 来处理,假如这个包含块是有背景颜色的,那么就会这样

红色框框中的小渣渣被偷窥地一览无遗,显然这是我们不想看到的,好好的穿着一件裤子,结果裤裆一直处于风口状态,呵呵。

2.float + height +margin负值,代码

#floater	{float:left; height:50%; margin-bottom:-120px;}#content	{clear:both; height:240px; position:relative;}

还是要知道你的高度,然后折半margin反拉上来。

3.position + margin,利用margin的auto恰好地把上右下左都给填满外边距的办法使其垂直居中,但是IE8-也是不支持的,代码如下

.test {	position:absolute;	top:0;	bottom:0;	left:0;	right:0;	margin:auto;	height:240px;}

这样也可以达到居中的目的,假说说元素没有设置一个显性高度或者本身不是IMG这类拥有自身高度的元素以外是不会垂直居中的,说白了还是给元素一个高度,也达不到自适应垂直居中的目的。所以还是来炒一下老饭,说不定还可以有不一样的味道。

table-cell

先来了解一下这个属性值, display:table-cell 这个属性等同 HTML中的td和th 。假如指定,那么该值所在的元素显示效果等同td或者th标签的效果。在HTML中表单元格td和th都是生成一个个矩形框,这些框有内容,有内边距和边框,就是对外边距 margin 不感冒,所以在表格当中设置一个表单元格外边距,其实是起不了作用的,demo→ table中td以及元素table-cell设置margin

说到这里,提一下前辈们说的匿名表对象,在table标签中,假如我们只是写如下代码

<table>	<!-- 其实浏览器会在这里匿名解析出tbody标签出来,如下图 -->	<tr>		<td>哈哈哈</td>		<td>哦哦哦</td>	</tr>	<tr>		<td>嘿嘿嘿</td>	</tr></table>

这个就是所谓的匿名表对象,浏览器在渲染的时候会自动的添加缺失的标签,当然,更加详细的请前往w3c规范文档: 匿名表对象

因为设置属性值为 table-cell 的元素本身就具备了td,th的效果,所以假如说在同一个包含块下多个块级元素(如.p标签)使用该属性值,那么这个时候p标签的表象就变成了th也类似 inline-block 【IE8+及现代浏览器】 如下代码

css:.test {	display: table-cell;	margin-right: 50px;	/*此margin无效*/	padding: 10px;	border: 1px solid #ccc;}HTML:<p class="test">这是第一个p标签</p><p class="test">这是第二个p标签</p><p class="test">这是第三个p标签</p>

效果:

此时设置外边距 margin 同样不感冒,每一个p标签都是紧挨着并排,并且还可以设置 height 因此,这个属性更加近似 inline-block 属性。正是因为该属性值让元素表现得更像传统表格表格布局,假如是N个相同标签并排,那么就会出现一字排开的效果,so,该属性更适合用在单页面移动端,特别是最近一段时间很火的H5单页场景应用垂直居中效果。

table-cell垂直居中

想要 table-cell 垂直居中一个页面,需要几个必要条件:

1.父元素为 display:table ,只有当其父元素,也就是包含块声明是table元素,那么才可以让table-cell的元素纯正地显示为th,td;

2.父元素为显示高度,这点可以通过js判断视窗高度,然后给定一个高度 ;

3.vertical-align:center, table-cell 的元素需要指定垂直居中属性,这样才可以妥妥地垂直居中于页面。

.foo{	display: table; 	width: 100%; 	height: 100%; } .cell {	display: table-cell; 	vertical-align: middle; 	height: 100%; }

获取窗口高度js

var height = window.innerHeight;if (typeof height !== "number") {	function setHeight () {		document.getElementById('foo').style.height = document.documentElement.clientHeight + "px"	}		};setHeight();

demo→_→ table-cell自适应垂直居中布局 。

这样就可以让一个块级元素妥妥地居中在页面可视化范围内,不过需要注意一点:

避免跟position同用,因为一个页面不可能就只有一个标题还有描述,有时候比较奇葩的还需要用到定位 position ,那么这个时候不能在设置 table-cell 的元素同时运用到 position ,这样是为了避免元素返回原本属性。

解决办法就是新建一个标签,所有的定位都是在新建标签上进行。因为前段用到了一个单页面的滑动框架 fullpage ,对英文不感冒的东西可以去腾讯员工做的一个中文档的 fullpage

,页面用到了 table-cell 值,并且页面中出现定位元素,踩了坑,所以这算是自己的一个小总结吧。

提一提vertical-align

.test {		display: table-cell;	*display: inline;	border: 1px solid #ccc;}.va-t{vertical-align: top;}.va-m{vertical-align: middle;}.va-b{vertical-align: bottom;}.va-bl{vertical-align: baseline;}.va-sup{vertical-align: super;}.va-sub{vertical-align: sub;}.va-tt{vertical-align: text-top;}.va-tb{vertical-align: text-bottom;}

刚刚在测试所以的 vertical-align 属性值的时候发现 baseline 跟 sub,super,text-top,text-bottom 表现出来的效果都是一样的【IE8+及现代浏览器】其实也就是默认值。

对于其他三个值

top 表单元格跟其包含块行框顶端对齐;

middle 表单元格内容与其包含块中间对齐;

bottom 表单元格内容与其包含块底端对齐。

结语

好了,暂时就是这么多了,推荐该属性用在移动端的H5单页面转化场景应用上,类似现在微信广告H5广告单页面的滑动效果,假如需求就是做到垂直居的,不妨试试这个 table-cell 属性值。

参考资料:

table-display
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.