当前位置:Gxlcms > html代码 > 浅谈css3box盒子模型以及box-flex的使用_html/css_WEB-ITnose

浅谈css3box盒子模型以及box-flex的使用_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:64人阅读

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

人气教程排行