【CSS基础语法】CSS基础语法知识学习笔记汇总

前言

html类似于一个毛坯房骨架，css类似于给毛坯房进行装饰

代码文件整理：
static文件夹一般用来存放各种资源，比如图片、音频视频、css文件
index.html为骨架

css全称为层叠样式表，作用：修饰html标签

html与css：
在html标签中，最基础的就是div和span标签，其他绝大部分标签都是从这两个标签上扩展出来的，扩展的时候其实就是在div和span标签的基础上加了一些css样式
即有很多标签是在基础标签的基础之上加了一些css样式得到的，只不过这些样式很常用就把他们单独拿出来作为单独的标签使用

css与js：
同理：在css中有一些常用的固有属性，绝大部分属性都是用js实现出来，所以也把js中一些常用逻辑单独拿出来作为css的一些常用属性

html、css、js三者关系：
html最上层(表层)
css 较下层
js最深层(底层)

现在学的都是基础语法，基础语法一定要学，等以后写项目工程时其实都是用框架，就像在写程序是没有必要手写汇编一样

一、样式定义方式

1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
         css有三种定义方式：
         1.直接定义在标签的style属性中
         2.定义在style标签中，通过选择器影响对应的标签。
         3.定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

         第一种：行内样式表：
         直接定义在标签的style属性中，作为一个标签的属性直接定义出来的
         作用范围：仅对当前标签产生影响。(因为这种方式只能定义在某一个标签上面)
     -->
    <img width="300" src="/Learn2-css基础/static/images/mountain.jpg" alt="山">
    <img src="/Learn2-css基础/static/images/mountain.jpg" alt="山" style="width: 300px;">

    <div>yxc</div>
    <div style="width: 300px; height: 300px; background-color: lightblue;"></div>
    <!-- 
        css中style样式中width单位要加上px，1px就是1像素
        而在h5中width属性可以不加px，默认为px
     -->

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        内部样式表：
        定义在sty标签中，可以通过css选择器将某些标签设置成统一的样式 
        作用范围：可以对同一个页面中多个元素产生影响
        优点：定义一个样式可以应用于一个页面中的多个标签上
        注意：
        （1）如果只想修改其中的几个标签而不是全部标签，可以利用class属性，给标签起class名，css中通过class来选择
        css中通过.class名的形式来修改调用
        （2）同一个class中可以有多个类，中间只需要用空格隔开即可
        （3）class也可以跨标签使用
        （4）内部样式表可以分开定义，不一定只定义在一个标签style中，即可以定义多个style中
        （5）style理论上最好定义在head标签里面，但其实定义在body中也没有影响，很灵活
        
    -->
    <style>
        img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>

    <style type="text/css">
        p {
            width: 50px;
            height: 50px;
            background-color: lightgreen;
        }

        .blue-p {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <style>
        .big {
            width: 70px;
            height: 70px;
        }
    </style>

    <img class="big" src="/Learn2-css基础/static/images/logo.png" alt="">
    <img src="/Learn2-css基础/static/images/mountain.jpg" alt="">

    <p class="blue-p">1</p>
    <p class="big">2</p>
    <p class="blue-p big">3</p>
    <p>4</p>

</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
57
58
59
60
61
62
63

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        （1）如果想让样式同时应用到多个页面中，就要用外部样式表
        （2）将这样式存到一个文件中，通过link标签把定义的样式表动态链接进来。通过href属性，type可写可不写
        （3）也可以定义多个css样式表，因为如果网站变大之后，一个文件可能并不能把所有的样式都包含进来，代码多了很难维护。
        （4）外部样式表可以应用于多个页面文件中
        （5）优先级：html渲染器一般都是从前往后写，一行一行去执行
        如果两个css文件同时修改了一个html标签，按照一行一行的执行顺序，后面的会把前面的覆盖掉
     -->

    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style1.css" type="text/css">
    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.1.3style2.css" type="text/css">
</head>

<body>
    <img class="big" src="/Learn2-css基础/static/images/logo.png" alt="">
    <img src="/Learn2-css基础/static/images/mountain.jpg" alt="">

    <p class="blue-p">1</p>
    <p class="big">2</p>
    <p class="blue-p big">3</p>
    <p>4</p>
</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

2.css

p {
    width: 50px;
    height: 50px;
    background-color: lightgreen;
    /* css文件注释方式，可以注释单行 */
    /*
        也可以注释多行，与c++中注释类似 
     */
}

.blue-p {
    background-color: lightblue;
}

.big {
    width: 70px;
    height: 70px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
1
2
3
4
5

二、选择器

1.html

<!-- 
    如何能够高效的选择出我们希望选择的标签呢？
    css帮我们实现了一推我们常用的选择器，不需要硬背。
    选择器的作用：让我们很方便地选择出来我们希望选择的标签。
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.2选择器style.css">
</head>
<body>
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
    <div id="mydiv">div 5</div>
    <div class="red-tag big-tag">div 6</div>
    <div class="big-tag">div 7</div>
    <div class="effect">div 8</div>
    <a href="/Learn2-css基础/html/about1.html">about1</a>
    <a href="/Learn2-css基础/html/about2.html">about2</a>
    <a href="/Learn2-css基础/html/about3.html">about3</a>
    <a href="/Learn2-css基础/html/about4.html">about4</a>
    <button href="/Learn2-css基础/html/about1.html">about1</button>
    <button href="/Learn2-css基础/html/about2.html">about2</button>
    <button href="/Learn2-css基础/html/about3.html">about3</button>
    <button href="/Learn2-css基础/html/about4.html">about4</button>
    <input type="text" name="" id="">



    
    <p>p 1</p>
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>
    <p id="myp">p 5</p>
    <p class="red-tag">p 6</p>
    <p>p 7</p>
    <p>p 8</p>
    <p>p 9</p>
    <a href="#myp1">我的标签</a>
    <p>p 10</p>
    <p>p 11</p>
    <p id="myp1">p 12</p>

    <div class="real">div 1</div>
    <div class="big">div 2</div>
    <div class="big real">div 3</div>
    <div></div>

    <p>p 1</p>
    <p id="myp2" class="big">p 2</p>
    <p>p 3</p>
    <p>p 4</p>

    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>2</li>
        <li>3</li>
    </ul>

    <input type="text" name="">
    <input type="number" name="" id="">



    <p>锄禾日当午，</p>
    <p>汗滴禾下土。</p>
    <p>谁知盘中餐，</p>
    <p>粒粒皆辛苦。</p>
        
    <h1>悯农</h1>
    <h1>咏柳</h1>
    <h1>枫桥夜泊</h1>
    <h1>滕王阁序</h1>
    
</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
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

2.css

/*
1.标签(元素)选择器：
*/
div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

p {
    width: 50px;
    height: 50px;
    background-color: lightgreen;
    /* p标签自带外边距，div默认不带外边距 */
}


/*
2.ID选择器：
(1)每个标签都可以设置id属性名，一般同一个页面中给标签设置的id是不同的
(2)形式：#+标签id的名字。（一般与id相关的都是用#号）
*/
#mydiv {
    background-color: lightcoral;
}

#myp {
    background-color: lightsalmon;
}

