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]