什么是盒子模型

盒子模型又称为框模型，HTML页面所有的元素都具有盒子模型，该模型用于设计HTML页面和实现HTML页面布局。

盒子模型.png

相关概念

  1. 内容区（content）

    用于显示文本和图像

  2. 内边距（padding）

    内容区至边框的边距

  3. 边框（border）

    内容区的边界

  4. 外边距（margin）

    两个元素的边距之间的距离

盒子的大小

默认情况下，一个盒子的大小刚好容纳其中的内容(文本、图片等)，并根据其中内容的变化而变化。
通过CSS的width属性和height属性可以设置盒子显示的宽度和高度，从而改变盒子的大小。.

1
2
3
4
div{
    width:100px;
    height:100px;
}

盒子的阴影

盒子的阴影广泛应用。但实现非常简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

边框

大小 样式 颜色

简写属性，表示边框

核心要素包括

  • 边框的宽度（默认值为1px）
  • 边框的样式（无默认值，必须直接给出）
  • 边框的颜色（默认值是黑色）

显示效果：同时设置上下左右四个方向的边框

1
2
3
div{
    border: 10px solid black;
}

组合属性

以上简写属性相当于同时为一个border设置宽度、样式和颜色。

例如上述代码可以写成以下形式

1
2
3
4
5
div{
    border-width: 10px;
    border-style: solid;
    border-color: black;
}

关于三中属性的的取值问题（以border-width为例）

  • border-width: 10px; : 代表四个方向
  • border-width: 10px 20px; : 第一个值表示上下、第二个值表示左右
  • border-width: 10px 20px 30px; : 第一个值表示上、第二个值表示左右、第三个值表示下
  • border-width: 10px 20px 30px 40px; : 上、右、下、左

不同方向上的边框

按照上右下左的方向分别为

  • border-top
  • border-right
  • border-bottom
  • border-left

而每个方向上的边框也可以分别设置不同的属性，例如

1
2
3
4
5
div{
    border-top-width:10px;
    border-top-style:solid;
    border-top-color:black;
}

边框的圆角

1
border-radius: 30px;

属性的值代表（边框）到圆心的距离。当距离等于外部容器的一半时就形成了一个原型

边框图像

使得边框可以引入图像，从而免去在某些情况下使用九宫格了。

1
2
3
/* border-image: image-source image-height image-width image-repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

border-image-width

定义图像边框宽度。假如border-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展.

border-image-source

用于声明元素的边框图片（border-image）的资源

border-image-slice

引用边框图片后，**border-image-slice**属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

border-image-slice.png

上图说明了每个区域的位置。

  • 区域 1-4 为角区域。 每一个都用一次来形成最终边界图像的角点。
  • 区域 5-8 边区域。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。
  • 区域 9 为中心区域。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。

中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

border-image-repeat

定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

border-image-outset

定义边框图像可超出边框盒的大小。

内边距

内边距不能设置颜色 颜色与元素的背景颜色保持一致.

同时可以简写,

  • 一个值:上下左右
  • 两个值:上下,左右
  • 三个值:上,左右,下
  • 四个值:上右下左

同时支持拆开写

1
2
3
4
padding-left: 20px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 30px;

示例代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #container{
            height: 200px;
            width: 200px;
            background-color: blue;
            /* padding: 100px; */
            padding-left: 20px;
            padding-top: 100px;
            padding-right: 50px;
            padding-bottom: 30px;
        }
        #content{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">

        </div>
    </div>
</body>
</html>

外边距

左外边距(margin-left)控制元素当前水平方向的位置.

上外边距(margin-top)控制元素当前垂直方向的位置.

下外边距(margin-bottom)控制控制块级元素的下一个兄弟元素的位置

右外边距(margin-right)控制内联元素或行内会计元素的下一个兄弟元素的位置.

  • margin-left
    • 正值:向右移动
    • 负值:向左移动
  • margin-top
    • 正值:向下移动
    • 负值:向下移动
  • margin-bottom
    • 正值:下一个兄弟元素向下移动
    • 负值:下一个兄弟元素向上移动
  • margin-right
    • 正值:下一个兄弟元素向右移动
    • 负值:下一个兄弟元素向左移动

内容水平居中

使用margin即可.

1
2
3
div{
    margin:0 auto;
}

固定写法,其中0表示上下 auto表示左右.

盒子模型的类型

块级元素

可以设置宽高

内联元素

  • 水平方向的内边距有效的 - 控制文本内容在水平方向的位置
  • 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展
  • 垂直方向的外边距无效的 - 上外边距和下外边距
  • 水平方向的外边距有效的

行内块级元素

与块级元素相同

盒子模型的类型

box- sizing属性用于设置盒子模型的类型，该属性的值具有两个:
●content-box: 默认值，称为标准盒子模型。
该模型设置元素在HTML页面中所占区域为内容区+内边距+边框的宽度+外边距。
●border-box: 称为怪异盒子模型，最早是由微软提出的。
该模型设置元素在HTML页面中所占区域为盒子的大小+外边距。.

外边距常见的问题

外边距重叠

外边距重叠的问题只出现在上外边距和下外边距中
左外边距和右外边距之间不存在外边距重叠

外边距重叠.png

解决方案:

  • 简单的解决方案有两种:

    • 为上一个元素设置下外边距为300px

    • 为下一个元素设置上外边距为300px

  • 网上的方法

    可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容。

外边距传递

外边距传递.png

应用示例

实现三角形

实现步骤

  1. div的宽高为0

  2. 设置边框的宽度

  3. 设置边框样式

  4. 设置颜色

    border-color: white white white black;/* 左边为黑色 */

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的特殊应用</title>
    <style>
        div {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: white white white black;/* 左边为黑色 */
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

按钮效果

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册按钮效果的优化</title>
    <style>
        .container {
            /* 当前元素的默认宽度为父级元素的100% */
            width: 659px;
            /* 当前元素的宽度不能是父级元素宽度的100% */
            margin: 0 auto;
        }
        a {
            display: inline-block;/* 显示效果设置行内块级元素 */
            /* 设置显示区域大小 */
            width: 111px;
            height: 40px;
            /* 引入背景图像 */
            background: url("https://tva1.sinaimg.cn/large/005B3XPgly1gbmo8n9srbj30i212w761.jpg") no-repeat;
            /* 修改链接的默认效果 */
            color: #ffffff;
            text-decoration: none;
            /* 通过行高的设置实现垂直方向的居中效果 */
            line-height: 40px;
            /* 通过盒子模型的内边距设置文本内容的显示位置 */
            padding-left: 50px;

            font-size: 14px;
        }
        #phone {
            background-position: -310px -461px;
        }
        #weibo {
            background-position: -1px -601px;
        }
        #qq {
            background-position: -1px -651px;
        }
        #wechat {
            background-position: -213px -1191px;
        }
        #phone:hover {
            background-position: -310px -521px;
        }
        #weibo:hover {
            background-position: -199px -601px;
        }
        #qq:hover {
            background-position: -199px -651px;
        }
        #wechat:hover {
            background-position: -213px -1251px;
        }
    </style>
</head>
<body>
<!-- <div>元素称为容器元素 -->
<div class="container">
    <a id="phone" href="#"> 手机注册</a>
    <a id="weibo" href="#"> 新浪微博注册</a>
    <a id="qq" href="#"> 腾讯QQ注册</a>
    <a id="wechat" href="#"> 微信注册</a>
</div>
</body>
</html>