/*
3.类选择器：
(1)第一种和第二种不常用，最常用的是第三种类选择器，class非常灵活，一般做项目只用前四种就够了
(2)每一个标签里都可以定义class属性，class里可以存若干个用空格隔开的类名
(3)class与id的区别：
id和class在逻辑上没有任何区别，所有的区别都是人为定义的
①同一页面中的每个标签设置id名一般来讲是唯一的，但多个标签可以用同一个class
②class里可以存若干个用空格隔开的类名：同一个标签同时可以具有多个class，但一般只能具有一个id
(4)形式：.+类名（一般与类有关的都加.）
.+类名表示类，#+id名表示id，什么都不加表示标签
(5)class渲染时的顺序：
与声明顺序无关，与css中class的定义顺序有关。按顺序表达最后一个
*/
.red-tag {
    background-color: red;
}

.big-tag {
    width: 120px;
    height: 120px;
}

/*
4.伪类选择器
又叫状态选择器

(1)链接伪类选择器
:hover：鼠标悬停时的样式
:link：链接访问前的样式
:visited：链接访问后的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

(2)位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。

(3)目标伪类选择器：
:target：当url指向该元素时生效。
*/
.effect:hover {
    transform: scale(1.2);
    /*鼠标方上去之后变大多少倍*/
    transition: 200ms;
    /*鼠标方上去之后实现渐变的效果，表示用多长时间渐变过去*/
}

#mydiv:hover {
    /*伪类型选择器可以加到任意选择器后面*/
    background-color: lightgreen;
    transition: 2000ms;
}

a:link {
    color: red;
}

a:visited {
    color: green;
}

a:hover {
    color: orange;
}

a:active {
    color: purple;
}

button:link {
    color: red;
    background-color: blue;
    /* color是字体颜色，background-color是背景颜色 */
}

button:visited {
    color: green;
}

button:hover {
    color: orange;
    background-color: aquamarine;
}

button:active {
    color: purple;
    background-color: chartreuse;
}


