跟随黑马学前端-9，CSS盒子模型

第九天：CSS盒子模型

程序是写来给人读的，只会偶尔让机器执行一下

学习目标

  • 盒子模型

  • PS基本操作

  • 综合案例

  • 圆角边框

  • 盒子阴影

  • 文字阴影

盒子模型

看透网页布局的本质：所有网页布局都是由一个个盒子模型组成的

网页布局过程：

  1. 准备好相关的网页元素，网页元素基本都是盒子Box

  2. 利用好CSS设置好相关样式。然后摆放到相应位置

  3. 往盒子里面装填内容

网页布局的核心本质：利用CSS摆盒子

盒子模型（BoxModel）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容等

image-20221208171003400

边框：盒子的边框

内容：可以是文字、图片甚至是其他的盒子

内边距：内容与边框 的距离

外边距：盒子与盒子之间的距离

边框border:

border可以设置元素的边框、边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

1
border: border-width || border-style || border-color;
属性 作用
border-width 定义边框粗细，单位为px
border-style 边框的样式
border-color 边框的颜色

复合写法：

1
border：1px solid red;			没有顺序，先写那个后写哪个都可以的

上下边框：border-top,border-bottom，可以单独进行设置

表格的边框

1
border-collapse: collapse;

collapse单词是合并的意思。

border-collapse: collapse;表示讲相邻边框合并在一起。表格就可以看作很多方框

边框会影响盒子实际的大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框会影响盒子的实际大小</title>
    <style>
        /* 我们想要一个200*200的盒子，但是这个盒子有10像素的红色边框 */
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在上述代码中，我们有一个200*200px的盒子，但是有10px边框，所以，盒子的实际大小为210px

内边距padding

有时候内容会直接贴住盒子内部的边缘，padding属性用于设置内边距，即边框与内容之间的距离

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div>盒子内容content盒子内容content盒子内容content盒子内容content</div>
</body>
</html>
内边距的复合写法

padding属性可以有一到四个值

值的个数 表达意思
padding 5px; 1个值，表示上下左右都有5像素内边距
padding 5px 10px; 2个值，表示上下内边距为5像素，左右为10像素
padding 5px 10px 20px; 3个值，表示上边距为5像素，左右内边距为10像素，下边距为20像素
padding 5px 10px 20px 30px; 4个值，分别表示上 右 下 左 的内边距。顺时针

注意：padding也会影响盒子大小！会撑大盒子

但是如果盒子本书没有指定width/height属性，那么padding就不会撑开盒子相对应的值（宽 高）

padding实践
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            /* a属于行内元素，没有高，必须要转换为行内块元素 才有高 */
            display: inline-block;
            height: 41px;

            padding: 0 20px;
            /*上下 左右*/

        }
        .nav a:hover{
            background: #eee;
            color:#ff8500
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#"> 手机新浪网</a>
        <a href="#"> 移动客户端</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

</html>

外边距margin

margin可以控制外边距，即盒子与盒子之间的距离

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

margin的缩写方式与padding完全一致

外边距典型应用

外边距可以让块级盒子水平居中，但必须满足两个条件：

  1. 盒子必须指定了宽度width

  2. 盒子左右的外边距都设置为auto

1
.header{width:960px; margin:0 auto;}

常见的写法：

  • margin-left: auto; margin-right: auto;

  • margin: auto;

  • margin: 0 auto;

注意 ：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

  1. 相邻块元素垂直外边距的合并

    当上下相邻两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象叫做相邻块元素垂直外边距的合并

    解决方案：尽量只给一个盒子添加margin的值。

image-20221219122540902

  1. 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
        <style>
            .father{
                width:400px;
                height: 400px;
                background-color: purple;
                margin-top: 200px;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
    </html>

    目前他是这样子的

    image-20221219123611142

    我们想让小盒子在大盒子中向下一些，所以我们尝试在.son中添加margin-top属性。代码如下：

    1
    2
    3
    4
    5
    6
    .son{
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 200px;
    }

    结果它现在成了这样子：

    嵌套块级元素外边距的塌陷

    这不是我们想要的结果，但是这种结果叫做嵌套块元素垂直外边距的塌陷嵌套块元素垂直外边距的塌陷

    解决方案：

    • 可以为父元素定义上边框

    • 可以为父元素定义上内边距

    • 可以为父元素添加overflow: hidden

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
          <style>
              .father {
                  width: 400px;
                  height: 400px;
                  background-color: purple;
                  margin-top: 50px;
                  /* border: 1px solid transparent; */
                  /* padding :1px; */
                  overflow: hidden;
              }

              .son {
                  width: 200px;
                  height: 200px;
                  background-color: pink;
                  margin-top: 100px;

              }
          </style>
      </head>

      <body>
          <div class="father">
              <div class="son"></div>
          </div>
      </body>

      </html>

    • 还有其他方法：

      比如浮动、固定，绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

1
2
3
4
5
*{
/*清除所有的内外边距*/
	padding: 0;
    margin: 0;
}

注意：行内元素为了照顾兼容性，**尽量只设置左右内外边距，不要设置上下内外边距，**但是转换为块级和行内块元素就可以了。