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

2021-05-04 20:33:38 阅读：128 来源： 互联网

标签：图文并茂 color 千字 border 元素 width margin CSS 200px

大家好，全套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;*/

标签：图文并茂,color,千字,border,元素,width,margin,CSS,200px
来源： https://blog.csdn.net/qq_26226059/article/details/116404437

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9