HTML5学习日记 －－－ 4.5日

5，Css3响应式布局

媒体类型
　　all 所有媒体
　　braille 盲文触觉设备
　　embossed 盲文打印机
　　print 手持设备
　　projection 打印预览
　　screen 彩屏设备
　　speech '听觉'类似的媒体类型
　　tty 不适用像素的设备
　　tv  电视

关键字
　　and
　　not      not关键字是用来排除某种制定的媒体类型
　　only     only用来定某种特定的媒体类型

 

媒体特性
　　(max-width:600px)
　　(max-device-width: 480px)  设备输出宽度
　　(orientation:portrait)  竖屏
　　(orientation:landscape)    横屏
　　 (-webkit-min-device-pixel-ratio: 2) 像素比
　　devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入
　　<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
 　　@import url("css/reset.css") screen;
　　@media screen{
   　　   选择器{
    　　 属性：属性值；
    　　 }
  　　 }

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

 

<link rel="stylesheet" type="text/css" href="styleA.css"  media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"    media="screen and (max-width: 600px)">

 

    移动端meta

<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]

 

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 倒影
　　direction  方向     above|below|left|right;　　
　　距离
　　渐变（可选）
resize 自由缩放
　　Both 水平垂直都可以缩放
　　Horizontal 只有水平方向可以缩放
　　Vertical 只有垂直方向可以缩放
　　注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式
　　Content-box  标准盒模型 width/height=border+padding+content
　　Border-box 怪异盒模型 width/height=content

 

 

4，Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap   栏目距离
column-rule  栏目间隔线