标签：
今天给大家分享一篇关于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,从左上角到右下角。第二个参数表示起点颜色和终点颜色
推荐阅读：高级工程师手把手带你做企业门户前端
标签：
原文地址：http://www.cnblogs.com/dnaoba/p/5422198.html
