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

发表于 阅读次数： 评论数： 本文字数： 665 阅读时长 ≈ 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>
最终效果图