input:focus {
    /*focus聚焦，每个页面都有一个光标，就是按键盘的时候光标出现在什么地方，光标所在的元素被称为聚焦，聚焦常与输入框input常用
    悬停与聚焦的区别：
    聚焦需要鼠标或键盘点击，悬停不用
    */
    background-color: lightblue;
    width: 100px;
}

input:hover {
    transform: scale(1.2);
}


p:nth-child(24) {
    /* 
    nth-child()是一状态，即bool函数，依次判断每一个p是不是父节点body的第n个儿子，如果是就执行下面css样式
    注意父节点是body，下标从1开始
    不要理解为选择第n个p标签，即父节点body的第n个儿子(虽然是这样),要理解为是状态，是一个bool函数判断是不是满足这个条件
    */
    background-color: lightslategray;
}


p:nth-child(2n+1) {
    /* 
    an+b:an+b必须是正整数
    odd:表示奇数块
    even:表示偶数块 
    */
    background-color: blue;
}

p:target {
    transform: scale(1.2);
    color: orange;
    transition: 2s;
}


/*
5.复合选择器
有可能存在多个标签公用同一个状态，没有必要定义很多遍，使用复合选择器可以实现
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。

 */

div,
p {
    background-color: lightblue;
}

div:hover,
p:hover {
    background-color: lightblue;
}


div.big {
    transform: scale(1.2);
}


div.big.real {
    /* 
    .也可以串联，只有同时满足big和real才能执行
    以下三种等价
     */
    transform: scale(1.2);
}

.big.real {
    /* 不加div也一样，与上面那个等价 */
    transform: scale(1.2);
}

#myp2.big.real {
    transform: scale(1.2)
}

div+p {
    background-color: lightgreen;
    /* +表示紧跟在谁的后面才会执行 */
}

p+p {
    background-color: brown;
}

#myp2+p {
    background-color: black;
}

li ul li {
    /* 表示如果一个li他的祖先节点是li的话就会触发这个样式，不一定是父节点*/
    color: red
        /* 如果某一个样式的字体颜色变了，那么他的字体颜色是可以继承给它的子节点的 */
        /* 基于双指针的贪心算法匹配的 */
}

li>ul>ul {
    /* 表示如果一个ul他的父节点是li的话就会触发这个样式*/
    color: red
}


/*
6.通配符选择器
*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签

 */
* {
    /* *就是选择所有标签 */
    font-size: 24px;
}

input[id] {
    background-color: lightblue;
}

input:id {
    background-color: lightblue;
    /* 与上面等价 */
}

input[type=text] {
    /* 按照属性选择标签 */
    background-color: lightblue;
}


/* 
7.伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容
*/

p::first-letter {
    color: red;
    font-size: 110%;
}

p::selection {
    color: yellow;
    background-color: blueviolet;
}

h1::before {
    content: "《";
    color: red;
}

