css之盒子模型

小咪咪 2021-12-12 13:21 296阅读 0赞

cs盒子模型在布局中起到了相当重要的作用。不仅能过灵活的布置界面，而且相当方便。

在了解盒子模型之前首先了解一下什么是行级元素以及块级元素。

**常用行级元素**：a，input，span，label，img，textarea等等这些

**常用块级元素**：div，form，h1,h2...,ul,li,table,tbody等等

**行级元素与块级元素的区别：**

块级元素默认占一行，可以通过css来设置宽和高。

行级元素不会占一行，即使通过css来设置宽和高也不会起作用。

通过div和span两个元素来举例：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        span{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
    <body>
        <div>
            div元素
        </div>
        <div>
            div元素
        </div>
        <span>
            span元素
        </span>
        <span>
            span元素
        </span>
    </body>
    </html>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70][]

div元素单独占一行，css宽高对他有作用，而span不单独占一行css宽高没有用。

**造成这样的根本原因其实就是因为他们的盒模型不同，行级元素默认盒模型为inline，块级元素默认盒模型为block。**

尝试改变他的display，看看效果：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            display: inline;
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        span{
            display: block;
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
    <body>
        <div>
            div元素
        </div>
        <div>
            div元素
        </div>
        <span>
            span元素
        </span>
        <span>
            span元素
        </span>
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 1][]

可以看到通过修改他的盒模型就可以让他变成与之前相反的结果。

**通过上面的两个例子可以看出，模型设置主要是display这个属性，每一个元素都以一个默认的display属性，但是我们也可以去修改他的display属性达到我们想要的效果。**

**除了inline和block两个模型外，还有inline-block,inline-table,flex等这些模型。**

**inline-block模型：**

这种模型是inline和block的综合体，他不会占用一行，但是可以通过css来修改宽和高。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        span{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
    <body>
        <div>
            div元素
        </div>
        <div>
            div元素
        </div>
        <span>
            span元素
        </span>
        <span>
            span元素
        </span>
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 2][]

可以看到修改盒模型为inline-block之后，所有元素都在一行（没有超过父级宽度限制），同样支持css设置宽和高。但是也存在几个问题：

1.各个元素之间存在空格：这是因为在html中每个元素之间都有一个空格，可以通过去掉元素之间的空格或者时设置字体为0来去掉空格。

2:如果多个元素的高度不同，那么会默认底部对齐，可以通过vertiacl-align来设置top或者bottom对齐。

**inline-table模型**

table是块级元素，他是独占一行的，但是很多情况下我们需要其他元素和他共占一行，所以通过inline-table来实现。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        table{
            border: 1px solid black;
            display: inline-table;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <body>
        我想和你一行
        <table>
            <tr>
                <td>嘻嘻</td>
                <td>嘿嘿</td>
            </tr>
            <tr>
                <td>哈哈</td>
                <td>呵呵</td>
            </tr>
        </table>
    对的
    </body>
    </html>

看下效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 3][]

**flex模型**

将display设置为flex就是为弹性盒子模型，通过该属性可以更好的实现多栏布局。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
       #container{
           display: flex;
           width: 960px;
           text-align: left;
           flex-direction: row;
       }
        #container>div{
            border: 1px solid #aaf;
            box-sizing: border-box;
            padding: 5px;
        }
    </style>
    <body>
    <div id="container">
        <div style="width: 220px">hahahhahahaha</div>
        <div style="width:500px;">heiheiheieheiheieh</div>
        <div style="width: 240px">xixixixixixixixixi</div>
    </div>
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 4][]

那么既然称为弹性布局那他一定是很灵活的，可以通过修改他的flex-direction来设置横着排还是竖着排。以及row-reverse和column-reverse实现横向或纵向的反向。

flex还有其他一些属性来帮助更好的布局，比如通过flex-wrap可以设置在元素宽度之和大于屏幕宽度时是否换行。

还有通过order来设置排列顺序。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70]: /images/20211211/8ab545bc7c724b10a5e742c7cadcdea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 1]: /images/20211211/73b87c60463d4436a2abfc7ea0391758.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 2]: /images/20211211/e9c96e395f154c4ca465a9586f3e4893.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 3]: /images/20211211/9871b0e4448942be9de5041663a52b1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70 4]: /images/20211211/483c68292177469792eb0de91484044d.png