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

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

大纲

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
38
39
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>行内块横向布局的问题</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 300px;
        }
        .one {
            width: 50px;
            height: 50px;
            padding: 100px;
            /* margin: 100px; */
            background: red;
            display: inline-block;
        }
        .two {
            width: 100px;
            height: 100px;
            background: green;
            display: inline-block;
        }
        .three {
            width: 150px;
            height: 150px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

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

行内元素横向布局的问题

  • 代码换行会造成元素之间有默认间距
  • 行内元素是沿基线对齐（底部对齐），具体表现为当给元素设置垂直方向的内外边距时，由于受基线对齐的限制，垂直方向的内外边距起不到预期的效果
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>
<head>
    <meta charset="utf-8">
    <title>行内元素横向布局的问题：</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 300px;
        }
        .one {
            width: 100px;
            height: 100px;
            background: red;
        }
        .span1 {
            padding: 50px;
            /* margin: 50px; */
        }
        span {
            background: green;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <span class="span1">我是文本</span>
    <span class="span2">我是文本</span>
    <span class="span3">我是文本</span>
</body>

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

float 浮动属性

CSS 的三种显示模式（块级、行内、行内块）属于标准流。浮动的属性是 float，是一个脱离标准流的状态，也叫 “浮动流”。当元素设置浮动属性后，会按照标签的书写顺序，依次排列在包含块（父元素）内，一般称之为 浮动横向布局。值得一提的是，float 属性可以解决行内块和行内元素横向布局的问题，浮动横向布局 没有代码换行造成的默认间距，设置自身内外（垂直）边距不会影响周围的元素。

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>浮动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            margin: 300px;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动横向布局一</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动横向布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
        .box {
            width: 400px;
            height: 300px;
            background: gray;
        }
        .main {
            height: 200px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="main"></div>
</body>
</html>

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

浮动布局的高度超出问题

当子元素设置浮动后，且高度超出父元素的高度时，会影响到父元素下面的浮动元素。为了防止出现这样的问题，可以给子元素设置固定的高度。

浮动布局的高度塌陷问题

当子元素是浮动，且父元素没有设置固定高度时，由于子元素是飘起来的状态，父元素会认为没有内容撑开自身的高度，此时会造成高度塌陷，即父元素的高度是零。解决方案如下：

  • 第一种：给父元素设置 overflow: hidden 属性，此方案一般不适用于下拉菜单
  • 第二种：额外标签法
  • 第三种：父元素调用 clearFix 类名（推荐）
  • 第四种：给父元素设置浮动（此方案要正巧赶上父元素需要设置浮动时才能使用）

第一种解决方案

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局的高度塌陷问题</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
        .box {
            width: 400px;
            background: gray;
            margin: 0 auto;
            /* 第一种方案：给父元素设置overflow属性 */
            overflow: hidden;
        }
        .main {
            height: 200px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="main"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局的高度塌陷问题</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
        .box {
            width: 400px;
            background: gray;
            margin: 0 auto;
        }
        .main {
            height: 200px;
            background: yellow;
        }
        /* 第二种方案（额外标签法） */
        .four {
            background: orange;
            /* 清除之前的浮动元素造成的影响，让浮动元素占用位置 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <!-- 第二种方案（额外标签法） -->
        <div class="four"></div>
    </div>
    <div class="main"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局的高度塌陷问题</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
        .box {
            width: 400px;
            background: gray;
            margin: 0 auto;
        }
        .main {
            height: 200px;
            background: yellow;
        }
        /* 第三种方案（父元素调用clearFix类名） */
        .clearFix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 第三种方案（父元素调用clearFix类名） -->
    <div class="box clearFix">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="main"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左浮动布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .two {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: left;
            background: blue;
        }
        .box {
            width: 400px;
            background: gray;
            margin: 50px auto;
        }
        .clearFix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box clearFix">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>右浮动布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            float: right;
        }
        .two {
            width: 100px;
            height: 100px;
            float: right;
            background: green;
        }
        .three {
            width: 150px;
            height: 150px;
            float: right;
            background: blue;
        }
        .box {
            width: 400px;
            background: gray;
            margin: 50px auto;
        }
        .clearFix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box clearFix">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动实现文本环绕效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 500px;
            background-color: burlywood;
        }
        .box img {
            width: 300px;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://lmg.jj20.com/up/allimg/4k/s/01/21092416091L016-0-lp.jpg">
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈老刘哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈老刘哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>

CSS 实战

浮动版 a 标签导航实战

  • 当父元素宽度不够时，浮动元素会自动换行显示
  • 浮动元素不再具备之前的显示模式，在不设置宽高时，由其内容决定宽高
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
<head>
    <meta charset="utf-8">
    <title>a标签导航实战案例(浮动版)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            background-color: pink;
        }
        .box ul {
            width: 550px;
            margin: 0 auto;
        }
        .box ul li {
            float: left;
            margin-right: 10px;
        }
        .box ul li a {
            width: 100px;
            height: 30px;
            display: block;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            background-color: yellow;
        }
        .box ul li a:hover {
            color: red;
            background-color: yellowgreen;
        }
        .clearFix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="clearFix">
            <li>
                <a href="##">导航</a>
            </li>
            <li>
                <a href="##">导航</a>
            </li>
            <li>
                <a href="##">导航</a>
            </li>
            <li>
                <a href="##">导航</a>
            </li>
            <li>
                <a href="##">导航</a>
            </li>
        </ul>
    </div>
</body>
</html>

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