h1::after {
    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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293

三、颜色

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.3颜色style.css" type="text/css">

</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.css

/* 
1.预定义的颜色值
black、white、red、green、blue、lightblue等。

2.16进制表示法
使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。
简写方式：#ABC，等价于#AABBCC。

3.RGB表示法
rgb(173, 216, 230)。
其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

4.RGBA表示法
rgba(173, 216, 230, 0.5)。
前三个数同上，第四个数表示透明度。

取色方式
网页里的颜色，可以在chrome的调试模式下获取
其他颜色可以使用QQ的截图软件：
直接按c键，可以复制rgb颜色值
按住shift再按c键，可以复制16进制颜色值

*/
p {
    width: 50px;
    height: 50px;
}

p:nth-child(1) {
    background-color: lightblue;
}

p:nth-child(2) {
    background-color: #add8e6;
    color: #ABC
        /*#AABBCC的简写形式*/
}

p:nth-child(3) {
    background-color: rgb(173, 216, 230);
}

p:nth-child(4) {
    background-color: rgba(173, 216, 230, 0.5);

}
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

四、文本

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.4文本style.css" type="text/css">

</head>
<body>
    <h4>悯农</h4>
    <div class="mydiv">
        <p>锄禾日当午，</p>
        <p>汗滴禾下土。</p>
        <p>谁知盘中餐，</p>
        <p>粒粒皆辛苦。</p>
    </div>

    <div style="font-size: 2em;">
        第一层
        <div style="font-size: 2em;">
            第二层
            <div style="font-size: 2em;">
                第三层
            </div>
        </div>
    </div>

    <div style="font-size: 2rem;">
        第一层
        <div style="font-size: 2rem;">
            第二层
            <div style="font-size: 2rem;">
                第三层
            </div>
        </div>
    </div>

    <div class="mydiv1">

    </div>

    <div class="mydiv2">
        <p>锄禾日当午，</p>
        <p>汗滴禾下土。</p>
        <p>谁知盘中餐，</p>
        <p>粒粒皆辛苦。</p>
    </div>

   
    <div class="mydiv3">
        <p>锄禾日当午，锄禾日当午，锄禾日当午，
            锄禾日当午，锄禾日当午，锄禾日当午，
            锄禾日当午，锄禾日当午，锄禾日当午，
            锄禾日当午，锄禾日当午，锄禾日当午，
        </p>
        <p>汗滴禾下土。汗滴禾下土。汗滴禾下土。
            汗滴禾下土。汗滴禾下土。汗滴禾下土。
            汗滴禾下土。汗滴禾下土。汗滴禾下土。
            汗滴禾下土。汗滴禾下土。汗滴禾下土。
        </p>
        <p>谁知盘中餐，</p>
        <p>粒粒皆辛苦。</p>
    </div>

    <a href="/about.html">About</a>
</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
57
58
59
60
61
62
63
64
65
66
67
68
69

2.css

h4 {
    text-align: center;
    /*  
    text-align 相当于word中的对齐
    左右对齐：除了最后一行之外，左右都对齐
    文字对齐是可以继承的，子标签可以继承父标签的对齐方式
    */

}

.mydiv {
    text-align: center;
    font-size: 20px;
}

/*
网页中常用的长度单位：
px：绝对值，屏幕上一个像素点的长度，第一层默认是16px
以下都是相对值,用的比较多，
%	相对于父元素的百分比
em	相对于当前元素的字体大小,em永远都是相对值，所以只需要修改初始值，就可以让整个页面等比例放大缩小了
rem	相对于根元素的字体大小
vw	相对于视窗宽度的百分比，把浏览器窗口平均分成100份，1vw表示窗口宽度的百分之一
vh	相对于视窗高度的百分比，1vh表示窗口高度的百分之一，vw和vh可以实现与浏览器等比例缩放

 */

.mydiv {
    text-align: center;
    font-size: 200%;
}

.mydiv1 {
    width: 50vw;
    height: 50vw;
    background-color: lightblue;
}

.mydiv2 {
    text-align: center;
    line-height: 200px;
    /* 
    line-height是行高，行高就是每一行的高度，可以认为是行与行之间的距离
    a*b：a是宽度，b是高度 
    行高常应用于字体竖直居中，因为字在渲染会默认放到行的中间
    */
    background-color: lightblue;
    height: 200px;

    letter-spacing: 1.5em;
    /* 字间距，字和字之间的距离，1.5表示字和字之间隔着1.5个字的距离*/
}

.mydiv3 {
    text-indent: 2em;
    /* 缩进常应用于段落，此时单位常用em */
}

.mydiv3>p:nth-child(1) {
    text-decoration: underline dotted;
    /* 
    文本修饰，有下划线等很多
    常应用于删掉链接中的下划线 
    */
    text-shadow: 3px 3px 2px grey;
    /*  
    实现阴影效果
    有四个参数：阴影效果x方向的偏移量,阴影效果y方向的偏移量,阴影模糊r半径,color颜色
    注意css中的x,y的正方向，x向右为正方向，y向下为正方向与数中相反
    r可以省略，不写就是不模糊
    可以同时加多个阴影效果,即一个字可以有任意多个阴影效果，css中所有并列的项都是用空格隔开的
    */
    text-shadow: -5px -5px 2px gray, 5px -5px 2px red;

}

a {
    text-decoration: none;

}
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

五、字体

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Learn2-css基础/static/css/2.5字体style.css" type="text/css">
</head>
<body>
    <h4>悯农</h4>
    <div class="mydiv">
        <p>锄禾日当午，</p>
        <p>汗滴禾下土。</p>
        <p>谁知盘中餐，</p>
        <p>粒粒皆辛苦。</p>
    </div>

    <pre>
#include
using namespace std;
int main()
{
    int a,b;
    cin >> a >> b;
    cout << a+b;
    return 0;
}
    </pre>
</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

2.css

h4 {
    text-align: center;
}

.mydiv {
    text-indent: 3em;
}

.mydiv>p:nth-child(1) {
    font-size: 1.5rem;
    /* 字体型号，默认是16px */
    font-style: italic;
    /* 字体样式是否斜体：italic是斜体，normal是正常*/
    font-weight: 1000;
    /* 字体粗细：可以填1~1000中的值，没有单位，数越大越粗，也可以填一些文字选项，bolder，lighter等等*/
    font-family: serif;
    /* 字体种类：选项都不用倍，用啥去MDN官网查就行，比如等宽字体，带衬线字体,宋体... */
    /* 字体也可以自己上传 */
    color: blue;
    /* color就是字体颜色 */
}

pre {
    font-family: monospace;
}
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

六、背景

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.6背景style.css" type="text/css">

</head>
<body>
    <div class="mydiv">

    </div>

    <div class="mydiv1">

    </div>

    <!-- 小技巧：div*5 可以同时敲出五个并列的div -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <div class="mydiv2">

    </div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <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

2.css

/*
背景是说某一个标签的底色是什么 
 */

.mydiv {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    /* 通过backgound-color给背景设置背景颜色 */

    background-image: url(/static/images/mountain.jpg);
    background-image: linear-gradient(rgba(0, 0, 255, 0.5));
    /* 
    引入一个图片作为背景，背景图片比背景颜色优先级高，即背景图片的图层一定在背景颜色图层的上面
    也可以由渐变色替换图片
     */
    background-size: 50px 50px;
    background-size: 50% 50%;
    /*
    设置背景背景图片的大小，宽跟高度
    background-size 的cover选项可以让图占满div 
    */
    background-repeat: no-repeat;
    /* 
    设置背景图片要不要重复
    背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
    repeat-x只重复行
    repeat-y只重复列
    */

    background-position: 50px 10px;
    /* 
    背景图片偏移量：x向右，y向下 
    如果x,y有一维不写，这一维会默认居中
    background-position:50px 等价于background-position:50px center
    也可以写成rigth和left控制左右，top和bottom控制上下
    */
    background-position: right bottom;
}

.mydiv1 {

    /* 
    一张图里可以加很多图片，不一定只加一张图片 
    多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上
    */
    width: 200px;
    height: 200px;
    background-color: lightblue;
    background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);
    background-size: 100px 200px, 100px 200px;
    background-repeat: no-repeat;
    background-position: left top, 100px top;
}

