3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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

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

文档流Normal flow

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

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

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

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

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

  1. 块元素:

    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>

      3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

      在不指定情况下,红色背景会随着浏览器改变大小而改变,这里html文件里面div的父元素是html标签,所以他的默认宽度就是撑满父元素。而默认的高度就是自身的内容的高度。

  2. 行内元素

    1. 行内元素不会独占页面的一行,只占自身的大小

    2. 行内元素在页面中自左向右排列,如果一行职中不能容纳下所有的行内元素,这会换到第二行继续自左向右排列(与书写习惯一致)

    3. 行内元素的默认宽度都是被内容撑开

盒子模型box model

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

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

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

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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

  1. 盒子内部装东西的就叫做内容区

  2. 限制盒子范围的叫做边框

  3. 内容区的东西和边框一般都是有间隙的,叫做内边距(内容区和边框的距离)

  4. 两个盒子之间的距离叫做外边距(margin)

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

内容区: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>

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

width,height

width:设置内容区的宽度

height:设置内容区的高度

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

边框 border

边框属于盒子的边缘。

要设置边框,需要至少设置三个样式:(设置边框,这三个属性必须要写

  1. 边框的宽度:border-width

  2. 边框的颜色:border-color

  3. 边框的样式: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>

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

图形大小是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;
        }

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

border-width:10px 20px 30px;

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

两个值:上下 左右

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

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

border-color

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

如果不写border-color,颜色就是color的颜色值。(如果没有color值,就是默认黑色)

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

border-style

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

solid:·表示实线边框

dotted:表示点状虚线

dashed:虚线

double:双线

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

现在在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>

就变成了这样:

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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-rightmargin-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>

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

去掉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>

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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的值使等式成立。

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

右边的空白就是浏览器确保等式成立而自己调整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,所以子元素就被填充满父元素:

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

 

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

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

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

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

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

此时浏览器也会调整,使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>

子元素多高,父元素就多高:(父元素不设置高度,默认会被子元素撑开。

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

增加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,移动的是下方的元素。所以我们新增一个子元素,就可以看到设置的外边距

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

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

        .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
        }
​
        .box2{
            width:100px;
            height:400px;
            background-color:orange;
        }
    <div class="box1">
        <div class="box2">
        </div>
    </div>

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

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

3千字彻底弄懂CSS盒子模型(图文并茂,通俗易懂)

可选值:

  1. visible:默认值,子元素溢出后,在父元素外部的位置显示

  2. hidden:溢出的内容将不会被显示(一剪梅)

  3. scroll:出现滚动条,生成两个滚动条(水平和垂直)

  4. auto:根据需要生成滚动条

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

overflow-x: auto;
overflow-y: auto;
/*等价于 overflow: auto;*/
上一篇:CSS之旋转


下一篇:js日记之事件对象