CSS3-分栏布局





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




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" href="css/index.css" media="print" />
     @import url("css/demo.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:360px) and (max-width:500px) {}





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

补充：link和@import的区别，补充部分来自参考连接：http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />  


XML/HTML代码

<style type="text/css" media="screen">   

@import url("CSS文件");   

</style>   
两者都是外部引用CSS的方式，但是存在一定的区别：
　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。





  移动设备

    <meta name="viewport" content="" />
    width [pixel_value | device-width(设备宽度)]
    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 transform 如果用3d 形式，书写顺序对结果有影响吗？ 

  eg,先translate3d(-50,-50%,200px) scale(2) 与 scale(2) translate3d(-50,-50%,200px) 

   有。 

   注意： 如果先sclae3d(10,10,10) ,然后在translateZ(100px),其实在z轴上移动了100px * 10 = 1000px; 结论： scale3d 会放大数据 

   参考： http://www.hitthebits.com/2012/06/css3-3d-transforms-function-order.html

布局相关样式



多栏布局

通过column-count指定，将一个元素中的内容分为多栏进行显示。 

不过需要将元素的宽度设置成多个栏目的总宽度，也可使用column-width指定每个栏目的宽度。



div#div1{
        width:40em;
    -moz-column-count: 2;        
        -webkit-column-count: 2;
}
div#div3{
        width:100%;
        background-color:yellow;
        height:200px;
}
//使用column-width
div#div1{   
        -moz-column-count: 2;        
        -webkit-column-count: 2;
        -moz-column-width:20em;
        -webkit-column-width:20em;
}


可以使用column-gap属性来设定多栏之间的间隔距离。 

使用column-rule在栏与栏之间增加一条间隔线。



div#div1{   
        -moz-column-count: 2;        
            -webkit-column-count: 2;
            -moz-column-width:20em;
            -webkit-column-width:20em;
            -moz-column-gap:2em;
            -webkit-column-gap:2em;
            -moz-column-rule: 1px solid red;
        -webkit-column-rule: 1px solid red;
}



盒布局

在css三中，使用box属性来使用盒布局。可以解决使用float属性底部不对齐的缺点。



#container{
    display: -moz-box;
    display: -webkit-box;
}
#left-sidebar{
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{
    width: 300px;
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
        -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}



盒布局与多栏布局的区别：

多栏布局宽度各栏宽度是相等的。在指定栏宽度时也只能指定一个统一的宽度。与不可能具体指定每一栏中显示什么内容。



弹性盒布局

使用自适应窗口的弹性盒布局：加上box-flex属性。



#contents{    
    -moz-box-flex:1;
        -webkit-box-flex:1;
    padding: 20px;
    background-color: yellow;
}

box-ordinal-group:该属性用一个整数决定浏览器在显示的时候根据序号从小到大显示这些元素。 

box-orient:用vertical改变元素从水平方向显示到垂直方向显示。也可用horizontal



#container{
    display: -moz-box;
    display: -webkit-box;
        -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
#left-sidebar{
        -moz-box-ordinal-group: 3;
        -webkit-box-ordinal-group: 3;
    width: 200px;
    padding: 20px;
    background-color: orange;
}
#contents{
        -moz-box-ordinal-group: 1;
        -webkit-box-ordinal-group: 1;    
    -moz-box-flex:1;
        -webkit-box-flex:1;
    padding: 20px;
    background-color: yellow;
}
#right-sidebar{
        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
}

使用盒布局时元素的高度与宽度具有一定的自适应，可使用弹性盒布局消除空白。

可对多个元素使用box-flex属性，box-flex属性值也可使用大于1。原理是讲原来页面的空余部分划分为总的box-flex份进行分配。



指定水平方向与垂直方向的对齐方式

使用盒布局的时候，可以使用box-pack及box-align属性来指定元素中文字，图像及子元素水平方向或垂直方向的对齐方式。表如下：