div {
    height: 200px;
}

.mydiv2 {

    /* 
    一张图里可以加很多图片，不一定只加一张图片 
    多个图片也可以覆盖有优先级，定义越靠前的，图片越靠上
    */
    width: 200px;
    height: 200px;
    background-color: lightblue;
    background-image: url(/static/images/mountain.jpg), url(/static/images/logo.png);
    background-size: 100px 200px, 100px 200px;
    background-repeat: no-repeat;
    background-position: left top, 100px top;
    background-attachment: fixed;
    /*  scroll随着div一起滚 fixed位置固定，不随着div滚 */
    opacity: 0.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

七、边框

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.7边框style.css" type="text/css">
</head>
<body style="margin: 0;">
        <img src="/static/images/mountain.jpg" alt="">
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <div></div><br>
    </div>

    <table>
        <tbody>
            <!-- 快捷键：(tr>td*3)*3 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
           
        </tbody>
    </table>
   
</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

2.css

div {
    width: 100px;
    height: 100px;
    background-color: lightblue;

    border-style: solid dotted inset;
    /* 设置边框的样式：solid是实现，dotted是点 */
    /*注意css边界可以写四个方向： 
    可以按照上右下左的顺序来写的
    如果只写一个默认是四个方向都是同一个格式，
    如果写两项就是上下和左右
    (其实上是按照上下左右的顺序来写，没写的那一项就取对边值) 
    */

    border-width: 2px 4px 6px;
    /* 设置边框的粗细 */

    border-color: red green blue;
    /* 设置边框颜色 */

    border-radius: 5px 0 0 0;
    /*设置外边框的边角，很常用，5px表示边角半径的长度 */

}

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

td {
    border-style: solid;
    border-width: 3px;
    width: 20px;
    height: 20px;
}

table {
    border-style: solid;
    border-width: 3px;
    border-collapse: collapse;
    /* 把table元素的边框都重合到一块，separate 是分开*/
}
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

八、元素展示格式

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.8元素展现格式style.css" type="text/css">
</head>
<body style="margin: 0;">

    <!-- 
        display：展示格式
        一般的标签分为两大种，一种是div衍生过来的，一种是span衍生过来的，还有另一种这前两种结合
        (1)block：块状标签(元素) div
        独占一行
        width、height、margin(外边距)、padding(内边距)均可控制
        width默认100%。
        (2)inline：行内标签 span
        可以共占一行，除非占满一行才会换行
        width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
        width默认为本身内容宽度
        (3)inline-block：行内-块状标签 img
        可以共占一行
        width、height、margin、padding均可控制
        width默认为本身内容宽度
     -->
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <br>

    <span>第一个元素</span>
    <span>第二个元素</span>

    <img src="/static/images/mountain.jpg" alt="">
    <img src="/static/images/mountain.jpg" alt="">
    <img src="/static/images/mountain.jpg" alt="">

    <div class="mydiv">
        锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
    </div>

    <div class="mydiv1">
#include
using namespace std;
int main()
{
    int a,b;
    cin >> a >> b;
    cout << a + b ;
    return 0;
}    
    </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

2.css

div {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 10px;
    /* 外边距可以认为是距离周围其他元素的距离 */
    padding: 20px;
    /* 内边距可以认为是内部的元素距离边框的距离，可以改变整个元素的大小 */
}

span {
    background-color: lightblue;
    width: 500px;
    height: 200px;
    /* 发现上面的修改没有任何改变 */

    margin-top: 10px;
    padding-top: 10px;
    /* 发现上面的修改没有改变,水平方向的margin与padding有效，竖直方向的margin与padding无效*/

    margin-left: 10px;
    padding-left: 10px;


}

span {

    display: inline-block;
    /* 可以强制修改为别的类型标签,所以三类标签之间可以相互转化 */
    background-color: lightblue;
    width: 500px;
    height: 200px;

    margin-top: 10px;
    padding-top: 10px;


    margin-left: 10px;
    padding-left: 10px;


}

img {
    width: 50px;
    height: 100px;
}

.mydiv {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    white-space: nowrap;
    /* white-space处理元素中的空白和换行：
    nowrap就是不换行 */


    overflow-x: hidden;
    overflow-y: scroll;
    /* 滚轮，hidden是隐藏，scroll是出现，如果什么都不写默认是auto，同时控制直接可以用overflow*/
    text-overflow: ellipsis;
    /* 长度如果超出行宽的话，就用三个点代替 */
}

.mydiv1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    white-space: pre;
    /* 所以pre也是在div的基础上扩展出来的 */
}
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

