CSS3——盒模型

电玩女神 2022-09-25 10:15 135阅读 0赞

*   *  盒模型
        
         *   *  display属性值
             *  inline
             *  block
             *  inline-block
             *  inline-table
             *  list-item
             *  run-in
             *  compact
         *  表格类型
            
             *  table
             *  table-row
             *  table-cell
             *  thead
             *  caption
         *  none

--------------------

## 盒模型： ##

可以理解为一块块的区域，比如div

--------------------

#### display属性值： ####

通过设置display的属性值操作盒模型

#### inline： ####

类似于自适应,例如：span，a的默认样式

#### block： ####

类似于充满，例如：div，p的默认样式

**上述两个属性的简单测试**

<div style="background-color: green">我是div</div>
    <span style="background-color: red">我是span</span>

--------------------

#### inline-block: ####

可用于水平菜单的实现

**测试代码**

......
    
    <style>
            ul{
                margin: 0;
                padding: 0;
            }
            li{
                padding: 10px 20px;
                background-color: #2292ff;
                border-right:solid 1px #2066c7;
                width:100px;
                text-align: center;
                /*下面两个属性与display的inline-block属性相比*/
                /*list-style: none;
                float: left;*/
                /**/
                display: inline-block;
            }
            a{
                color: #fff;
                text-decoration: none;
            }
        </style>
    
    ......
    
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    
    ......

--------------------

#### inline-table: ####

实现表单与其他内容（例如文字）位置的改变，类似于word中对图片布局的改变

**测试代码**

......
    
    <style>
            table{
                display: inline-table;
                border: solid 3px #cccccc;
                /*此案例中改变的是文字的位置*/
                vertical-align: bottom;
            }
            td{
                border: solid 3px #000000;
            }
        </style>
    
    ......
    
    <body>
    文字1
    <table >
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    
    
    </table>
    文字2
    </body>
    
    ......

--------------------

#### list-item ####

将div转化成list样式

**测试代码**

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                display: list-item;
                list-style-type: circle;
                margin-left: 30px;
            }
        </style>
    </head>
    <body>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    <div>list-item</div>
    </body>
    </html>

--------------------

#### run-in ####

run-in类型的元素将被包括在后面的block类型的元素的内容

--------------------

#### compact ####

compact类型的元素将被放置在block类型的元素左边

--------------------

### 表格类型 ###

将div等转化成类似于表格的形式，改变display的属性值

#### table ####

类似于将div变成表格

#### table-row ####