首頁 探索 說明
登入
lovecoding
/
Web1020
10
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

css

e 6 月之前
父節點
b54a755a7f
當前提交
6020335771
共有 4 個文件被更改，包括 238 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 45 0
      day3/4.padding-margin.html
  2. 71 0
      day3/5.浮动.html
  3. 79 0
      day3/6.解决浮动问题.html
  4. 43 0
      day3/7.轮廓.html

+ 45 - 0
day3/4.padding-margin.html
查看文件 

@@ -0,0 +1,45 @@
 
+<!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: 300px;
 
+            height: 300px;
 
+            /* padding: 30px 50px 80px 120px; */
 
+            /* padding-top: 80px; */
 
+            margin: 20px 50px;
 
+            border:2px solid #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        内边距：padding 
+        内容距离边框之间的距离
 
+        一个值 上下左右
 
+        两个值 上下  左右
 
+        三个值 上 左右 下
 
+        四个值 上 右 下 左
 
+        上 padding-top
 
+        下 padding-bottom
 
+        左 padding-left
 
+        右 padding-right
 
+        外边距：margin
 
+        边框外部的距离
 
+        一个值 上下左右
 
+        两个值 上下  左右
 
+        三个值 上 左右 下
 
+        四个值 上 右 下 左
 
+        上 margin-top
 
+        下 margin-bottom
 
+        左 margin-left
 
+        右 margin-right
 
+    -->
 
+    <div>
 
+        你好你好你好
 
+    </div>
 
+</body>
 
+</html>

+ 71 - 0
day3/5.浮动.html
查看文件 

@@ -0,0 +1,71 @@
 
+<!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>
 
+      #part1 {
 
+        float: left;
 
+        /* display: inline-block; */
 
+        
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: red;
 
+      }
 
+      #part2 {
 
+        float: left;
 
+        /* display: inline-block; */
 
+        
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: yellow;
 
+      }
 
+      #part3 {
 
+        float: left;
 
+        /* display: inline-block; */
 
+        
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: blue;
 
+      }
 
+      #part4 {
 
+        float: left;
 
+        /* display: inline-block; */
 
+        
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: pink;
 
+      }
 
+      #part5 {
 
+        float: left;
 
+        /* display: inline-block; */
 
+        
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: purple;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <!-- 
+        想让元素在一行展示 
+        浮动：float
 
+        left right none
 
+        会使元素脱离文档流 不占位
 
+        问题：导致父元素高度塌陷
 
+    -->
 
+    <div class="box">
 
+      <div id="part1"></div>
 
+      <div id="part2"></div>
 
+      <div id="part3"></div>
 
+      <div id="part4"></div>
 
+      <div id="part5"></div>
 
+    </div>
 
+  </body>
 
+</html>

+ 79 - 0
day3/6.解决浮动问题.html
查看文件 

@@ -0,0 +1,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>
 
+      #part1 {
 
+        float: left;
 
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: red;
 
+      }
 
+      #part2 {
 
+        float: left;
 
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: yellow;
 
+      }
 
+      #part3 {
 
+        float: left;
 
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: blue;
 
+      }
 
+      #part4 {
 
+        float: left;
 
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: pink;
 
+      }
 
+      #part5 {
 
+        float: left;
 
+        width: 200px;
 
+        height: 200px;
 
+        margin-top: 10px;
 
+        background: purple;
 
+      }
 
+      /* .box {
 
+        overflow: auto;
 
+      } */
 
+       /* .aa {
 
+        clear: left;
 
+       } */
 
+        #clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <!-- 
+        1.溢出隐藏法：
 
+            在浮动的父级盒子上添加overflow：hidden|auto属性
 
+        2.额外标签法：
 
+            在浮动同级添加空盒子  给该盒子添加样式：clear:both |left |right |none
 
+        3.伪元素清浮动
 
+         #clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        将其添加到高度塌陷的父级盒子上
 
+    -->
 
+    <div class="box" id="clearfix">
 
+      <div id="part1"></div>
 
+      <div id="part2"></div>
 
+      <div id="part3"></div>
 
+      <div id="part4"></div>
 
+      <div id="part5"></div>
 
+      <!-- <div class="aa"></div> -->
 
+    </div>
 
+  </body>
 
+</html>

+ 43 - 0
day3/7.轮廓.html
查看文件 

@@ -0,0 +1,43 @@
 
+<!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>
 
+        input {
 
+            /* border:none; */
 
+            outline: none;
 
+            outline: 3px solid red;
 
+            outline-width: 1px;
 
+            outline-style: dashed;
 
+            outline-color: aqua;
 
+        }
 
+        .aa {
 
+            width: 700px;
 
+            height: 700px;
 
+            background: #ff0;
 
+            margin: 0 auto;
 
+        }
 
+        .one {
 
+            width: 200px;
 
+            height: 200px;
 
+            /* 已知宽高的盒子在它的 父级内居中 */
 
+            background: red;
 
+            margin: 0 auto;
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        轮廓：outline
 
+        border 边框
 
+    -->
 
+        <div class="aa">
 
+            
+        <div class="one"></div>
 
+        </div>
 
+    <!-- <input type="text"> -->
 
+</body>
 
+</html>