九、内边距与外边距

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=S, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.9内边距与外边距.css" type="text/css">
</head>
<body style="margin: 0;">

    <!--
        content：内容区
        padding：内边距，内容区距离边框的距离
        border：边框
        margin：外边距，边框距离周围元素的距离
     -->

     <!-- 
        
      -->
    <div class="div-outer">
        <div class="div-inner"></div>
        <div class="div-inner-2"></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

2.css

/* 
1.外边距 margin：
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。
可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
    css边界可以写四个方向： 
    可以按照上右下左的顺序来写的
    如果只写一个默认是四个方向都是同一个格式，
    如果写两项就是上下和左右
    (其实上是按照上下左右的顺序来写，没写的那一项就取对边值) 
可取值：
①length：固定值
②percentage：相对于包含块的宽度，以百分比值为外边距。
③auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。auto可以实现水平居中，上下居中实现不了



*/

.div-outer {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    margin: 50px;

    /* 外边距的两种边界问题 */
    /* 
    边界问题1：
    父元素与后代元素：当父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。
    解决方法：
    子元素的margin-top连带影响父元素的上外边距解决方法
    ① 父元素加一个边框：border: 1px solid;
    ② 父元素加内边距：padding-top: 1px;
    ③ 父元素加上overflow属性 overflow: hidden;
    ④ 在父元素前面加一个空内容：.div-outer::before {content: “”;display: table;}
    */
}

.div-outer::before {
    content: "";
    display: table;
}


.div-inner {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 20px auto;
    /* auto可以实现水平居中，上下居中实现不了 */

    margin-bottom: 20px;
    margin-left: 20px;
}

.div-inner-2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    margin-top: 30px;
    margin-left: 30px;
    /* 
    边界问题2：
    发现两个元素的外边距上下发生了重叠，此时取外边距的最大值。
    这种外边距重叠的情况只出现在上下，左右外边距是不会出现外边距重叠的情况的
    解决方法：
    为了不出现这种歧义的情况，尽可能只定义元素下外边距就可以了，最好不要上下边距同时定义，同理左右边距也是这样
    */
}


/* 
2.内边距：padding
padding CSS 简写属性控制元素所有四条边的内边距区域。
可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
可取值：
①length：固定值
②percentage：相对于包含块的(即父级元素的)宽度，以百分比值为内边距。

注意：元素的大小是和内边距相关的，即元素的宽度和高度都会加上内边距
即 width=content+ padding +border
*/


.div-outer {

    padding-top: 20px;
    padding-left: 30px;
    padding: 20px 0 0 30px;
}
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

十、盒子模型

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.10盒子模型style.css" type="text/css">
</head>
<body style="margin: 0;">
    <div class="div-outer">
        <div class="div-inner">
            123
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.css

/* 
一个元素有以下边界属性：
content：内容区
padding：内边距，内容区距离边框的距离
border：边框
margin：外边距，边框距离周围元素的距离

元素是由：content+ padding +border 构成
内容是由：content 构成
*/

