首页电商视觉设计技术文章正文

ui培训之流式布局弹性盒模型(三)

更新时间:2016年05月06日15时32分来源:传智播客UI培训学院浏览次数:

三、特殊的弹性布局

在手机页面制作中，我们经常会遇见一种特殊的布局形式。比如下图所示，中间的部分是百分比的宽度，而左右两端是固定布局。这是如何做到的呢？
方法1：传统绝对定位的方法

方法2：
CSS3中的弹性盒属性：给父亲设置display:-webkit-box;表示自己的内部儿子是弹性盒。给子元素设置-webkit-box-flex属性，用数值表示比例。

div{
width: 800px;
height: 100px;
margin: 100px auto;
background-color: pink;
/*要把盒子变成弹性盒模型:*/
display: -webkit-box;
}
/*所有的p，既没有宽度，也没有浮动*/
div p:nth-child(1){
background-color: red;
-webkit-box-flex:1;
}
div p:nth-child(2){
background-color: blue;
-webkit-box-flex:2;
}
div p:nth-child(3){
background-color: green;
-webkit-box-flex:3;
}

高度的等比例变化。

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui

上一篇：ui培训之流式布局弹性盒模型(二) 下一篇：ui培训媒体查询-响应式网页制作教程（一）

最新资讯

相关阅读

0 分享到：

javaee

python

web

design

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

Python

jdbc

北京校区

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

申请试听名额

热门课程推荐

更多>>

首页|校区分布|师资力量|关于我们|报名流程

常见问题|技术资讯

江苏传智播客教育科技股份有限公司版权所有
Copyright 2006-2023, All Rights Reserved

在线咨询我要报名

和我们在线交谈！