CSS3弹性盒模型

来源：互联网发布：smart 改装轮毂数据编辑：程序博客网时间：2024/04/26 01:13

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
注意:Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。
盒模型的兼容性不佳，在使用时，需要加上浏览器的私有前缀。

父元素display:box或者display:inline-box;

display: -webkit-box;display: -moz-box;display:box;

父元素的属性：

box-orient确定子元素的方向，是水平排列还是竖直排列。

horizontal|vertical|inline-axis|block-axis|inherit
inline-axis是默认值。
且horizontal与inline-axis的表现似乎一致的，让子元素横排；
而vertical与block-axis的表现也是一致的，让元素纵列

<style>.box{display: -webkit-box;display: -moz-box;display:box;height: 300px;width:300px;-webkit-box-align:stretch;box-align:stretch;-moz-box-orient: block-axis;-webkit-box-orient: block-axis;box-orient:block-axis;}        .box :nth-child(1){background: #E08BE1;-moz-box-flex: 2;-webkit-box-flex: 2;-o-box-flex:2;-ms-box-flex:2;}        .box :nth-child(2){background: #ECFF98;-moz-box-flex: 3;-webkit-box-flex: 3;-o-box-flex:3;-ms-box-flex:3;}        .box :nth-child(3){background: #9BFF67;-moz-box-flex: 4;-webkit-box-flex: 4;-o-box-flex:4;-ms-box-flex:4;}        .box :nth-child(4){background: #FFBCA8;-moz-box-flex: 5;-webkit-box-flex: 5;-o-box-flex:5;-ms-box-flex:5;}</style></head><body><div class="box">    <div></div>    <div></div>    <div></div>    <div></div></div>

这里写图片描述

box-direction确定子元素的排列顺序。
normal|reverse|inherit
normal是默认值，表示正常顺序，即从左往右,自上而下。
reverse表示反转，即与正常顺序相反。
上面代码，在父元素中加上如下代码，使其逆序

-moz-box-direction: reverse;-webkit-box-direction: reverse;box-direction:reverse;

这里写图片描述
box-align:决定了垂直方向上的空间利用.
start|end|center|baseline|stretch
stretch是默认值，拉伸，父标签的元素多高，其子元素的高度也为多高。
start表示顶边对齐
end表示底部对齐
center表示居中对齐
baseline表示基线对齐

垂直方向上：

-moz-box-orient: inline-axis;-webkit-box-orient: inline-axis;box-orient:inline-axis;

水平方向：

-moz-box-pack: justify; -webkit-box-pack: justify; box-pack:justify;

这里写图片描述

box-pack:决定了水平方向上的空间利用。
start|end|center|justify
start是默认值，表示和父元素的起始位置一致。
start所有子元素在盒子起始位置显示，富裕空间另一侧
end 所有子元素在盒子终止位置显示，富裕空间起始位置
center 所有子元素居中，富裕空间在两侧
justify 富余空间在子元素之间平均分布

box-line:决定子元素是否可以换行显示。(不支持)
single|multiple
single是默认值，表示不换行
multiple允许多行显示

子元素的属性
box-flex:值为n
子元素的尺寸=盒子的尺寸*子元素的box-flex的属性值/所有子元素box-flex属性值之和

<style>.box{display: -webkit-box;display:-o-box; display: -moz-box;display:box;height: 300px;-webkit-box-align:stretch;box-align:stretch;}        .box :nth-child(1){background: #E08BE1;-moz-box-flex: 2;-webkit-box-flex: 3;-o-box-flex:3;}        .box :nth-child(2){background: #ECFF98;-moz-box-flex: 3;-webkit-box-flex: 3;-o-box-flex:3;}        .box :nth-child(3){background: #9BFF67;-moz-box-flex: 4;-webkit-box-flex: 4;-o-box-flex:4;}        .box :nth-child(4){background: #FFBCA8;-moz-box-flex: 5;-webkit-box-flex: 5;-o-box-flex:5;}</style></head><body>    <div class="box">        <div></div>        <div></div>        <div></div>        <div></div>    </div></body>

这里写图片描述

box-flex-group:值为n.目前没有浏览器支持
box-ordinal-group:值为n.规范框中子元素的显示次序。
默认值是1.值越小的元素会在值更高的元素前面显示。

<style>.box{display: -webkit-box;display: -moz-box;display:box;height: 200px;width:600px;-webkit-box-align:stretch;box-align:stretch;font-size:40px;line-height: 200px;}        .box div{text-align: center;}        .box :nth-child(1){background: #E08BE1;-moz-box-flex: 2;-webkit-box-flex: 3;-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;}        .box :nth-child(2){background: #ECFF98;-moz-box-flex: 3;-webkit-box-flex: 3;-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;}        .box :nth-child(3){background: #9BFF67;-moz-box-flex: 4;-webkit-box-flex: 4;-webkit-box-ordinal-group:4;-moz-box-ordinal-group:4;}        .box :nth-child(4){background: #FFBCA8;-moz-box-flex: 5;-webkit-box-flex: 5;-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;}</style></head><body><div class="box">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div></div>

这里写图片描述

其它：
resize自由缩放
both|horizontal|vertial
both水平垂直方向都可以缩放
horizontal只有水平方向可以缩放
vertical只有垂直方向可以缩放
需要配合overflow一起使用

<style>.box{resize: both;overflow: auto;width:200px;height: 200px;border:2px solid #FF77D2;background: url("../images/photo.jpg")}</style></head><body>    <div class = "box"></div></body>

这里写图片描述

类似于textarea多行文本框，拉动右下角，可以自由缩放div的大小。
盒模型阴影：
box-shadow:inset x y blur spread color

inset:投影方式
inset内投影
outset外投影，默认是外投影
x阴影水平方向偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
y阴影竖直方向偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
blur:模糊半径,此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
spread:扩展阴影半径,此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
color:阴影颜色，此参数可选，默认为黑色
IE8下的box-shadow效果(IE9开始支持box-shadow)
基本语法：filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

盒模型倒影

box-reflect:none | <direction> <offset>? <mask-box-image>

liner-gradient([ || ,]? , [, ]*)
第一个参数表示线性渐变的方向,top表示从上到下，left从左到右，如果写left top,从左上角到右下角。第二个参数表示起点颜色和终点颜色

1 1