樂
喜
安
平

HTML5-14

1.弹性盒子回顾

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹性盒子回顾</title>
 6         <style type="text/css">
 7             #con{
 8                 border: 1px solid blue;
 9                 /* 将容器设为弹性盒子 */
10                 display: flex;
11                 /* 盒子内部元素允许换行 */
12                 flex-wrap: wrap;
13                 /* 水平居中 */
14                 justify-content: center;
15                 /* 设置高度 */
16                 height: 700px;
17                 /* 垂直居中,每一行平均分配 */
18                 /* align-items: center; */
19                 /* 垂直居中,将容器内所有元素视为一个整体,垂直居中 */
20                 align-content: center;
21             }
22             .s{
23                 width: 200px;
24                 height: 200px;
25                 background-color: yellow;
26                 border: 1px solid aqua;
27             }
28         </style>
29     </head>
30     <body>
31         <!-- 容器 -->
32         <div id="con">
33             <div class="s">
34                 
35             </div>
36             <div class="s">
37                 
38             </div>
39             <div class="s">
40                 
41             </div>
42             <div class="s">
43                 
44             </div>
45             <div class="s">
46                 
47             </div>
48             <div class="s">
49                 
50             </div>
51             <div class="s">
52                 
53             </div>
54             <div class="s">
55                 
56             </div>
57         </div>
58     </body>
59 </html>

2.弹性布局中的flex样式-按比例分割

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹性盒子中的flex样式-按比例分割</title>
 6         <style type="text/css">
 7             #con{
 8                 border: 1px solid blue;
 9                 /* 将容器设为弹性盒子 */
10                 display: flex;
11                 /* 盒子内部元素允许换行 */
12                 height: 500px;
13                 width: 700px;
14             }
15             .s{
16                 background-color: yellow;
17                 border: 1px solid aqua;
18                 /* flex样式作用之一:按比例分割容器面积 */
19                 /* 容器中的三个div的宽度各占容器宽度的三分之一 */
20                 /* 此时三个div的面积比例为1:1:1 */
21                 /* flex: 1; */
22             }
23             /* 此时三个div各占容器面积比例为1:2:3 */
24             #div1{
25                 flex: 1;
26             }
27             #div2{
28                 flex: 2;
29             }
30             #div3{
31                 flex: 3;
32             }
33         </style>
34     </head>
35     <body>
36         <!-- 容器 -->
37         <div id="con">
38             <div id="div1" class="s">
39                 
40             </div>
41             <div id="div2" class="s">
42                 
43             </div>
44             <div id="div3" class="s">
45                 
46             </div>
47         </div>
48     </body>
49 </html>

3.弹性布局中的flex样式-混合分割

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>弹性盒子中的flex样式-混合分割</title>
 6         <style type="text/css">
 7             #con{
 8                 border: 1px solid blue;
 9                 /* 将容器设为弹性盒子 */
10                 display: flex;
11                 /* 盒子内部元素允许换行 */
12                 height: 500px;
13                 width: 1000px;
14             }
15             .s{
16                 background-color: yellow;
17                 border: 1px solid aqua;
18                 /* flex样式作用之一:按比例分割容器面积 */
19                 /* 容器中的三个div的宽度各占容器宽度的三分之一 */
20                 /* 此时三个div的面积比例为1:1:1 */
21                 /* flex: 1; */
22             }
23             /* 此时div1宽度为500px,div2与div3比例为1:1 */
24             #div1{
25                 width: 500px;
26             }
27             #div2{
28                 flex: 1;
29             }
30             #div3{
31                 flex: 1;
32             }
33         </style>
34     </head>
35     <body>
36         <!-- 容器 -->
37         <div id="con">
38             <div id="div1" class="s">
39                 div1
40             </div>
41             <div id="div2" class="s">
42                 div2
43             </div>
44             <div id="div3" class="s">
45                 div3
46             </div>
47         </div>
48     </body>
49 </html>

4.改变弹性布局的方向

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>改变弹性布局的方向</title>
 6         <style type="text/css">
 7             #con{
 8                 width: 900px;
 9                 height: 700px;
10                 border: 1px solid blue;
11                 /* 将容器设为弹性盒子 */
12                 display: flex;
13                 /* 盒子内部元素允许换行 */
14                 /* flex-wrap: wrap; */
15                 /* 改变布局方向 */
16                 flex-direction: column;
17                 /* 原水平居中变为垂直居中 */
18                 justify-content: center;
19                 /* 原垂直居中变为水平居中 */
20                 align-items: center;
21             }
22             .s{
23                 width: 200px;
24                 height: 200px;
25                 background-color: yellow;
26                 border: 1px solid aqua;
27             }
28         </style>
29     </head>
30     <body>
31         <!-- 容器 -->
32         <div id="con">
33             <!-- <div class="s">
34                 
35             </div>
36             <div class="s">
37                 
38             </div>
39             <div class="s">
40                 
41             </div>
42             <div class="s">
43                 
44             </div>
45             <div class="s">
46                 
47             </div> -->
48             <div class="s">
49                 
50             </div>
51             <div class="s">
52                 
53             </div>
54             <div class="s">
55                 
56             </div>
57         </div>
58     </body>
59 </html>

5.视口尺寸相关

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>视口尺寸</title>
 6         <style type="text/css">
 7             #con{
 8                 /* 屏幕宽度的百分比 */
 9                 width: 5.2vw;
10                 height: 5.2vw;
11                 /* 屏幕高度的百分比(使用较少) */
12                 background-color: aqua;
13             }
14         </style>
15     </head>
16     <body>
17         <div id="con">
18             
19         </div>
20     </body>
21 </html>

 

posted @ 2021-07-09 20:34  喵酱爱吃鱼  阅读(39)  评论(0)  编辑  收藏  举报