CSS3——布局样式

本是古典何须时尚 2022-07-17 00:29 222阅读 0赞

*  多栏布局
    
     *  常用属性
        
         *  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 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>