四川盐亭网站制作公司

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弹性盒模型与布局
文章网址：http://scyanting.com/article/pcgiio.html

其他资讯