Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

css

e 6 months ago
parent
f406c2ec2e
commit
b54a755a7f
3 changed files with 48 additions and 2 deletions
Split View Show Diff Stats
  1. 6 2
      day3/1.选择器.html
  2. 11 0
      day3/2.选择器的优先级.html
  3. 31 0
      day3/3.盒模型.html

+ 6 - 2
day3/1.选择器.html
View File 

@@ -108,7 +108,7 @@
 
          #new h1 + h3 {
 
             color: plum;
 
          } */
 
-      /* 9.~ 兄弟选择器 修改的是后一个选择器的样子 */
 
+      /* 9.~ 兄弟选择器 修改的是 后一个选择器的样子 */
 
       #new h1 ~ h2 {
 
         color: red;
 
       }
 
@@ -120,7 +120,11 @@
 
       }
 
       /* 10.* 通配符选择器 匹配全局 */
 
       * {
 
-        font-size: 40px;
 
+        font-size: 20px;
 
+      }
 
+      /* 11. 群组选择器用逗号连接*/
 
+      #new h3,h4,h6 {
 
+        color: palegreen;
 
       }
 
     </style>
 
   </head>

+ 11 - 0
day3/2.选择器的优先级.html
View File 

@@ -0,0 +1,11 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    
+</body>
 
+</html>

+ 31 - 0
day3/3.盒模型.html
View File 

@@ -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>
 
+        div {
 
+            width: 220px;
 
+            height: 220px;
 
+            background: #00f;
 
+            border: 3px solid #0f0;
 
+            padding: 20px;
 
+            margin: 10px;
 
+            box-sizing: content-box;
 
+        }
 
+        /* 
+            盒模型：
 
+                标准盒模型:
 
+                     box-sizing:content-box
 
+                    宽度 = 内容宽度 + 边框 + 内边距
 
+                怪异盒模型(IE盒模型)：
 
+                     box-sizing：border-box
 
+                    宽度 = 内容宽度（弹性的witdh +  边框 + 内边距 ）
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+</body>
 
+</html>