css3基础教程：CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章，主要是讲CSS3弹性盒模型。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

注意: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的表现也是一致的，让元素纵列





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属性值之和





box-flex-group:值为n.目前没有浏览器支持

box-ordinal-group:值为n.规范框中子元素的显示次序。

默认值是1.值越小的元素会在值更高的元素前面显示。





其它：

resize自由缩放

both|horizontal|vertial

both水平垂直方向都可以缩放

horizontal只有水平方向可以缩放

vertical只有垂直方向可以缩放

需要配合overflow一起使用





类似于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,从左上角到右下角。第二个参数表示起点颜色和终点颜色

推荐阅读：高级工程师手把手带你做企业门户前端