详解CSS3的display:box盒子模型属性
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-webkit-)。
一、box-flex属性
1.水平等宽盒子
代码:
<html> <head> <style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; } .sectionOne{ background:orange; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionTwo{ background:purple; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionThree{ background:green; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } </style> </head> <body> <article class="wrap"> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article> </body> </html>
展示效果:
说明:父元素样式必须使用display:box;才可以对子元素在父容器内进行划分;子元素样式使用box-flex属性指定在父容器中所占比例(份数)。以上是等宽划分,三个子容器属性box-flex:1;总共将父容器按宽度均分为三份,所以子容器是等宽划分。
注意:如果定了display:box则该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center。
2.自定义划分宽度比例
将上述CSS代码中box-flex:1;改变为不同的占比。
代码:
<style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; text-align:center; } .sectionOne{ background:orange; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionTwo{ background:purple; box-flex:2; -moz-box-flex:2; -webkit-box-flex:2; } .sectionThree{ background:green; box-flex:3; -moz-box-flex:3; -webkit-box-flex:3; } </style>
展示效果:
说明:自行理解。
3.定宽子元素的处理(定宽margin)
如果父元素中一个或多个子元素设置了固定宽度,其他的子元素没有设置,其计算方式是:被设置固定宽度子元素宽度值固定为设置值,其它没有设置的子元素在(父元素宽度-所有固定宽度子元素宽度)剩下的宽度基础上按分配比例进行划分。
代码(上面代码改):
.sectionOne{ background:orange; width:300px;//设置固定宽度 }
展示效果:
如果设置了margin,则margin也算在定宽内,剩下宽度进行划分。
代码(上面代码改):
<style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; text-align:center; } .sectionOne{ background:orange; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionTwo{ background:purple; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; margin:0 50px;//添加margin宽度 } .sectionThree{ background:green; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } </style>
展示效果:
每块的宽度是减掉左右margin:100px之后的166.7px,而不是200px,在布局上也是等分布。
二、box其他属性
其他属性包括:box-orient | box-direction | box-align | box-pack | box-lines。
1.box-orient属性作用:确定父元素里子元素的排列方式,是水平还是垂直。
属性值:horizontal | vertical | inline-axis | block-axis | inherit。
如果父元素box-orient:horizontal;或box-orient:inline-axis;,对子元素进行水平排列,就是对父元素的宽度进行划分。(此时如果父元素定义了高度值,其子元素的高度值设置则无效状态,所有子元素的高度等于父元素的高度值;如果父元素不设置高度值,其子元素的高度值才有效并且取最大高度值的子元素的高度。)亲测子元素的高度会溢出父元素设置的高度,并且每个子元素持有自己设置的高度,不一致,括号里的说明待查证,代码和展示效果如下。
代码:
<style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; text-align:center; -moz-box-orient:inline-axis; -webkit-box-orient:inline-axis; } .sectionOne{ background:orange; height:100px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionTwo{ background:purple; height:200px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionThree{ background:green; height:300px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } </style>
展示效果:
如果父元素box-orient:vertical;l或box-orient:block-axis;(此属性是默认值),对子元素进行垂直排列,就是对父元素的高度进行划分。(此时如果父元素定义了宽度值,其子元素的宽度值设置则无效状态;如果父元素不设置宽度值,其子元素的宽度值才有效并且取最大宽度值的子元素的宽度。)同上,亲测子元素的宽度会溢出父元素设置的高度,并且每个子元素持有自己设置的宽度,不一致,括号里的说明待查证,代码和展示效果如下。
代码:
<style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; text-align:center; -moz-box-orient:vertical; -webkit-box-orient:vertical; } .sectionOne{ background:orange; width:500px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionTwo{ background:purple; width:600px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } .sectionThree{ background:green; width:700px; box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; } </style>
展示效果:
box-orient:inherit;为继承父元素的该值设置。
2、box-direction
属性作用:确定父元素里的子元素排列顺序,是正常顺序还是反转顺序。
属性值:normal | reverse | inherit。
该属性值很好理解,父元素属性box-direction:normal;指按照html标签的正常顺序排列子元素,box-direction:reverse;指按照反转(反序)顺序排列子元素,box-direction:inherit;指继承父元素的改值。直接给出展示效果。
展示效果(正序):
展示效果(反序):
3.box-align
属性作用:确定父元素里面子元素的垂直对齐方式。
属性值:start | end | center | baseline | stretch。
box-align:start;表示子元素居顶对齐,展示效果:
box-align:end;表示子元素居底对齐,展示效果:
box-align:center;表示子元素居中对齐,展示效果:
4、box-pack
属性作用:确定父元素里面定宽子元素的水平对齐方式。
属性值:start | end | center | justify。
代码:
<style> .wrap{ width:600px; height:200px; display:box; display:-moz-box; display:-webkit-box; text-align:center; border:1px solid brown; -webkit-box-pack:justify; } .wrap section{ width:100px; } .sectionOne{ background:orange; } .sectionTwo{ background:purple; } .sectionThree{ background:green; } </style>
box-pack:start;表示子元素整体水平居左对齐,展示效果:
box-pack:end;表示子元素整体居右对齐,展示效果:
box-pack:center;表示子元素整体居中对齐,展示效果:
box-pack:justify;表示子元素水平等分父元素宽度,展示效果:
以上就是详解CSS3的display:box盒子模型属性的详细内容,更多请关注其它相关文章!
推荐阅读
-
CSS3中的box-sizing属性实例详解
-
浅谈CSS3 box-sizing 属性 有趣的盒模型
-
详解CSS3的box-shadow属性制作边框阴影效果的方法
-
浅谈 css3 box盒子模型以及box-flex的使用_html/css_WEB-ITnose
-
详解CSS3的display:box盒子模型属性
-
盒子的布局位置box-ordinal-group属性详解
-
CSS盒子模型之CSS3可伸缩框属性(Flexible Box)_html/css_WEB-ITnose
-
浅谈CSS3 box-sizing 属性 有趣的盒模型
-
css box-sizing属性(盒子模型)的用法介绍
-
CSS盒子模型之CSS3可伸缩框属性(Flexible Box)_html/css_WEB-ITnose