/* 
盒子模型：box-sizing
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
增加
content-box：是默认值，设置border和padding均会增加元素的宽高。
border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。
*/

.div-outer {
    width: 300px;
    height: 400px;
    background-color: lightblue;
    padding: 20px 0 0 30px;
}

.div-outer::before {
    content: "";
    display: table;
}

.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    box-sizing: border-box;
    padding: 20px 0 0 10%;
    border: 10px solid black;
}
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

十一、位置

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.11位置style.css" type="text/css">
</head>
<body style="margin: 0;">
    <div class="div-outer">
        <div class="div-inner-1">
            1
        </div>
        <div class="div-inner-2">
            2
        </div>
        <div class="div-inner-3">
            3
        </div>
        <div class="div-inner-4">
            回到顶部
        </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

2.css

/* 
position:指定一个元素在文档中的定位方式(右四种定位类型，五种取值)
(1)static:默认定位，如果不设置的话，默认为static类型，即位置是从上往下一行一行正常摆
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
(2)relative:相对定位，相对于初始位置(static位置下)可以做上下左右四个方向的偏移
(3)absolute:绝对定位，相对于上一个非static类型的块元素定位，固定在文档的某一个位置上，所以元素的位置在屏幕滚动时会随之改变
(4)fixed:绝对定位，又叫固定定位(窗口定位)相对于上一个非static类型的块元素定位，固定在屏幕视窗上，跟文档是脱离的，所以元素的位置在屏幕滚动时不会改变
(5)sticky:粘性定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先进行偏移，不偏移的话跟static是一样的
*/
.div-outer {
    width: 300px;
    height: 3000px;
    background-color: lightblue;
    padding: 20px 0 0 30px;
}

.div-outer::before {
    content: "";
    display: table;
}

.div-inner-1 {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;
    margin: 10px;
    display: inline-block;
}

.div-inner-2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    color: white;
    margin: 10px;
    display: inline-block;
    position: relative;
    top: 30px;
    left: -100px;
}

.div-inner-3 {
    width: 100px;
    height: 100px;
    background-color: yellow;
    color: white;
    margin: 10px;
    display: inline-block;
    position: absolute;
    top: 100px;
    left: 20px;
}

.div-inner-4 {
    width: 30px;
    height: 100px;
    background-color: lightcoral;
    color: white;
    margin: 10px;
    display: inline-block;
    position: fixed;
    top: 200px;
    right: 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
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

十二、浮动

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.12浮动style.css" type="text/css">

</head>
<body style="margin: 0;">
    <div class="div-outer">
        <div class="div-inner-1">
            1
        </div>
        <div class="div-inner-2">
            2
        </div>
        <div class="div-inner-3">
            3
        </div>
        <div class="div-inner-4">
            
        </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

2.css

/* 
浮动：就是让某一块浮起来
浮动的元素，不再占用空间，会脱离普通文档流层，且浮动元素的层级要高于普通元素
(1)应用：如果想让不同的div放在同一行时，并且中间不想有空隙时，
可以设置改变其与元素展现格式display:inline-block，但这种中间还是会有间距空隙
可以直接设置float属性，float：left是左浮动，就是左对齐
(2)注意：
clear:清除浮动的影响
left：清除左侧浮动。
right：清除右侧浮动。
both：清除左右两侧浮动

理解：网页布局是分层的，分三层
1.最底层：普通文档流
不加float时，默认为普通文档流,即一个网页body
普通文档流中是分块级和内联的。
2.中间层：浮动层
元素浮动，设置float以后会提升到浮动层
所有浮动层的元素默认横向排列
浮动层中不分块级和内联，都可以定义宽高，都是横向排列。
3.最高层：定位层
设置postiton后就在定位层了

什么时候要清除浮动？
1.子级浮动，父级一定要清除浮动
2.有时，你可能想要强制元素移至任何浮动元素下方。
比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。

如何清除浮动？
1.overflow:hidden
2.clear:both
*/
.div-outer {
    width: 100%;
    height: 3000px;
    background-color: lightblue;

}

.div-outer::before {
    content: "";
    display: table;
}

.div-inner-1 {
    width: 100px;
    height: 100px;
    background-color: darkred;
    color: white;

    float: left;

}

.div-inner-2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    color: white;

    float: left;
}

.div-inner-3 {
    width: 100px;
    height: 100px;
    background-color: yellow;
    color: white;

    float: left;

}

.div-inner-4 {
    width: 300px;
    height: 300px;
    background-color: black;
    position: relative;
    z-index: 3;
    clear: both;

}
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

