登录  /  注册
浅谈 css3 box盒子模型以及box-flex的使用_html/css_WEB-ITnose
php中文网
发布:2016-06-24 11:40:26
原创
1112人浏览过

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

一、使用以及介绍:

1、要实现水平或者垂直切分,必须先满足以下要求

i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性

ii. .panel的元素定义box-flex,来实现按比例切分。如下图:就是将三个div水平切分成6份

登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

.parent{display:box or -moz-box or -wekit-box}.panel1{box-flex : 1};.panel2{box-flex : 2};.panel3{box-flex : 3};
登录后复制

上面罗列的是一个简单的例子,在这个基础上我们如果想垂直布局呢,理论上按我们现在的布局去理解的话就是div.panel1+div.panel2+div.panel3 这种方式也可以,但我们今天考虑到box这个,所以下面用box来实现这个

2、垂直布局的话涉及到另外一个属性: box-orient(父元素上) : 这个属性有以下几个值

登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

horizontal //水平vertical // 垂直inline-axis //也算是水平block-axis//也算是垂直,跟垂直没有什么区别inherit // 水平,垂直
登录后复制
p.s : 当设置了水平(horizontal)或者 inline-axis 的话,如果父容器设置了高度,子容器的高度会跟父容器保持一致(即时子容器设置了高度也无效)。如果父容器不设置高度值,其子容器的高度值才有效并且取最大高度值的子容器的高度。同理,如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话,子容器设置宽度会无效。如果父容器不设置宽度值,其子容器的宽度值才有效并且取最大宽度值的子容器的宽度
登录后复制

登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

现在水平排版垂直排版都没有问题了,但是我有时候想实现凹凸的水平布局(如:中间突出a,两边登高b,c)或者凹凸垂直布局,这种的话,那怎么弄呢?需要这样子的话,当然就不能用上面所说的box-orient啦,这样子的话盒子里面的宽高都可以不同

那我们能否实现bc模块与a模块垂直对齐,水平对齐呢?

3、那我们就可以用到这个属性: box-align(用在父元素上): 其有以下属性值

登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

start  // 理解为valign = top 以顶部对齐, 、end  //理解为  valign = bottom 以底部对齐center // 理解为  valign = center 以居中对齐baseline //理解为以某一个元素的基准线进行对齐,stretch(默认值)  //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸
登录后复制

登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

p.s 当父容器有宽度高度的时候     1、如果是水平切分,设置box-align的值不等于stretch(拉伸)的时候,内容的子容器的高度不再是父容器的高度,而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候,子容器的高度变成自身的高度     2、如果是水平切分,设置box-align的值不等于stretch(拉伸)的时候,内容的子容器的高度不再是父容器的高度,而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候,子容器的高度变成自身的高度
登录后复制

4、 box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示,此参数要生效的话前提条件是: 子容器的总长度<父容器的宽度,这个设置才能起效(自己写的demo出来的结果)

start 代表向左对齐end 代表向右对齐,类似与float:rightcenter 居中对齐, 类似div.设定了宽度,然后margin: 0 autojustify : 就是自适应撑开到父容器的宽度
登录后复制

二、常见问题总结

1、要实现某一块宽度定死,那这个布局是怎么布的呢,结果又是什么,如下demo

.parent{display:box or -moz-box or -wekit-box}.panel1{box-flex : 1};.panel2{box-flex : 2;width:200px};.panel3{box-flex : 3};
登录后复制

这样子写的话(既有比例区分,又有精确的宽度的话,比例无效) 这时候中间这块永远都是200px,两边的两块根据父容器宽度-200px 在进行比例切分,这个也符合我们的要求。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
  • 蓝色极简风格律师事务所网站模板
  • 汉堡披萨快餐美食网站模板
  • 创意数字服务机构HTML5模板
网站特效
网站源码
网站素材
前端模板
关于我们免责申明意见反馈讲师合作广告合作技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023//m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学