css3之各种布局

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

1,多列布局 ——cloumns

 cloumns:200px 3;

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

   3:定义多列中的列数

相当于 cloumns-width: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;

}

 1 <style type="text/css">
 2       *{
      
 3         padding:0;margin:0;
 4     }
 5     
 6   
 7     .flexcontainer{
      
 8         border:1px solid #ccc;
 9         margin:10px 10px;
10         padding-bottom:20px;
11         }
12     
13     .flexcontainer{
      
14         display: -webkit-flex;
15         display: flex;
16         -webkit-flex-direction: row;
17         flex-direction: column;
18         -webkit-justify-content: flex-start;
19         justify-content: flex-start;
20         }
21     
22     
23     
24     .ss{
      
25         width:100px;
26         height:120px;
27         background:#c90;
28         margin:10px;
29     }
30     
31     
32 style>
33     <div class="flexcontainer">
34         <div class="ss">div>
35         <div class="ss">div>
36         <div class="ss">div>
37     div>

 

转载于:https://www.cnblogs.com/fnncat/p/4864780.html

你可能感兴趣的:(css3之各种布局)