3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂）

2024-01-15 11:15:10

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！内容通俗易懂，图文并茂，欢迎订阅！

到此为止，html和css的基础已经全部讲完，接下来就是网页的布局。

如何把元素放在网页的任何一个位置？就是布局

文档流Normal flow

网页是一个多层的结构，一层包含着一层，通过css可以分别为每一层来设置样式，作为用户来说只能看到最上面的那一层（化妆）

这些层中，最底下的一层称为文档流，文档流是网页的基础，

我们所创建的元素默认都是在文档流中进行排列。

对于我们来说，元素主要有两个状态：1.在文档流中2.不在文档流中

元素在文档流中有什么特点？

块元素：
1. 块元素在文档流中总会中独占一行
2. 默认宽度是父元素的全部（会把父元素撑满）
3. 默认高度是被内容撑开（子元素）
4. 举例：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            background-color:red;
        }
    </style>
</head>
<body>
    
    <div class="box1">我是div1</div>
    <div>我是div2</div>
</body>
</html>
```
  在不指定情况下，红色背景会随着浏览器改变大小而改变，这里html文件里面div的父元素是html标签，所以他的默认宽度就是撑满父元素。而默认的高度就是自身的内容的高度。
行内元素
1. 行内元素不会独占页面的一行，只占自身的大小
2. 行内元素在页面中自左向右排列，如果一行职中不能容纳下所有的行内元素，这会换到第二行继续自左向右排列（与书写习惯一致）
3. 行内元素的默认宽度都是被内容撑开

盒子模型box model

购置家具的时候，比如购置沙发，在搬过来房间的时候是不是先要知道沙发的形状和大小？同样，对一个元素进行布局也需要先知道元素的形状和大小，没有形状就摆放不了。

css将页面中所有的元素都设置为了一个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就是将不同的盒子摆放到不同的位置。

任何网页随便一个元素都是矩形的：

现在形状知道了，所以我们只需再设置大小就可以进行摆放位置。

每一个盒子都由几个部分组成

盒子内部装东西的就叫做内容区
限制盒子范围的叫做边框
内容区的东西和边框一般都是有间隙的，叫做内边距（内容区和边框的距离）
两个盒子之间的距离叫做外边距（margin）

内容区：width，height

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
        }
    </style>
</head>
<body>
  
    <div class="box1"></div>
</body>
</html>

元素中所有的志愿书和文本内容都在内容区中排列，内容区的大小由width和height两个属性来决定

width,height

width:设置内容区的宽度

height:设置内容区的高度

并不是设置整个盒子的大小，而是设置内容区的。

边框 border

边框属于盒子的边缘。

要设置边框，需要至少设置三个样式：（设置边框，这三个属性必须要写）

边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style

边框的大小会影响到盒子的大小

        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
            /*设置盒子的边框*/
            border-width:100px;
            border-color:red;
            border-style: solid;
        }

<div class="box1"><span>aaa</span></div>

图形大小是400*400

border-width

border-width:可以用来指定是个方向的边框宽度(上右下左)

        .box1{
            width:200px;
            height:200px;
            background-color:red;
            
            border-width:10px 20px 30px 40px;
            border-color:yellow;
            border-style:solid;
        }

如果只写三个值，就是上左右下

border-width:10px 20px 30px;

两个值：上下左右

一个值：上下左右都是这个值

除了border-width还有border-xxx-width：有top,right,bottom,left,单独用来指定某一个边的宽度。

border-color

指定边框的颜色，同样可以分别指定四个边框的颜色，规则和border-width一样。

如果不写border-color，颜色就是color的颜色值。（如果没有color值，就是默认黑色）

border-style

指定边框的样式，同样也是有四个方向。

solid:·表示实线边框

dotted:表示点状虚线

dashed:虚线

double:双线

border-style的默认值是none，所以不写就没有边框。（三个属性必须指定，不指定只是用了默认值而已）

border简写属性

同时设置边框所有相关样式，并且没有顺序要求

border: 10px green solid;

同样border-top,border-right,border-bottom,border-left设置四个边

border:none;可以为任何一个css属性值设置为none，代表没有样式。

内边距padding

内边距设置边框和内容区的部分

也有四个方向。

padding-top

padding-right

padding-bottom

padding-left

内边距的设置会影响到盒子的大小。内边距背景颜色是内容区的颜色：

上的内边框和内容区的颜色都变成了红色，那么如何区分呢？

现在在div里面定义一个内容区的样式。

        .box1{
            width:200px;
            height:200px;
            background-color:red;
            border:10px blue solid;

            padding-top:100px;
            padding-right:100px;
            padding-bottom:100px;
            padding-left:100px;
        }
        .inner{
            width:100%;
            height:100%;
            background-color:yellow;
        }

    <div class="box1">
        <div class="inner"></div>
    </div>

就变成了这样：

inner是父元素的100%，所以黄色部分全部是内容区，红色部分是内边框

一个盒子的可见框的大小，由内容区、内边距和边框共同决定，所以计算盒子大小要将这三个区域加到一起计算。

但是并不是盒子大小就是可见框的大小，还有不可见的部分，就是盒子除了他的图形所占这一行的其它部分。

如果说大小是500 * 500 不是内容区是 500 * 500 ，而是边框 + 内容区 + 内边距加起来是 500*500

内边距简写

同样，内边距也可以简写

padding : 10px 20px 30px(上左右下)

外边距margin

外边距上面说到了是盒子的不可见部分，所以外边距决定了盒子的位置（占地大小、与其他元素之间的距离）

同样也有四个方向的外边距margin-top,margin-right,margin-bottom,margin-left

设置top，与left的外边距，发现元素分别向下，向右走了。

        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
            border:10px red solid;

            /*外边距*/
            margin-top:100px;/*上外边距 元素向下移动*/
            margin-left:100px;/*左外边距，元素向右走*/    
        }

但是设置了margin-right，margin-bottom时候发现没有变化，这是因为元素在页面中是按照自左向右排列，所以默认情况下，如果设置了左和上的外边距，将会移动元素自身，而设置下，右外边距是移动其它元素。

例如：在设置一个div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
            border:10px red solid;

            /*外边距*/
            margin-top:100px;/*上外边距 元素向下移动*/
            margin-right:100px;/*上外边距 元素*/
            margin-left:100px;/*左外边距，元素向右走*/
            margin-bottom:100px;/*上外边距*/

        }

        .box2{
            width:220px;
            height:220px;
            background-color:blue;
        }
    </style>
</head>
<body>
    
        <div class="box1"></div>
        <div class="box2"></div>
</body>
</html>

去掉margin-bottom:100px;发现是蓝色的box2进行了移动，右外边距同理。所以，底外边距、右外边距是移动别的元素，左外边距、上外边距是移动自己。（反向思维，上外边距不变，要变化底外边距，所以要保持与下面的元素的间隔变化，看上去好像“自己移动”了）

margin会影响实际占用空间的大小。

指定负值

margin也可以指定负值，就是往相反的反向走。

margin简写

可以同时设置四个方向的外边距，与padding一样。

❤❤盒子水平布局❤❤

刚才没有讲到的就是margin-right

现在有如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer{
            width:800px;
            height:200px;
            border:10px red solid;
        }

        .inner{
            width:200px;
            height:200px;
            background-color:#bfe;
        }
    </style>
</head>
<body>
    
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

margin-left:200px;就会向右移动

横线布局：元素在其父元素中，子元素水平方向的位置由以下几个属性共同决定：

1. `margin-left`
2. `border-left`
3. `padding-left`
4. `width`
5. `padding-right`
6. `border-right`
7. `margin-right`

一个元素在父元素中，水平布局必须满足以下等式：

margin-left + padding-left + width + padding-right + border-right + margin-right == 父元素内容区的宽度

但是在代码中子元素只定义了width:200px,以上等式200 ≠800 ，若结果使等式不成立，则成为过渡约束，等式会自动调整。

如果七个值中没有auto的情况，浏览器会自动调整margin-right的值使等式成立。

右边的空白就是浏览器确保等式成立而自己调整margin-right的。（子元素margin-right变成500）

所以margin-right一般是浏览器调整的。

这七个值中可以设置为auto：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer{
            width:800px;
            height:200px;
            border:10px red solid;
        }

        .inner{
            width:auto;
            height:200px;
            background-color:#bfe;
        }
    </style>
</head>
<body>
    
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

我们将子元素的width设置为auto，则等式变为 0 + 0 + 0 + auto + 0 + 0 + 0 = 800.则此时浏览器不会调整margin-right了，转为调整width，因为width设置了auto，所以width被调整为800，所以子元素就被填充满父元素：

有比如再加一个margin-right:200px,则auto就变成600：

        .inner{
            width:auto;
            height:200px;
            background-color:#bfe;
            margin-right:200px;
        }

得出：哪个值是auto，浏览器就会调整哪个值，而width的值默认就是auto

如果将width和外边距设置为auto，这宽度会调整到最大，设置为auto的外边距为自动为0.

如果将width和heigth和外边距都设置为auto，则外边距都是0，宽度最大。

如果将两个外边距设置为auto，宽度固定值，这外边距设置为相同的值。所以经常利用这个特点，来使一个元素在其父元素中水平居中。示例：

width:xxxpx;
/*上下外边距为0，auto是左右外边距是auto*/
margin:0 auto;

如果设置子元素的width超过了父元素的width：

此时浏览器也会调整，使margin-right:-200px;

垂直布局

网页一般是横向固定的，纵向才会有滚动条。所以垂直布局比较简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer{
            background-color:#bfa;
        }

        .inner{
            width:100px;
            height:200px;
            background-color:yellow;
            
        }
    </style>
</head>

<body>
    
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

子元素多高，父元素就多高：（父元素不设置高度，默认会被子元素撑开。）

增加margin-bottom:

    <style>
        .outer{
            background-color:#bfa;
        }

        .inner{
            width:100px;
            height:200px;
            background-color:yellow;
            margin-bottom:100px;
        }
    </style>

    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>

为子元素设置了margin-buttom，移动的是下方的元素。所以我们新增一个子元素，就可以看到设置的外边距

如果父元素设置了高度，就不会被子元素撑开：

所以父元素不设置高度，默认被子元素撑开。父元素设置了高度，高度该是多少就是多少

子元素是在父元素中内容区中排列的，如果子元素高度超过了父元素的高度，则成为溢出

        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
        }

        .box2{
            width:100px;
            height:400px;
            background-color:orange;
        }

    <div class="box1">
        <div class="box2">
        </div>
    </div>

在父元素里使用overflow属性来设置父元素如何处理溢出的子元素：

可选值：

visible：默认值，子元素溢出后，在父元素外部的位置显示
hidden：溢出的内容将不会被显示（一剪梅）
scroll：出现滚动条，生成两个滚动条（水平和垂直）
auto：根据需要生成滚动条

还有overflow-x,overflow-y单独处理水平方向的溢出、垂直方向的溢出

overflow-x: auto;
overflow-y: auto;
/*等价于 overflow: auto;*/

码农公寓