浅谈 css3 box盒子模型以及box-flex的使用

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:right
center 居中对齐, 类似div.设定了宽度,然后margin: 0 auto
justify : 就是自适应撑开到父容器的宽度
 
 
 
 

二、常见问题总结

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 在进行比例切分,这个也符合我们的要求。

转载于:https://www.cnblogs.com/lztkiss/p/4668162.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值