在线交流

联系电话:0731-85351024 18670361250

在线联系

你还可以到这里给我们留言

全国统一服务热线

0731-85351024 18670361250

您当前所在的位置: 首页> 网站建设> 移动网站布局神器——弹性盒子模型
网站建设

移动网站布局神器——弹性盒子模型

更新时间:2014-04-17 21:54:09  编辑:广佳网络

现在移动互联网思想已经逐步入侵到各企业,各企业也开始争先恐后的开启手机网站建设。但是由于手机设备的屏幕大小不一,给手机网站的开发带来了一定的困难。传统的流式布局已经不能满足需要,这就需要引入CSS3的布局机制---弹性盒子模型。


传统的流式布局是通过内容决定父容器的大小而弹性盒子模型是在指定大小的父容器里为子元素分配空间。

简单的流式布局的例子:

代码:


效果


从上面的例子可以看出,父级的宽度是有内容为“aaaa”和内容为“bbbb”的两个div宽度来相加决定的。


现在我们开始使用弹性盒子模型:

代码:


效果:


现在我们为父级设定了宽度为200像素,同时加入了CSS3的特有样式 DISPLAY  -webkit-box ,子元素可以 -webkit-box-flex样式也可以没有-webkit-box-flex样式。 如果子元素有样式-webkit-box-flex 1 ,则表示占用父级元素的1个单位(同理-webkit-box-flex 2 表示占用2 单位)的宽度。这样父级元素的宽度分配规则是:父级的宽度减去没有-webkit-box-flex的子元素的宽度 得到的宽度 按照-webkit-box-flex后面的数字等分。


有了这样的神器, 手机网站开发就变得相当容易了!