0%

CSS布局

发表于 Valine：

CSS实现三栏布局

  • float布局
  • Position定位
  • table布局
  • 弹性(flex)布局
  • inline-block布局

float布局 + margin

  • 元素脱离文档流
  • 不脱离文本流

对自身影响：

  • 形成块（BFC），可以设置宽高
  • 位置尽量靠上
  • 位置尽量靠左或靠右

对兄弟元素影响：

  • 上面贴非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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!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>CSS实现三栏布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
            width: 300px;
            height: 100px;
            background: #631D9F;
        }

        .right {
            float: right;
            width: 300px;
            height: 100px;
            background: red;
        }

        .center {
            margin-left: 300px;
            margin-right: 300px;
            background-color: #4990E2;
        }

        .main {
            /*清除浮动*/
            overflow: hidden;
        }

        /*清除浮动*/
        .main::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <article class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中
            <h2>浮动布局</h2>
        </div>
    </article>
</body>

</html>

Position布局

position其属性有5种 :

  • inherit: 继承父元素的position属性值
  • static: 默认值，没有定位
  • fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位（不管屏幕内容怎么滑动,其位置不会改变）
  • relative:生成相对定位，相对于其原本位置进行定位
  • absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
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 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>CSS实现三栏布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            position: absolute;
            left: 0;
            width: 300px;
            background-color: red;
        }

        .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background-color: blue;
        }

        .right {
            position: absolute;
            right: 0;
            width: 300px;
            background-color: #3A2CAC;
        }
    </style>
</head>

<body>
    <article class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中
            <h2>Position布局</h2>
        </div>
    </article>
</body>

</html>

table布局

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
<!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>CSS实现三栏布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 100%;
            display: table;
        }

        .left,
        .center,
        .right {
            display: table-cell;
        }

        .left {
            width: 300px;
            background-color: red;
        }

        .center {
            background-color: blue;
        }

        .right {
            width: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>table布局</h2>
        </div>
        <div class="right">右</div>
    </article>
</body>

</html>

弹性(flex)布局

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
<!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>CSS实现三栏布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
        }

        .left {
            width: 400px;
            background-color: red;
        }

        .center {
            background-color: blue;
            word-break: break-word;
        }

        .right {
            background-color: red;
            width: 400px;
        }
    </style>
</head>

<body>
    <article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>弹性(flex)布局</h2>
        </div>
        <div class="right">右</div>
    </article>
</body>

</html>

inline-block布局

inline-block布局存在间隙

  • 原因：存在空白字符，字符存在间距
  • 解决：消灭空白字符或消除间距
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 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>CSS实现三栏布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            /*消除inline-block字符间隔*/
            font-size: 0;
        }

        .left,
        .center,
        .right {
            display: inline-block;
            /*重新设置字体大小*/
            font-size: 14px;
        }

        .left {
            width: 300px;
            background-color: red;
        }

        .center {
            background-color: blue;
        }

        .right {
            width: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>inline-block布局</h2>
        </div>
        <div class="right">右</div>
    </article>
</body>

</html>

如何清除浮动

父元素设置 overflow：

  • overflow: hidden;
  • overflow: auto;
1
2
3
4
.main {
    /*清除浮动*/
    overflow: hidden;
}

父元素设置 ::after ：

1
2
3
4
5
6
/*清除浮动*/
.main::after {
    content: '';
    display: block;
    clear: both;
}

如何适配移动端界面

  • viewport
  • rem/viewport/media query（响应式布局）
  • 设计上：隐藏，折行，自适应等

参考

-------------本文结束感谢您的阅读-------------