十三、flex布局

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/2.13flex布局style.css" type="text/css">
</head>
<body>
    <div class="div-flex">
        <!-- 快捷键：.div-flex-item*10 -->
        <div class="div-flex-item">1</div>
        <div class="div-flex-item">2</div>
        <div class="div-flex-item">3</div>
        <div class="div-flex-item">4</div>
        <div class="div-flex-item">5</div>
        <div class="div-flex-item">6</div>
        <div class="div-flex-item">7</div>
        <div class="div-flex-item">8</div>
        <div class="div-flex-item">9</div>
        <div class="div-flex-item">10</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

2.css

/* flex是弹性盒子
作用：让我们更好的布局页面中的各个模块的,可以让我们更好的控制块的摆放方式 
优势：可以更方便的实现元素水平居中和竖直居中
水平居中实现方式：
(1)可以把margin设置左右方向设置设置成auto
margin-left:auto;
margin-right:auto;
(2)
display:flex;
justify-content: center;
竖直居中实现方式：
(1)
position:relative
top:50%
transform:translateY(-50%)
(2)
display:flex;
align-items: center;
*/
.div-flex {
    width: 50%;
    height: 500px;
    background-color: lightgray;
    display: flex;
    /* 1.设置flex的方式，只需要在父元素上把display改成flex即可 */

    /* 
    2.设置flex的摆放顺序的：
    (1)flex-direction
    (2)flex-wrap
    (3)flex-flow
     */

    flex-direction: row-reverse;
    /* 
    row：按行摆，从左往右摆，不加默认也是row
    row-reverse：从右往左摆
    column：按列摆，从上往下摆
    column-reverse：从下往上摆
    把页面变窄，所有的模块会有一个压缩效果
    */


    flex-wrap: wrap;
    /* 
    wrap是包裹的意思，即换行，定 flex 元素单行显示还是多行显示
    默认值为nowrap
    */


    flex-flow: row-reverse wrap;
    /* flex-flow 属性是 flex-direction 和 flex-wrap 的结合起来一起写。默认值为：row nowrap*/



    /* 
    3.设置flex元素对齐方式的：
    flex布局有两个轴，行从左往右为弹性容器主轴(或者网格行轴) ，列从上往下为交叉轴(列轴)
    这个对齐是跟flex-direction是有关系的，会相互影响
    (1)justify-content：主轴对齐方式
    列轴上的对齐 
    (2)align-items：将所有行在交叉轴上对齐
    (3)align-content：与items类似，区别主要有两点
    */
    justify-content: flex-end;

    /*
    flex-start 默认左对齐
    flex-end：右对齐
    center:每一行居中
    space-between：左右两段对齐，每一行左右两端对齐，中间均匀分布
    space-around：两端的距离等于中间的一般
    space-evenly：两端的距离跟中间一样，即把所有的空隙均匀分布
    */


    align-items: flex-end;
    /*
    flex-start 默认上对齐，从上往下
    flex-end：下对齐
    center:每一行居中 
    stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度
     */


    align-content: flex-end;
    /* 
    与aligin-items的区别：
    ①多行时，行与行之间没有距离
    ②单行时，会顶行，竖直不会居中
    */
}

/* 
之前是定义在flex的父元素上，现在定义在每个flex元素的内部
*/

.div-flex-item {
    width: 100px;
    height: 100px;
}

.div-flex-item:nth-child(odd) {
    background-color: lightpink;
    order: 1;
    /* 定义flex项目的顺序，值越小越靠前 */
    flex-flow: 3;
    /* 放大：设置 flex 项主尺寸 的 flex 增长系数 */
    flex-shrink: 3;
    /* 缩小 */
    flex-basis: 10%;
    /* 设置flex元素的宽度，比初始宽度优先级大 */
    flex: auto;
    /* 
    flex-grow、flow-shrink、flex-basis的缩写。 
    auto：flex: 1 1 auto
    none：flex: 0 0 auto
    */

}

.div-flex-item:nth-child(even) {
    background-color: lightgreen;
    order: 2;

    flex-grow: 1;
    flex-shrink: 1;
}
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

相关阅读:
golang爬虫练习-抓取行业信息分类
 代码随想录算法训练营第五十七天| 392.判断子序列 115.不同的子序列
 开发工具记录
 Verilog中 generate语句的用法
 如何全面升级spring-boot-2.x及Spring-security-oauth2
【python】time
CommonsCollection6反序列化链学习
 Python 算法：感受算法的小小魅力和复杂度的计算
 Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务
 系列四、Java8的Lambda表达式
原文地址：https://blog.csdn.net/qq_46009744/article/details/125368887