CSS3——布局样式

来源：互联网发布：手机照片恢复软件免费编辑：程序博客网时间：2024/05/18 00:55

多栏布局
- 常用属性
  - column-count
  - column-width
  - column-gap
  - column-rule
- 案例
盒布局
- 与分栏布局的区别
- 写法
弹性盒布局盒布局的进一步应用
- 自适应
- 改变盒模型的顺序
- 改变盒模型的排列方式
- 填充空白
- 案例

多栏布局

常用属性

column-count:

栏目数量，指定栏目的数量

column-width：

栏目宽度，按照宽度分栏目

column-gap：

栏目之间的宽度

column-rule：

栏目之间增加分割线

注：column-rule的参数与定义的边框相同

案例

<!DOCTYPE html><html><head lang="en">    <meta charset="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><div id="div1">    <!-- 测试的时候可以搜些文字添加到这个div中 -->    ...</div><div id="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;

案例

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .test_box {            display: -moz-box;            display: -webkit-box;        }        .list_one {            background-color: green;            -moz-box-flex: 1;            -webkit-box-flex: 1;            box-flex: 1;        }        .list_two{            background-color: #cccccc;            -moz-box-flex: 2;            -webkit-box-flex: 2;            box-flex: 2;        }        .list_three{            background-color: #2066c7;            -moz-box-flex: 3;            -webkit-box-flex: 3;            box-flex: 3;        }    </style></head><body><div class="test_box">    <div class="list_one">1</div>    <div class="list_two">2</div>    <div class="list_three">3</div></div></body></html>

1 0