css3之各种布局

首先，新增的布局属性需要添加各浏览器的私有前缀。-moz,-webidt,-ms,-o

1，多列布局 ——cloumns

 cloumns:200px 3;

   200px: 定义多列中每列的宽度

   3：定义多列中的列数

相当于 cloumns-200px; cloumns-count:3

如果要调整列与列直接的间距，可以使用

column-gap:2em;

如果要用来定义列与列之间的边框宽度，边框样式和边框颜色，他不占用任何空间

位置。

column-rule:2px dottoed green;

如果一个分列元素中的子元素需要跨多列，那么需要用到

column-span：none|all

all :跨越所有

2,盒子模型——box-sizing

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相

同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border

以及元素实际尺寸的计算关系

box-sizing:content-box ; border-box ;inhert

在自适应布局中，在元素基础上添加内距padding,按照标准盒模型解析，往往会将布局撑破，

但使用border-box，便可以解决。

3，伸缩布局——flexbox布局

响应式不可缺少的，

功能：

（1），屏幕和浏览器窗口大小发生改变可以灵活调整；

（2），可以指定伸缩项目沿主轴或侧轴按比例分配的额外空间，从而调整伸缩项目的大小；

（3），可以指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前，之后或

之间；

（4），可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

（5），可以控制元素在页面上的布局方向；

（6），可以按照不同的DOM所指定排序方式对屏幕元素重新排序。也就是说可以在浏览器渲

染中不按照文档流先后顺序重排伸缩项目顺序。

使用方法：

（1），创建一个flex容器

.flexContainer{

dispaly:-webkit-flex;  //Safari需要前缀

display:flex;//给元素设置display值为flex

}

(2),Flex项目显示

flex的项目应为flex容器的子元素，是沿这主要轴和横轴定位。默认的是沿着水平轴排列一行。可以

通过flex-direction来改变主轴的方向,（column,row）(Safari需加前缀)

(3),Flex项目移动到顶部

flex项目移动到顶部，取决于主轴的方向，如果他是垂直的方向通过align-items设置;如果它是水平

方向通过justify-content.

(4),Flex项目也可以移到左边，右边，水平垂直居中

都要通过align-items或justify-content实现

(5),Flex项目实现自动伸缩

.bigItem{

flex:200;

}

.smallItem{

flex:100;

}

<style type="text/css">
      *{
        padding:0;margin:0;
    }
    
  
    .flexcontainer{
        border:1px solid #ccc;
        margin:10px 10px;
        padding-bottom:20px;
        }
    
    .flexcontainer{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: column;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        }
    
    
    
    .ss{
        width:100px;
        height:120px;
        background:#c90;
        margin:10px;
    }
    
    
</style>
    <div class="flexcontainer">
        <div class="ss"></div>
        <div class="ss"></div>
        <div class="ss"></div>
    </div>