Почетна Преглед Помоћ
Пријавите се
lovecoding
/
W260426
10
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

admin

fengchuanyu пре 1 недеља
родитељ
0ab85d7650
комит
bd6fb23d9c
2 измењених фајлова са 54 додато и 0 уклоњено
Подељен поглед Покажи статистику Diff
  1. 31 0
      2_CSS/34_vw_vh.html
  2. 23 0
      2_CSS/35_calc.html

+ 31 - 0
2_CSS/34_vw_vh.html
Прегледај датотеку 

@@ -0,0 +1,31 @@
 
+<!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>
 
+        /* css reset 重置样式 */
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box{
 
+            /* width: 100%; */
 
+            height: 200px;
 
+
 
+            /* vw vh 单位 */
 
+            /* vw viewport width 取值1-100 表示视口宽度的1% 1vw = 1% */
 
+            width:100vw;
 
+            /* vh viewport height 取值1-100 表示视口高度的1%  1vh = 1% */
 
+            height: 100vh;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        
+    </div>
 
+</body>
 
+</html>

+ 23 - 0
2_CSS/35_calc.html
Прегледај датотеку 

@@ -0,0 +1,23 @@
 
+<!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>
 
+        .box{
 
+            height: 200px;
 
+            background-color: red;
 
+            /* 屏幕尺寸 - 375px */
 
+            /* calc 函数 可以进行简单的数学计算 */
 
+            /* calc(表达式) 表达式可以是加减乘除等 不限制单位 运算符左右必须有空格 */
 
+            width: calc(100vw - 375px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        
+    </div>
 
+</body>
 
+</html>