让文字居中显示，代码示例：



div{
        display: -moz-box;
        display: -webkit-box;
        -moz-box-align: center;
        -webkit-box-align: center;
        -moz-box-pack: center;
        -webkit-box-pack: center;
        width:300px;
        height:200px;
        background-color:pink;
}

CSS3布局相关样式：网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式。
一、多栏布局：
1、column-count属性：
（1）在CSS3中可以通过column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示；
（2）写法：column-count:栏目数;
（3）兼容性写法：-webkit-column-count:栏目数;、-moz-column-count:栏目数;
（4）需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成多个栏目的总宽度；
2、column-width属性：
（1）在CSS3中可以通过column-width属性来指定栏目的宽度来生成分栏；
（2）兼容性写法：-webkit-column-width、-moz-column-width;
3、column-gap属性：在CSS3中可以通过column-gap属性指定栏目与栏目之间的距离；
4、column-rule属性：
（1）在CSS3中可以通过column-rule属性栏目与栏目之间增加一条分割线；
（2）兼容性写法：-webkit-column-rule、-moz-column-rule;
5、多栏布局的应用：
（1）HTML代码：
<div id="div1">
	CSS3布局相关样式：网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：
</div>
（2）CSS代码：
#div1{
	width: 100%;
	-webkit-column-count: 5;
	-moz-column-count: 5;
	/*-webkit-column-width: 200px;
	-moz-column-width: 200px;*/
	-webkit-column-gap: 50px;
	-moz-column-gap: 50px;
	-webkit-column-rule: 2px solid #ccc;
	-moz-column-rule: 2px solid #ccc;
}
（3）效果图如下：
1）使用column-count属性时的效果图：


2）使用column-width属性时的效果图：




二、盒布局：
1、使用float属性与position属性时的缺点：在CSS3中除了多栏布局之外，还可以使用盒布局来解决使用float属性和position属性时多栏布局底部不能对齐的缺点；
2、使用盒布局：在CSS3中使用box属性来进行盒布局，在Firefox中要把box写成"-moz-box"的形式，在chrome浏览器中写成"-webkit-box"的形式；
3、盒布局与多栏布局的区别：多栏布局的栏目宽度必须相等，指定栏目的宽度的时候也只能统一指定，栏目的宽度不可能全都一样，所以多栏布局比较适合在文字内容页面使用，并不适合整个网页编排时使用；
4、盒布局的应用：
（1）使用float属性和position属性进行多栏布局：
1）HTML代码：
<div class="content">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>
2）CSS代码：
.content{
	width: 1000px;
	margin: 0px auto;
	background-color: khaki;
}
.left{
	width: 300px;
	height: 400px;
	float: left;
	background-color: lawngreen;
}
.center{
	width: 400px;
	height: 200px;
	float: left;
	background-color: lightcoral;
}
.right{
	width: 300px;
	height: 400px;
	float: right;
	background-color: lightblue;
}
3）效果图如下：


