CSS3弹性盒模型

来源:互联网 发布:smart 改装轮毂数据 编辑:程序博客网 时间:2021/10/19 06:46

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。
注意: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>

direction:above | below | left | right
倒影在对象的上方、下方、左边、右边
offset:length|percentage
图片与倒影之间的间隔,可以为负值
mask-box-image(可选):none | url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient
url图像遮罩
linear-gradient使用线性渐变创建遮罩图像
radial-gradient使用径向(放射性)渐变创建遮罩图像
repeating-linear-gradient使用重复的线性渐变创建遮罩图像
repeating-radial-gradient使用重复的径向渐变创建遮罩图像

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

1 1