前端入门基础之 HTML 与 CSS 之三

发表于 阅读次数： 评论数： 本文字数： 2k 阅读时长 ≈ 2 分钟

大纲

CSS 基础

行高与行间距

行间距

在 HTML 中，展示的文字涉及到下述几条基准线，包括顶线 (绿色)、中线 (蓝色)、基线 (红色)、底线 (紫色)。行距是指一行底线到下一行顶线的垂直距离。

行高

行高是指一行基线到下一行基线的垂直距离。希望设置文本在元素中垂直方向的位置时，当盒子没有设置固定的高度，那么高度会随着行高的变化而变化；此时高度就是行高的值，因为文本始终要保持垂直居中于盒子。当盒子设置了固定的高度时，高度不会随着行高的变化而变化。一句话简单概括，当希望一个元素中的文本垂直居中于这个元素，则可以设置行高等于盒子的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>行高和文本垂直居中</title>
    <style type="text/css">
        div {
            background-color: pink;
            font-size: 40px;
            line-height: 80px;
            height: 80px;
        }
    </style>
</head>

<body>
    <div>文本</div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

复合属性

font 复合属性

  • font 复合属性的书写规则：倾斜 | 加粗 | 字号/行高 | 字体，其中 字号 和 字体 是必填项
  • font 复合属性的书写示例：font: italic 700 50px/100px "宋体"、font: 50px "宋体"
  • 当单属性和复合属性同时存在时，必须先写复合属性再写单属性，否则单属性会被复合属性中的值覆盖掉
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>font复合属性</title>
    <style type="text/css">
        div {
            color: red;
            height: 100px;
            background-color: pink;
        }
        .box1 {
            line-height: 100px;
            /* font 单属性 */
            font-size: 50px;
            font-weight: 400;
            font-family: "宋体";
            font-style: italic;
        }
        .box2 {
            /* font 复合属性 */
            font: italic 700 50px/100px "宋体";
        }
    </style>
</head>
<body>
    <div class="box1">font 单属性</div>
    <p></p>
    <div class="box2">font 复合属性</div>
</body>
</html>

border 复合属性

  • border 复合属性的书写规则：粗细 | 样式 | 颜色
  • border 复合属性的书写示例：border: 3px dotted red、border: dotted red
  • 当单属性和复合属性同时存在时，必须先写复合属性再写单属性，否则单属性会被复合属性中的值覆盖掉
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>

<head>
    <meta charset="utf-8">
    <title>border复合属性</title>
    <style type="text/css">
        div {
            color: black;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: pink;
        }
        .box1 {
            /* border 单属性 */
            border-width: 5px;
            border-style: solid;
            border-color: red;
        }
        .box2 {
            /* border 复合属性 */
            border: 3px dotted red;
        }
    </style>
</head>
<body>
    <div class="box1">border 单属性</div>
    <p></p>
    <div class="box2">border 复合属性</div>
</body>
</html>

