css3-box-flex布局

本文分享了作者在前端布局方面的实战经验,包括两列定宽布局、两列流动布局、三列定宽布局及三列流动布局的实现技巧,并重点介绍了CSS3中的box-flex布局。

  想找份实习工作,兀哥给了我一份前端题目,昨天晚上 终于有空,看一看那些题目,不幸的是在第一题,就被卡住了,卡住了。。。说多了,都是泪大哭

对前端正式入门不到半个月,css有关内容也只看过四五天,主要看了有关浮动和清除浮动,看了两列定宽布局,两列流动布局,以及三列定宽布局。简单的记一些要点。然后好好整理一下有关css3中的box-flex布局。

1.两列定宽布局。要点:包含div的宽度(设置最小宽度和最大宽度)一般都是确定的;列div都需要设置宽度并且浮动float,不能让两列的总宽度超过包含的div(通过在列div中设置一个内部div,将其属性overflow设置为hidden。);footer底部,需要清除clear:both。

2.两列流动布局。要点:和上面一样。不同的是列div的宽度设置。左边div的宽度(X)固定并且左浮动,右边div的不设置宽度,但是需要设置margin-left为X。

3.三列定宽布局。要点:和两列定宽布局一样,不同的只是现在有三个列div。

4.三列流动布局。要点:需要实现两边定宽,中间流动的效果,需要使用一些技巧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值