CSS3盒模型与弹性布局详解.pdfVIP

弹性盒模型

⚫注意在使用弹性盒模型的时候父元素必须要加

disy:box或disy:inline-box

⚫Box-orient定义盒模型的布局方向

•Horizontal水平显示

•vertical垂直方向

⚫box-direction元素排列顺序

•Normal正序

•Reverse反序

⚫box-ordinal-group设置元素的具置

弹性盒模型(2)

⚫Box-flex定义盒子的弹性空间

•子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的

box-flex属性值的和

⚫box-pack对盒子富裕的空间进行管理

•Start所有子元素在盒子左侧显示，富裕空间在右侧

•End所有子元素在盒子右侧显示，富裕空间在左侧

•Center所有子元素居中

•Justify富余空间在子元间平均分布

弹性盒模型(3)

⚫box-align在垂直方向上对元素的位置进行管理

•Star所有子元素在据顶

•End所有子元素在据底

•Center所有子元素居中

盒模型阴影

⚫用法

•box-shadow:[inset]xyblur[spread]color

•参数

–inset：投影方式

»inset：内投影

»不给：外投影

–x、y：阴影偏移

–blur：模糊半径

–spread：扩展阴影半径

»先扩展原有形状，再开始画阴影

–color

其他盒模型新增属性

⚫box-reflect倒影

•direction方向above|below|left|right;

•距离

•渐变（可选）

⚫resize自由缩放

•Both水平垂直都可以缩放

•Horizontal只有水平方向可以缩放

•Vertical只有垂直方向可以缩放

•注意：一定要配合overflow:auto一块使用只有水平方

向可以缩放

其他盒模型新增属性(2)

⚫box-sizing盒模型解析模式

•Content-box盒模型

width/height=border+padding+content

•Border-box怪异盒模型width/height=content

Css3分栏布局

⚫column-width栏目宽度

⚫column-count栏目列数

⚫column-gap栏目距离

⚫column-rule栏目间隔线

⚫类型

•all所有

•braille盲文触觉设备

•embossed盲文

•print手持设备

•projection打印预览

•screen彩屏设备

•speech听觉类似的类型

•tty不适用像素的设备

•tv电视

⚫关键字

•and

•notnot关键字是用来排除某种制定的类型

•onlyonly用来定某种特定的类型

⚫特性

•(max-width:600px)

•(max-device-width:480px)设备输出宽度

•(orientation:portrait)竖屏

•(o