background 复合属性

  • background 复合属性的书写规则：背景颜色 | 背景图片 | 背景图片的平铺方式 | 水平位置 | 垂直位置
  • background 复合属性的书写示例：background: pink url(https://www.techgrow.cn/img/head.jpg) no-repeat center center
  • 当单属性和复合属性同时存在时，必须先写复合属性再写单属性，否则单属性会被复合属性中的值覆盖掉
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>
<head>
    <meta charset="utf-8">
    <title>background复合属性</title>
    <style type="text/css">
        div {
            color: red;
            width: 400px;
            height: 400px;
            line-height: 200px;
            text-align: center;
        }
        .box1 {
            /* background 单属性 */
            background-color: pink;
            background-repeat: no-repeat;
            background-position: right bottom;
            background-image: url(https://www.techgrow.cn/img/head.jpg);
        }

        .box2 {
            /* background 复合属性 */
            background: pink url(https://www.techgrow.cn/img/head.jpg) no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="box1">background 单属性</div>
    <p></p>
    <div class="box2">background 复合属性</div>
</body>
</html>

盒子模型

盒子模型概念

padding 内边距

值得一提的是，padding 存在减宽度的使用场景：当块元素没有设置固定宽度时，即宽度和父元素一样，此时给该元素设置水平方向的 padding 时，不会撑宽盒子，而是会从 content 自动减去 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
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>padding内边距</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background: pink;
            /* 单属性的写法 */

            /* 左内边距 */
            padding-left: 10px;
            /* 上内边距 */
            padding-top: 10px;
            /* 右内边距 */
            padding-right: 10px;
            /* 下内边距 */
            padding-bottom: 10px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: yellow;
            /* 复合属性的写法 */

            /* 一个值，表示上右下左的内边距 */
            padding: 10px;
            /* 两个值，表示上下、左右的内边距 */
            padding: 10px 20px;
            /* 三个值，表示上、左右、下的内边距 */
            padding: 10px 20px 30px;
            /* 四个值，表示上、右、下、左的内边距 */
            padding: 10px 20px 30px 40px;
        }
        .phone {
            width: 50px;
            height: 100px;
            background: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="phone"></div>
    </div>
    <div class="box2">
        <div class="phone"></div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

margin 外边距

值得一提的是，外边距存在合并的使用场景：当垂直排列的两个块元素，分别给上面的盒子设置向下的外边距和给下面的盒子设置向上的外边距，此时会形成外边距合并。当两个外边距的值相同时，那么外边距就是该值，当两个值不同时则是较大的那个值。

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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>margin外边距</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background: pink;
            /* 单属性的写法 */

            /* 左外边距 */
            margin-left: 30px;
            /* 上外边距 */
            margin-top: 30px;
            /* 右外边距 */
            margin-right: 30px;
            /* 下外边距 */
            margin-bottom: 30px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: greenyellow;
            /* 复合属性的写法 */

            /* 一个值，表示上右下左的外边距 */
            margin: 10px;
            /* 两个值，表示上下、左右的外边距 */
            margin: 10px 20px;
            /* 三个值，表示上、左右、下的外边距 */
            margin: 10px 20px 30px;
            /* 四个值，表示上、右、下、左的外边距 */
            margin: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

margin 外边距塌陷

  • 外边距塌陷：嵌套的两个块元素，给子元素（第一个）设置向上的外边距，此时父元素会跟着掉下来，形成了外边距塌陷
  • 解决方案:
    • 第一种：给父元素设置上边框，border-top: 1px solid transparent;
    • 第二种：给父元素设置 overflow 属性，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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>margin(外边距)塌陷</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            overflow: hidden;
            background: pink;
        }
        .box2 {
            width: 50px;
            height: 80px;
            margin-left: 20px;
            margin-top: 20px;
            background: greenyellow;
            
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

overflow 属性

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow属性</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            
            /* 溢出属性 */
            
            /* 溢出隐藏 */
            /* overflow: hidden; */

            /* 溢出滚动 */
            /* overflow: scroll; */

            /* 溢出自动设置滚动条 */
            overflow: auto;

            /* 换行属性 */

            /* 强制换行 */
            /* word-break: break-all; */

            /* 强制不换行 */
            /* white-space: nowrap; */
            
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        5月份，规模以上工业增加值率先实现由负转正，同比增长0.7%，6月份增速加快至3.9%。随着企业复工复产加快推进，产业链供应链堵点卡点逐步打通，汽车、电子等重点行业带动作用有望进一步增强。6月份，制造业PMI重回临界点以上，其中生产经营活动预期指数升至55.2%，表明制造业企业信心不断增强。
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

块元素水平居中

text-align 能让标签内的文本、行内元素、行内块元素水平居中，但不能让标签内的块元素水平居中。如果希望标签内的块元素水平居中，需要给块元素设置水平左右方向的外边距为自适应，即 margin: 0 auto;。

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>块元素水平居中</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            text-align: center;
            background: pink;
        }
        .box2 {
            width: 50px;
            height: 50px;
            /* 让块元素水平居中于父元素：设置水平左右方向的外边距为自适应 */
            margin: 0 auto;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        盒子
        <div class="box2"></div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

清除标签默认样式

HTML 标签一般都有默认的 CSS 属性，若希望去掉默认的 CSS 属性（CSS 初始化），那么可以采用以下两种方式来实现。

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="“utf-8">
    <title>清除标签默认样式(CSS初始化)</title>
    <style type="text/css">
        /* 第一种方式：使用星号（通配符），表示所有Html标签，在工作中不建议使用此方式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 第二种方式：初始化将用到的标签，这样可以提高执行效率，在工作中建议使用此方式*/
        body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p{
            margin: 0;
            padding: 0;
        }

        .box {
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <h1>标题</h1>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <dl>
        <dt>列表4</dt>
        <dt>列表5</dt>
    </dl>
</body>
</html>

块元素的默认宽度

  • 块元素的默认宽度：块元素在不设置固定宽度时，其默认的宽度和父元素（content 区域）一样
  • 块元素的默认面积组成：margin + border + padding + content
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="“utf-8">
    <title>块元素的默认高度</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 300px;
            background: pink;
        }
        .box2 {
            height: 100px;
            background: red;
            padding-left: 30px;
            border-left: 20px solid blue;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">文本内容</div>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：

img 标签底部留白

由于 img 标签是行内块元素，底部会和文本的基线对齐，所有会留有一部分空白。去除底部留白的方案如下：

  • 第一种方案：将 img 标签转换成块元素：display:block
  • 第二种方案：将 box 的字体大小设置成 0
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="“utf-8">
    <title>解决img底部留有空白的问题</title>
    <style type="text/css">
        .box {
            border: 1px solid red;
            /* 第一种 */
            /* font-size: 0; */
        }
        .box img {
            /* 第二种（推荐） */
            display: block;
        }
        img {
            width: 300px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg" />图片
    </div>
</body>
</html>

CSS 实战

a 标签导航

学习目标：熟悉行高属性的应用

  • 有个 5 个 a 标签，默认状态：宽是 100，高是 30，背景色是 yellow，字体颜色是 green，文本水平且居中于 a 标签，去掉下划线
  • 鼠标移入 a 标签时，背景色变成 yellowgreen，字体颜色变成 red，加上下划线
  • 5 个 a 标签水平居中于 box，且 box 的背景色是 pink
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a标签导航</title>
    <style type="text/css">
        .box {
            background-color: pink;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .box a {
            width: 100px;
            height: 30px;
            line-height: 30px;
            color: green;
            display: inline-block;
            text-decoration: none;
            background-color: yellow;
        }
        .box a:hover {
            color: red;
            text-decoration: underline;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="##">导航</a>
        <a href="##">导航</a>
        <a href="##">导航</a>
        <a href="##">导航</a>
        <a href="##">导航</a>
    </div>
</body>
</html>

上述代码，在浏览器运行的效果如下：