码迷,mamicode.com
首页 > Web开发 > 详细

CSS3弹性盒模型与布局

时间:2016-07-11 10:32:06      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

一、弹性盒模型

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]

 

CSS3弹性盒模型与布局

标签:

原文地址:http://www.cnblogs.com/BetterMyself/p/5659331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!