（2）使用box属性来进行盒布局：
1）HTML代码：
<div class="content">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>
2）CSS代码：
.content{
	width: 1000px;
	margin: 0px auto;
	display: -moz-box;
	display: -webkit-box;
}
.left{
	width: 300px;
	height: 400px;
	background-color: lawngreen;
}
.center{
	width: 400px;
	height: 200px;
	background-color: lightcoral;
}
.right{
	width: 300px;
	height: 400px;
	background-color: lightblue;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
3）效果图如下：




三、弹性盒布局：
1、使用自适应窗口的弹性盒布局：
（1）在CSS3中使用box-flex属性即可使得盒布局变成弹性盒布局；
（2）兼容性写法：-webkit-box-flex、-moz-box-flex;(其后的值会影响盒子的宽度和高度)
2、改变元素的显示顺序：
（1）使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性使用一个表示序号的正数属性值，浏览器在显示的时候根据序号从小到大来显示这些元素；

（2）兼容性写法：-webkit-box-ordinal-group、-moz-box-ordinal-group;
3、改变元素的排列方向：
（1）在使用弹性盒布局的时候，可以通过box-orient来指定多个元素的排列方向；
（2）可能的取值：
1）horizontal：在水平行中从左到右排列子元素；
2）vertical：从上向下垂直排列子元素；
（3）兼容性写法：-webkit-box-orient:vertical;、-moz-box-orient:vertical;
4、元素的宽度与高度自适应：
（1）在使用盒布局的时候，元素的宽度和高度具有自适应性，就是元素的宽度与高度可以根据排列的方向的改变而改变；
（2）元素的宽度与高度自适应的应用：
1）HTML代码：
<div class="content">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>
2）CSS代码：
.content{
	width: 500px;
	height: 400px;
	background-color: khaki;
	display: -moz-box;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
}
.left{
	background-color: lightblue;
}
.center{
	background-color: lightcoral;
	
}
.right{
	background-color: lightgreen;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}
3）效果图如下：


5、使用弹性盒布局来消除空白：其方法就是给子div中加入一个box-flex属性；
6、对多个子元素使用box-flex属性：使得浏览器或容器中的元素的总宽度或者总高度都等于浏览器或容器的高度；
7、指定水平方向与垂直方向的对齐方式：
（1）使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像以及子元素的水平方向或者垂直方向上的对齐方式；
（2）兼容性写法：
-webkit-box-pack:值;
-moz-box-pack:值;
-webkit-box-align:值;
-moz-box-pack:值;
（3）box-pack属性的取值：

取值
属性值描述
start
对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）

对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end
对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）

对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）
center
均等地分割多于空间，其中一半空间被置于首个子元素前，另一半被置于最后一个元素后
justify
在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）

（4）box-align属性的取值：
取值
属性值描述
start
对于正常方向的框，每个子元素的上边缘沿着框的顶边放置

对于反方向的框，每个子元素的下边缘沿着框的底边放置
end
对于正常方向的框，每个子元素的下边缘沿着框的底边放置

对于反方向的框，每个子元素的上边缘沿着框的顶边放置
center
均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下
baseline
如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐
stretch
拉伸子元素以填充包含块

（5）指定水平方向与垂直方向的对齐方式的应用：
1）HTML代码：
<div>指定水平方向与垂直方向的对齐方式</div>
2）CSS代码：
div{
	width: 300px;
	height: 200px;
	background: lightblue;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	/*-moz-box-pack: start;
	-webkit-box-pack: start;*/
	/*-moz-box-pack: end;
	-webkit-box-pack: end;*/
	/*-moz-box-pack: justify;
	-webkit-box-pack: justify;*/
	
	-moz-box-align: center;
	-webkit-box-align: center;
	/*-moz-box-align: start;
	-webkit-box-align: start;*/
	/*-moz-box-align: end;
	-webkit-box-align: end;*/
	/*-moz-box-align: baseline;
	-webkit-box-align: baseline;*/
	/*-moz-box-align: stretch;
	-webkit-box-align: stretch;*/
}
3）效果图如下：
①box-pack: center;时的效果图：


②box-pack: start;时的效果图：


③box-pack: end;时的效果图：


④box-pack: justify;时的效果图：


⑤box-align: center;时的效果图：


⑥box-align: start;时的效果图：


⑦box-align: end;时的效果图：


⑧box-align: baseline;时的效果图：


⑨box-align: stretch;时的效果图：




8、弹性盒布局的应用：
（1）HTML代码：
<div class="content">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>
（2）CSS代码：
.content{
	background-color: khaki;
	display: -moz-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
}
.left{
	height: 200px;
	background-color: lightpink;
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
}
.center{
	height: 200px;
	background-color: lightcoral;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
}
.right{
	height: 200px;
	background-color: lightblue;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
（3）效果图如下：