From 268cc9bb009f2df7bf242050df3592504e539967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E8=94=9A=E4=B8=9C?=
 <14091797+cpgh@user.noreply.gitee.com>
Date: Sun, 20 Oct 2024 21:43:55 +0800
Subject: [PATCH] 1017

---
 .../1017\344\275\234\344\270\232.html"        | 120 ++++++++++++++++++
 ...00\346\254\241\347\254\224\350\256\260.md" |  20 +++
 2 files changed, 140 insertions(+)
 create mode 100644 "\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1017\344\275\234\344\270\232.html"
 create mode 100644 "\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1017\347\254\254\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md"
diff --git "a/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1017\344\275\234\344\270\232.html" "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1017\344\275\234\344\270\232.html"
new file mode 100644
index 0000000..0e54eac
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\344\275\234\344\270\232/1017\344\275\234\344\270\232.html"
@@ -0,0 +1,120 @@
+<!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>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    .header{
+    
+    width: 970px;
+    height: 111px;
+    margin: 0 auto;
+    }
+    .logo{
+    height: 103px;
+    width: 277px;
+    background-color: red;
+    float: left;
+    }
+    .lc{
+    width: 137px;
+    height: 49px;
+    background-color: green;
+    margin-bottom: 8px;
+    float: right;
+    }
+    .nav{
+    width: 679px;
+    height: 46px;
+    margin-bottom: 8px;
+    background-color: green;
+    float: right;
+    }
+    .content{
+    width: 970px;
+    height: 435px;
+    margin: 0 auto;
+    }
+    .ad{
+    float: left;
+    height: 435px;
+    width: 310px;
+    background-color: rgb(255,215,0);
+    }
+    .conright{
+    float: right;
+    height: 435px;
+    width: 650px;
+    }
+    .cr1{
+    height: 240px;
+    width: 450px;
+    float: left;
+    background-color: rgb(135,207,235);
+    margin-bottom: 10px;
+    }
+    
+    .cr2{
+    height: 400px;
+    width: 190px;
+    float: right;
+    background-color: rgb(128,0,128);
+    margin-bottom: 10px;
+    
+    }
+    .cr3{
+    height: 110px;
+    width: 450px;
+    float: left;
+    background-color: rgb(135,207,235);
+    margin-bottom: 10px;
+    }
+    .cr4{
+    height: 30px;
+    width: 450px;
+    float: left;
+    background-color: rgb(135,207,235);
+    }
+    .cr5{
+    height: 25px;
+    width: 650px; 
+    background-color: rgb(27,0,255);
+    float: left;
+    }
+    .bottom{
+    height: 35px;
+    width: 970px;
+    background-color: rgb(218,165,32);
+    margin: 0 auto;
+    margin-top: 10px;
+    }
+    
+    </style>
+    <body>
+    <div class="header">
+    <div class="logo">logo</div>
+    <div class="lc">语言选择</div>
+    <div class="nav">导航条</div>
+    </div>
+    
+    
+    <div class="content">
+    <div class="ad">大广告</div>        
+    <div class="conright">
+    <div class="cr1"></div>
+    <div class="cr2"></div>
+    <div class="cr3"></div>
+    <div class="cr4"></div>  
+    <div class="cr5"></div>
+    </div><!-- conright end -->
+    </div><!-- content end -->
+    
+    <div class="bottom"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1017\347\254\254\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md" "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1017\347\254\254\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..3dbb68c
--- /dev/null
+++ "b/\346\235\250\350\224\232\344\270\234/\347\254\224\350\256\260/1017\347\254\254\345\215\201\344\270\200\346\254\241\347\254\224\350\256\260.md"
@@ -0,0 +1,20 @@
+## 浮动
+### 行内元素
+### 与其他行内元素并排；
+### 不能设置宽、高。默认的宽度，就是文字的宽度。
+### 块级元素
+### 霸占一行，不能与其他任何元素并列；
+### 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+### 注意：
+### 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
+### 块级元素：所有的容器级标签都是块级元素，还有p标签。
+### 行内元素和块级元素的相互转换
+### 语法：display: inline;
+### 那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+### 此时这个div不能设置宽度、高度；
+### 此时这个div可以和别人并排了。
+### 行内元素转换为块级元素：
+### 语法:display:block;
+### 此时这个span能够设置宽度、高度
+### 此时这个span必须霸占一行了，别人无法和他并排
+### 如果不设置宽度，将撑满父亲
\ No newline at end of file
-- 
Gitee

