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、引入针对不同设备的样式表
- <link rel="stylesheet" type="text/css" href="../css/print.css" media=”all and (orientation:portrait)”/>
- @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、移动端媒体
- <meta name="viewport" content="" />
- 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]
