CSS3弹性盒模型与布局
一、弹性盒模型
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、宁武网站维护、网站推广。
1、注意：在使用弹性盒模型的时候，父元素必须要加display:box 或 display:inline-box，同时要加浏览器内核前缀
Box-orient 定义盒模型的布局方向
Horizontal 水平显示
vertical 垂直方向
box-direction 元素排列顺序
Normal 正序
Reverse 反序
box-ordinal-group 设置元素的具体位置
Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 对盒子富裕的空间进行管理
Start 所有子元素在盒子左侧显示，富裕空间在右侧
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
box-align 在垂直方向上对元素的位置进行管理
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
2、盒模型阴影
box-shadow:[inset] x y blur [spread] color
参数
inset：投影方式——inset：内投影；不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径——先扩展原有形状，再开始画阴影
color:颜色
3、其他盒模型新增属性
box-reflect 倒影（只支持webkit内核）：right 10px linear-gradient(rgba(0,0,0,1) 0,rgba(0,0,0,0) 100%)
direction 方向：above|below|left|right;
距离（可选）
渐变（可选）
resize 自由缩放:注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
二、分栏布局（只有webkit浏览器内核支持）
column-width 栏目宽度
column-count 栏目列数
column-gap栏目距离
column-rule 栏目间隔线
三、响应式布局
媒体类型：
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection打印预览
screen彩屏设备
speech'听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
关键字
and
not 用来排除某种制定的媒体类型
only 用来定某种特定的媒体类型
媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
1、引入针对不同设备的样式表
@import url("css/reset.css") screen;
2、在CSS文件中设置不同设备的样式
@media screen{ 选择器{ 属性：属性值； } }
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
3、移动端媒体
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
网站名称：CSS3弹性盒模型与布局
链接URL：http://6mz.cn/article/pcgiio.html