本篇文章主要介绍了" CSS3——布局样式"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
多栏布局常用属性column-countcolumn-widthcolumn-gapcolumn-rule案例盒布局与分栏布局的区别写法弹性盒布局盒布局的进一步...
- 多栏布局
- 常用属性
- column-count
- column-width
- column-gap
- column-rule
- 案例
- 盒布局
- 弹性盒布局盒布局的进一步应用
- 自适应
- 改变盒模型的顺序
- 改变盒模型的排列方式
- 填充空白
- 案例
多栏布局
常用属性
column-count:
栏目数量，指定栏目的数量
column-width：
栏目宽度，按照宽度分栏目
column-gap：
栏目之间的宽度
column-rule：
栏目之间增加分割线
注：column-rule的参数与定义的边框相同
案例
<html><headlang="en"><metacharset="UTF-8"><title>title><style>#div1{
width:100%;
/*-webkit-column-count: 3;
-moz-column-count: 3;*/-webkit-column-width:150px;
-moz-column-width:150px;
}#div3{
width:100%;
height:300px;
background-color: green;
color:#ffffff;
}style>head><body><divid="div1">
...
div><divid="div3">
biubiubiu
div>body>html>
盒布局
好处：解决float等属性 底部不能对其的缺点
与分栏布局的区别：
盒布局的栏目的宽度是固定值
写法：
display: -webkit-box;
弹性盒布局（盒布局的进一步应用）
自适应
box-flex
作用：按照比重分割和布局
使用步骤1
在大div中使用display方式为box
例如：
display: -moz-box;display: -webkit-box;
使用步骤2
在小div中使用
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
注：某部分数字越大代表分割的部分区域越大
改变盒模型的顺序
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
注：数字越小越靠前
改变盒模型的排列方式
/*垂直排列*/-moz-box-orient: vertical;
-webkit-box-orient: vertical;
/*水平排列*/-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
填充空白
只需要在应用元素中添加属性：
-webkit-box-flex: 1;
-moz-box-flex: 1;
案例
