听阳光的猫

道阻且长、望你如一

0%

HTML和CSS的小案例

发表于 更新于 分类于
本文字数： 42k 阅读时长 ≈ 38 分钟

coderwhy

01_表格实现细线表格

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
<!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>
        h2 {
            text-align: center;
        }

        table {
            /* 1.边框的宽度 2.实线/虚线 3.边框的颜色 */
            border: 1px solid #666;

            /* 重点: 将边框合并 */
            border-collapse: collapse;

            /* table的居中显示 */
            margin: 20px auto;
        }

        table tr:first-child {
            font-weight: 700;
        }

        td {
            border: 1px solid #666;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <!-- table>(tr>td{单元格$}*5)*3 -->
    <h2>影院电影放映列表</h2>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
    </table>

</body>
</html>

text-align 用于设置元素内容在元素中的水平对齐方式，CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。

text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

02_表格表格中其他元素

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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>
        table {
            /* 1.边框的宽度 2.实线/虚线 3.边框的颜色 */
            border: 1px solid #666;

            /* 重点: 将边框合并 */
            border-collapse: collapse;

            /* table的居中显示 */
            margin: 20px auto;
        }

        caption {
            font-weight: 700;
            font-size: 25px;

            /* 增加底部的外边距 */
            margin-bottom: 20px;
        }

        td, th {
            border: 1px solid #666;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    
    <!-- table>(tr>td{单元格$}*5)*3 -->
    <!-- <h2>影院电影放映列表</h2> -->
    <table>
        <caption>影院电影放映列表</caption>
        <thead>
            <tr>
                <th>单元格1</th>
                <th>单元格2</th>
                <th>单元格3</th>
                <th>单元格4</th>
                <th>单元格5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
                <td>单元格5</td>
            </tr>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
                <td>单元格4</td>
                <td>单元格5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>页脚1</td>
                <td>页脚2</td>
                <td>页脚3</td>
                <td>页脚4</td>
                <td>页脚5</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

03_表格单元格合并基本使用

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>Document</title>

    <style>
        table {
            border-collapse: collapse;

            margin: 0 auto;
        }

        td {
            border: 1px solid skyblue;
            padding: 20px;

            text-align: center;
        }
    </style>
</head>
<body>

    <!-- column: 列 -->
    <!-- row: 行 -->
    
    <table>
        <tr>
            <td colspan="2">单元格1</td>
            <!-- <td>单元格2</td> -->
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td rowspan="2">单元格3</td>
            <td rowspan="2" colspan="2">单元格4</td>
            <!-- <td>单元格5</td> -->
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <!-- <td>单元格3</td> -->
            <!-- <td>单元格4</td> -->
            <!-- <td>单元格5</td> -->
        </tr>
    </table>

</body>
</html>

04_表格单元格合并的练习

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>
        table {
            border-collapse: collapse;

            margin: 0 auto;
        }

        td {
            border: 1px solid skyblue;

            /* 第一个值上下的值 第二值左右的值 */
            padding: 6px 25px;

            text-align: center;
        }

        [colspan], [rowspan], tr:nth-child(2) {
            font-weight: 700;
        }
    </style>
</head>
<body>
    
    <table>
        <tr>
            <td colspan="6">课程表</td>
        </tr>
        <tr class="week">
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td rowspan="4">下午</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td rowspan="2">晚自习</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
        <tr>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
            <td>音乐</td>
        </tr>
    </table>

</body>
</html>

05_表单表单提交相关的演练

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>
        /* css reset: 了解 */
        /* body, ul {
            margin: 0;
            padding: 0;
        } */

        ul {
            list-style: none;
        }

        input, textarea {
            outline: none;
        }

        textarea {
            resize: none;
        }

        /* 真正样式的css */
        fieldset {
            width: 400px;
        }

        input, textarea {
            outline: none;
        }

        input:focus, textarea:focus  {
            border-color: #4791ff;
            border-style: solid;
        }
    </style>
</head>
<body>
    
    <form action="http://www.baidu.com" 
          method="POST"
          enctype="multipart/form-data">

        <fieldset>
            <legend>必填信息</legend>
            <!-- 1.手机输入框 -->
            <div>
                <label for="phone">手机：</label>
                <input type="text" 
                       maxlength="11" 
                       placeholder="请输入您的手机号"
                       autofocus
                       name="phone"
                       tabindex="-1">
            </div>

            <!-- 2.密码输入框 -->
            <div>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password">
            </div>
            
            <!-- 3.验证码输入框 -->
            <div>
                <label for="validate">验证码：</label>
                <input type="text" id="validate" name="code">

                <!-- 3.1.button实现方式一: button -->
                <!-- <button>获取验证码</button> -->

                <!-- 3.2.button实现方式二: input-->
                <input type="button" value="获取验证码" disabled>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>选填信息</legend>

            <!-- 4.照片选择(文件上传) -->
            <div>
                <label for="photo">照片：</label>
                <input type="file" id="photo" name="photo">
            </div>
            
            <!-- 5.性别选择 -->
            <div>
                <span>性别：</span>
                <label for="male">男</label>
                <input type="radio" name="sex" id="male" value="male" checked>
                <label for="female">女</label>
                <input type="radio" name="sex" id="female" value="female">
            </div>
            
            <!-- 6.爱好选择 -->
            <div>
                <span>爱好：</span>
                <label for="sing">唱歌</label>
                <input type="checkbox" name="hobbies" id="sing" value="sing" checked>
                <label for="dance">跳舞</label>
                <input type="checkbox" name="hobbies" id="dance" value="dance">
                <label for="rap">rap</label>
                <input type="checkbox" name="hobbies" checked id="rap" value="rap">
                <label for="basketball">篮球</label>
                <input type="checkbox" name="hobbies" id="basketball" value="basketball">
            </div>

            <!-- 7.学历 -->
            <div>
                <span>学历：</span>
                <select name="education" id="" multiple>
                    <option value="0">小学</option>
                    <option value="1">初中</option>
                    <option value="2" selected>高中</option>
                    <option value="3">大专</option>
                </select>
            </div>

            <!-- 8.简介 -->
            <div>
                <label for="introduce">简介：</label>
                <textarea name="intro" cols="20" rows="5" id="introduce"></textarea>
            </div>        
        </fieldset>

        <!-- 9.重置按钮 -->
        <!-- 
            前提：
                1.前提一：type必须是reset类型(value值可以不写)
                2.前提二: 所有的内容都必须在同一个表单中(form)
        -->
        <input type="reset">

        <!-- 10.进行表单提交 -->
        <input type="submit">
    </form>
</body>
</html

06_邮箱列表

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
66
67
68
69
70
71
72
73
74
75
76
77
<!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>
        /* 样式重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        /* 整体的样式 */
        .email {
            width: 100px;
            border: 2px solid #999;
            text-align: center;
        }

        .email:hover ul {
            display: block;
        }

        /* 局部: header */
        /* .header:hover+ul {
            display: block;
            background-color: #f00;
        } */

        .header {
            background-color: #999;
            color: #fff;
        }

        /* 局部: 邮箱列表 */
        .email ul {
            display: none;
        }

        .email ul li a:hover {
            background-color: skyblue;
        }

        .email ul li a {
            display: block;
        }

    </style>
</head>
<body>
    
    <div class="email">
        <div class="header">邮箱</div>
        <ul>
            <li><a href="#">QQ邮箱</a></li>
            <li><a href="#">163邮箱</a></li>
            <li><a href="#">139邮箱</a></li>
        </ul>
    </div>

    <div class="product">
        <ul class="list">
            <li></li>
        </ul>
    </div>

</body>
</html>

07_分页列表

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>
        /* 1.样式的重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #0000cc;
        }

        /* 2.整体样式 */


        /* 3.每一个li的样式 */
        .page ul li {
            display: inline-block;
        }

        .page ul li a {
            display: inline-block;
            width: 34px;
            height: 34px;
            border: 1px solid #e1e2e3;

            font-size: 14px;

            /* 调整间距 */
            margin-right: 5px;

            /* 居中 */
            text-align: center;
            line-height: 34px;
        }

        .page ul li a:hover {
            border: 1px solid #38f;
            background-color: #f2f8ff;
        }

        .page .prev a, .page .next a {
            width: 88px;
        }

        /* 4.点击后的a效果 */
        .page .active {
            width: 36px;
            height: 36px;
            line-height: 36px;

            border: none;
            font-weight: 700;
            color: #000;

            /* 不好: 依然是可以点击 */
            /* cursor: initial; */
        }

        .page .active:hover {
            border: none;
            background-color: transparent;
        }
        
            /* 第二种选中的简单方案 */
        .page ul li .active {
            border: 1px solid transparent;
            /* width: 36px;
            height: 36px;
            line-height: 36px;
            border: none; */
            font-weight: 700;
        }

        .page ul li .active:hover {
            border: 1px solid transparent;
            background-color: transparent;
        }
    </style>
</head>
<body>

    <!-- .page>ul>(li{&lt;上一页}>a[href=#])+(li{$}*10>a[href=#])+li{下一页&gt;}>a[href=#] -->

    <!-- .page>ul>(li>a=[href=#]{$})*10 -->
    <div class="page">
        <ul>
            <li class="prev"><a href="#">&lt;上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a class="active">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li class="next"><a href="#">下一页&gt;</a></li>
        </ul>
    </div>

</body>
</html>

image-20200324202229217

08_css-sprite京东练习

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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>

        /* reset.css */
        p, ul, body, h5 {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        /* common.css */
        .wrap {
            width: 1000px;
            margin: 0 auto;
        }

        .nav {
            height: 30px;
            background-color: #333;
            color: #fff;
        }

        /* 具体的样式 */
        li, h5, p {
            display: inline-block;
            /* float: left; */
            vertical-align: middle;
        }

        .service ul li {
            margin-left: 12px;
            margin-right: 25px;
        }

        .service ul li p {
            height: 42px;
            line-height: 42px;

            font-size: 18px;
            color: #444;
            font-weight: 700;

            margin-left: 3px;
        }

        .service ul li h5 {
            width: 36px;
            height: 42px;
           /* 将多快好省四个字缩走了 */
            text-indent: -999px;
            background-image: url("./img/jd_sprite_01.png");
        }

        .service ul li:nth-child(1) h5 {
            background-position: 0 -192px;
        }

        .service ul li .kuai {
            background-position: -41px -192px;
        }

        .service ul li .hao {
            background-position: -82px -192px;
        }

        .service ul li .sheng {
            background-position: -123px -192px;
        }

    </style>
</head>
<body>
    
    <!-- 1.测试 -->
    <div class="nav wrap">
        <div class="left">左边的内容</div>
        <div class="right">右边的内容</div>
    </div>
    <div class="header wrap">
        
    </div>
    <div class="footer wrap"></div>

    <!-- 2.多快好省 -->
    <div class="service wrap">
        <ul>
            <li>
                <h5 class="duo">多</h5>
                <p>品类齐全，轻松购物</p>
            </li>
            <li>
                <h5 class="kuai">快</h5>
                <p>多仓直发，极速配送</p>
            </li>
            <li>
                <h5 class="hao">好</h5>
                <p>正品行货，精致服务</p>
            </li>
            <li>
                <h5 class="sheng">省</h5>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>

</body>
</html>

CSS 的属性 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

vertical-align属性可被用于两种环境：

  • 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片

  • 垂直对齐表格单元内容:

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

09_定位考拉侧面工具栏

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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>
        /* 样式的重置 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        i {
            font-style: normal;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        /* 设置样式 */
        .aside-right {
            position: fixed;
            right: 60px;
            top: 100px;
            border: 1px solid #eaeaea;
        }

        .aside-right ul li a {
            display: inline-block;
            width: 62px;
            height: 48px;
            padding: 12px 0 0;
            font-size: 12px;
            text-align: center;
            border-bottom: 1px solid #eaeaea;
        }

        .aside-right ul li a:hover {
            color: #ff1e32;
            background-color: #f6f6f6;
        }

        .aside-right ul li a.top {
            border-bottom: none;
        }

        .aside-right ul a i {
            display: block;
            margin: 0 auto 3px;
            width: 20px;
            height: 20px;
        }

        .aside-right ul .sign i {
            background-image: url("./img/icon-aside-right-signin.png");
        }
        
        .aside-right ul .cart i {
            background-image: url("./img/icon-aside-right-cart.png");
        }

        .aside-right ul .app i {
            background-image: url("./img/icon-aside-right-phone.png");
        }

        .aside-right ul .top i {
            background-image: url("./img/icon-aside-right-top.png");
        }

        .aside-right ul .sign:hover i {
            background-image: url("./img/icon-aside-right-signin-active.png");
        }

        .aside-right ul .cart:hover i {
            background-image: url("./img/icon-aside-right-cart-active.png");
        }

        .aside-right ul .app:hover i {
            background-image: url("./img/icon-aside-right-phone-active.png");
        }

        .aside-right ul .top:hover i {
            background-image: url("./img/icon-aside-right-top-active.png");
        }
    </style>

</head>
<body>
    
    <div class="aside-right">
        <ul>
            <li>
                <a class="sign" href="">
                    <i></i>
                    <span>签到</span>
                </a>
            </li>
            <li>
                <a class="cart" href="">
                    <i></i>
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a class="app" href="">
                    <i></i>
                    <span>APP</span>
                </a>
            </li>
            <li>
                <a class="top" href="">
                    <i></i>
                    <span>TOP</span>
                </a>
            </li>
        </ul>
    </div>

</body>
</html>

10_定位考拉二维码

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,\5FAE\8F6F\96C5\9ED1,tahoma,simsun,\5b8b\4f53;
        }

        .phone {
            text-decoration: none;
            color: #333;
            position: relative;
            margin-left: 300px;
        }

        .phone .code {
            position: absolute;
            top: 27px;
            left: 50%;
            transform: translate(-50%);
            padding: 5px 5px 0;
            border: 1px solid #eaeaea;
            display: none;
            /* text-align: center; */
        }



        .phone .code span {
            text-align: center;
            font-size: 14px;
            display: block;
            /* display: inline-block; */
        }
        
        .phone .code img {
            margin-bottom: 3px;
        }

        .phone .code .arrow {
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            margin: 0 auto;

            width: 8px;
            height: 8px;
            background-color: #fff;

            border-top: 1px solid #eaeaea;
            border-left: 1px solid #eaeaea;
            transform: rotate(45deg);
        }
		/*  方案一  */
        .phone>span:hover+.code {
            display: block;
        }
        /*  方案二  */ 
        .phone:hover .code {
            display: block;
        }
    </style>
</head>
<body>
    <a class="phone" href="#">
        <span>手机考拉</span>
        <span class="code">
            <span class="arrow"></span>
            <img src="./img/qrcode.png" alt="">
            <span>下载APP</span>
            <span>领1000元新人礼包</span>
        </span>
    </a>
</body>
</html>

11_定位梦幻西游的大图

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 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>
        body {
            margin: 0;
        }

        .box {
            overflow: hidden;
            min-width: 1000px;
        }

        .box img {
            /* 希望图片向左距离=图片宽度*0.5-div宽度*0.5 */
            /* 1.向左移动img的一半 */
            position: relative;
            left: -960px;
            /* left: -50%; */
            /* transform: translate(-50%); */

            /* 2.向右移动父元素(.box)的一半 */
            margin-left: 50%;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <img src="./img/mhxy.jpg" alt="">
    </div>

</body>
</html>

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。

left和margin-left的百分比相对于包含块的宽度

translate的百分比相对于自己的

12_定位定位元素的居中

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 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>
        .box {
            width: 1000px;
            height: 500px;
            background-color: #f00;
            position: relative;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: #ff0;
            position: absolute;
            left: 10px;
            right: 10px;
            margin: 0 auto;

            top: 50%;
            transform: translate(0, -50%);
            /* bottom: 0; */
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="inner"></div>
    </div>

</body>
</html>

CSS中left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移， 非定位元素设置此属性无效。

left的效果取决于元素的position属性：

  • 当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
  • 当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
  • 当position设置为sticky时，如果元素在viewport里面，left属性的效果和position为relative等同；如果元素在viewport外面，left属性的效果和position为fixed等同。
  • 当position设置为static时，left属性无效。

当left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

13_定位考拉商品大图

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>
    <link rel="stylesheet" href="../css/reset.css">

    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        img {
            vertical-align: middle;
        }

        .beauty-left {
            position: relative;
            background-color: #f00;
            display: inline-block;
        }

        .beauty-left ul {
            position: absolute;
            bottom: 30px;
            width: 285px;

            text-align: justify;
            text-align-last: justify;

            /* 居中显示 */
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .beauty-left ul li {
            display: inline-block;
        }

        .beauty-left ul li a {
            display: inline-block;
            width: 80px;
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
            font-size: 12px;
            
            text-align: center;
            text-align-last: center;

            border: 1px solid #eaeaea;
            border-radius: 40px;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1);
            background-color: #fff;
        }

        .beauty-left ul li a:hover {
            color: #ff1e32;
        }
    </style>
</head>
<body>
    
    <div class="beauty-left">
        <a href="#">
            <img src="./img/beauty-left-img.jpg" alt="">
        </a>
        <ul>
            <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>
            <li><a href="#">面部精华</a></li>
        </ul>
    </div>

</body>
</html>

14_绝对定位的演练

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 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>
        .box1 {
            position: relative;

            width: 500px;
            height: 500px;
            background-color: #f00;
        }

        .box2 {
            position: absolute;

            right: 0;

            width: 300px;
            height: 300px;
            background-color: #0f0;
        }

        a {
            position: absolute;
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2">
            <a href="">a元素</a>
        </div>
    </div>

</body>
</html>

15_京东布局案例01

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
<!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 {
            width: 990px;
            height: 500px;
            background-color: #f00;

            margin: 0 auto;
        }

        .section {
            float: left;
            width: 490px;
            height: 300px;
        }

        .section1 {
            background-color: #0f0;
            margin-right: 10px;
        }

        .section2 {
            background-color: #00f;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="section section1"></div>
        <div class="section section2"></div>
    </div>

</body>
</html>

16_京东布局案例02

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
66
67
68
69
70
71
72
73
74
75
76
<!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>
        /* 前提: border-width和padding-width为0 */
        /* width of block = content-width + margin-left + margin-right + padding+border */
        /* 990 = content-width + 0 + -10px */
        /* content-width = 990 + 10 -> 1000 */
        .container {
            width: 990px;
            height: 500px;
            background-color: #f00;

            margin: 0 auto;
        }

        /* 0 + 0 + 0 + width + 0 + 0 + -10 = 990 */
        /* width: 990+10 = 1000 */

        .wrap {
            margin-right: -10px;
        }

        .section {
            float: left;

            margin-top: 10px;
            width: 190px;
            height: 100px;
            background-color: #0f0;

            margin-right: 10px;
        }

        /* div .section:nth-child(5n) {
            margin-right: 0;
        } */

        /* .section5, .section10 {
            margin-right: 0;
        } */

        /* .section1, .section2, .section3, .section4, .section5 {
            margin-right: 10px;
        } */
    </style>
</head>
<body>
    
    <div class="container">
        <div class="wrap">
            <div class="section section1"></div>
            <div class="section section2"></div>
            <div class="section section3"></div>
            <div class="section section4"></div>
            <div class="section section5"></div>
            <div class="section section6"></div>
            <div class="section section7"></div>
            <div class="section section8"></div>
            <div class="section section9"></div>
            <div class="section section10"></div>
            <div class="section section6"></div>
            <div class="section section7"></div>
            <div class="section section8"></div>
            <div class="section section9"></div>
            <div class="section section15"></div>
        </div>
    </div>

</body>
</html>

17_京东布局案例03

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
66
67
<!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 {
            width: 990px;
            /* height: 306px; */
            height: auto;
            background-color: #f00;
            margin: 0 auto;
        }

        .wrap {
            margin-right: -10px;
        }

        .item {
            float: left;

            margin-right: 10px;
            width: 240px;
            background-color: orange;
        }

        .itema {
            height: 306px;
        }

        .itemb {
            height: 148px;
        }

        .item-last {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div class="wrap">
            <div class="item itema"></div>
            <div class="item itema"></div>
    
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item itemb item-last"></div>
            <div class="item itemb item-last"></div>
        </div>
    </div>

    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>

</body>
</html>

18_浮动考拉案例练习01

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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="`">
    <title>Document</title>

    <style>
        /* CSS reset */
        h2 {
            margin: 0;
            padding: 0;
        }

        a  {
            text-decoration: none;
            color: #666;
        }

        .f-left {
            float: left;
        }

        .f-right {
            float: right;
        }

        /* 样式相关 */
        .header {
            width: 1100px;
            margin: 0 auto;
            /* background-color: #0f0; */
            height: 49px;
        }

        .header-left {
            /* float: left; */
            font-size: 14px;
        }

        .header-left h2, .header-left span, .header-left a {
            float: left;
            margin-right: 20px;
        }

        .header-left h2 {
            font-size: 22px;
        }

        .header-left .search {
            margin-top: 9px;
        }

        .header-left .search a:hover {
            text-decoration: underline;
        }

        .header-left .search .hot {
            color: #ff080f;
        }

        .header-right {
            /* float: right; */
            margin-top: 9px;
            font-size: 14px;
        }

        .header-right a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    
    <div class="header">
        <div class="header-left f-left">
            <h2>美妆专区</h2>
            <div class="search f-left">
                <span>热搜词：</span>
                <a href="#">面膜</a>
                <a class="hot" href="#">口红</a>
                <a href="#">眼霜</a>
                <a class="hot" href="#">精华</a>
                <a href="#">卸妆</a>
            </div>
        </div>
        <div class="header-right f-right">
            <a href="#">更多好货 ></a>
        </div>
    </div>

</body>
</html>

19_浮动考拉案例练习2

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>Document</title>

    <style>
        /* css reset */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 样式 */
        .brand {
            width: 1100px;
            height: 180px;
            margin: 0 auto;
            /* background-color: #f00; */
        }

        .brand ul {
            margin-right: -10px;
        }

        .brand ul li {
            float: left;
            width: 219px;
            height: 167px;
            /* background-color: yellowgreen; */
            margin-right: -1px;

            border: 1px solid #eaeaea;
        }

    </style>
</head>
<body>
    
    <div class="brand">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
</html>

20_浮动考拉案例练习3

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
<!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>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 布局样式 */
        .today {
            width: 1100px;
            margin: 0 auto;
        }

        .today ul {
            margin-right: -3px;
        }

        .today ul li {
            float: left;
            width: 420px;
            height: 190px;
            background-color: #f00;

            border: 1px solid #333;
            margin-right: -1px;
            margin-bottom: -1px;
        }

        .today ul .last {
            float: right;
            width: 260px;
            height: 381px;
            background-color: #0f0;
        }

    </style>
</head>
<body>
    
    <div class="today">
        <ul>
            <li class="last"><a href="#"></a></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

21_浮动考拉案例练习-04

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
66
67
68
69
70
71
72
73
74
75
76
77
<!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>
        
        /* 样式重置 */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 样式 */
        .wrap {
            width: 1100px;
            margin: 0 auto;
        }

        .beauty .left {
            float: left;
            width: 329px;
            height: 541px;
            border: 1px solid #eaeaea;
            margin: 0 0 -1px -1px;
        }

        .beauty .middle {
            float: left;
            width: 550px;
            height: 541px;
            /* border: 1px solid #eaeaea; */
            /* margin: 0 0 -1px -1px; */
        }

        .beauty .middle li {
            float: left;

            width: 274px;
            height: 270px;
            border: 1px solid #eaeaea;
            margin:  0 0 -1px -1px;
        }

        .beauty .right {
            float: left;
            width: 219px;
            height: 541px;
            border: 1px solid #eaeaea;
            margin: 0 0 -1px -1px;
        }

    </style>
</head>
<body>
    
    <div class="wrap">
        <div class="beauty">
            <div class="left"></div>
            <div class="middle">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="right"></div>
        </div>
    </div>

</body>
</html>

22_京东布局案例-清除浮动

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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 {
            width: 990px;
            background-color: #f00;
            margin: 0 auto;
        }

        .wrap {
            margin-right: -10px;
        }

        .item {
            float: left;

            margin-right: 10px;
            width: 240px;
            background-color: orange;
        }

        .itema {
            height: 306px;
        }

        .itemb {
            height: 148px;
        }

        .item-last {
            margin-top: 10px;
        }

        /* .container::after {
            content: "";
            clear: both;
            display: block;
        }


        .content::after {
            content: "";
            clear: both;
            display: block;
        }

        .brand::after {
            content: "";
            clear: both;
            display: block;
        } */
        
         /* 清除浮动 */       
        .clear-fix::after {
            content: "";
            clear: both;
            display: block;

            height: 0;
            visibility: hidden;
        }

        .clear-fix {
            /* 兼容IE6和7 */
            *zoom: 1;
        }
    </style>
</head>
<body>
    
    <div class="container clear-fix">
        <div class="wrap">
            <div class="item itema"></div>
            <div class="item itema"></div>
    
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item itemb item-last"></div>
            <div class="item itemb item-last"></div>
        </div>
        <!-- <div class="clear-fix"></div> -->
    </div>

    <div class="brand clear-fix"></div>

    <!-- <div class="clear-fix"></div> -->

    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>
    <p>其他内容</p>

</body>
</html>

23_flex布局的使用01

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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>
        .box {
            width: 550px;
            height: 400px;
            background-color: orange;
            margin: 0 auto;
            
            /* 
            1.开启flex布局:
                flex: 块级元素
                inline-flex: 行内元素
            */
            display: flex;

            /* 2.flex-direction: 决定主轴的方向 */
            /* row: 主轴从左到右 */
            /* row-reverse: 主轴从右到左 */
            /* column: 主轴从上到下 */
            /* column-reverse: 主轴从下到上 */
            /* flex-direction: column-reverse; */

            /* 3.justify-content: 决定flex items主轴的对齐方式 */
            /* justify-content: space-around; */

            /* 4.align-items: 绝对flex items在交叉轴的对齐方式 */
            /* align-items: baseline; */

            /* 5.结论: 默认情况下, 所有的flex items都会在同一行显示 */
            /* flex-wrap: nowrap */
            /* nowrap: 不换行 */
            /* flex-wrap: wrap-reverse; */

            /* 6.flex-flow: 缩写属性 -> flex-direction || flex-wrap */
            flex-flow: row wrap;
            justify-content: space-evenly;

            /* 7.align-content: 决定多行的flex items在交叉轴上的对齐方式 */
            align-content: space-around;
        }

        .item {
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
        }

        .item1 {
            background-color: #f00;
            /* height: 60px; */
            /* font-size: 50px; */
        }

        .item2 {
            background-color: #0f0;
            /* height: 150px; */
        }

        .item3 {
            background-color: #00f;
            /* height: 120px; */
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">item4</div>
        <div class="item item2">item5</div>
        <div class="item item3">item6</div>
        <div class="item item1">item7</div>
        <div class="item item2">item8</div>
        <div class="item item3">item9</div>
    </div>

    <strong>strong元素</strong>

</body>
</html>

24_flex布局的使用02

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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>
        .box {
            width: 550px;
            height: 400px;
            background-color: orange;
            margin: 0 auto;
            
            /* 1.开启flex布局*/
            display: flex;

            /* align-items: center; */
            /* flex-wrap: wrap; */
        }

        /* 
         750px - 550px = 200px
         200 / 3 = 66.66666px
         250 - 66 = 
        */

        /* 
        200 / 5 = 40
        
         */

        .item {
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;

            /* 1: flex-grow */
            flex: 1;
        }

        .item1 {
            background-color: #f00;
            /* order: 10; */
            /* flex-grow: .2;  */
            /* flex-shrink: .2; */

            /* flex-basis: 200px; */
        }

        .item2 {
            background-color: #0f0;
            /* height: 150px; */
            /* order: 6; */
            /* flex-grow: .2;  */
            /* flex-shrink: .2; */
        }

        .item3 {
            background-color: #00f;
            /* align-self: flex-end; */
            /* order: 100; */
            /* flex-grow: .3; */
            /* flex-shrink: .2; */
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>

    <strong>strong元素</strong>

</body>
</html>