From 171d31c1ffcd7422e9a630f3bb21693337be79b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com>
Date: Mon, 14 Oct 2024 19:36:25 +0800
Subject: [PATCH 1/3] =?UTF-8?q?20241014=E4=BC=AA=E7=B1=BB=E7=AC=94?=
 =?UTF-8?q?=E8=AE=B0=E5=92=8C=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...24\350\256\260\347\273\203\344\271\240.md" | 281 ++++++++++++++++++
 1 file changed, 281 insertions(+)
 create mode 100644 "\346\235\216\346\200\235/20241014-\344\274\252\347\261\273\347\254\224\350\256\260\347\273\203\344\271\240.md"
diff --git "a/\346\235\216\346\200\235/20241014-\344\274\252\347\261\273\347\254\224\350\256\260\347\273\203\344\271\240.md" "b/\346\235\216\346\200\235/20241014-\344\274\252\347\261\273\347\254\224\350\256\260\347\273\203\344\271\240.md"
new file mode 100644
index 00000000..08d770f2
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241014-\344\274\252\347\261\273\347\254\224\350\256\260\347\273\203\344\271\240.md"
@@ -0,0 +1,281 @@
+## 伪类
+
+
+伪类：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。
+
+
+### 静态伪类选择器、动态伪类选择器
+
+
+伪类选择器分为两种。
+
+（1）静态伪类：只能用于超链接的样式。如下：
+
+ :link 超链接点击之前
+ :visited 链接被访问过之后
+
+  以上两种样式，只能用于超链接。
+
+（2）动态伪类：针对所有标签都适用的样式。如下：
+
+ :hover 悬停：鼠标放到标签上的时候
+ :active	激活： 鼠标点击标签，但是不松手时。
+ :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+### 超链接a标签
+
+#### 超链接的四种状态
+
+
+a标签有4种伪类（即对应四种状态），如下：
+
+ :link  	链接：超链接点击之前
+ :visited 访问过的：链接被访问过之后
+ :hover	悬停：鼠标放到标签上的时候
+ :active	激活： 鼠标点击标签，但是不松手时。
+
+
+对应的代码如下：
+
+```
+<style type="text/css">
+	/*让超链接点击之前是红色*/
+	a:link{
+		color:red;
+	}
+
+	/*让超链接点击之后是绿色*/
+	a:visited{
+		color:orange;
+	}
+
+	/*鼠标悬停，放到标签上的时候*/
+	a:hover{
+		color:green;
+	}
+
+	/*鼠标点击链接，但是不松手的时候*/
+	a:active{
+		color:black;
+	}
+</style>
+```
+
+在css中，这四种状态必须按照固定的顺序写：
+
+ a:link 、a:visited 、a:hover 、a:active
+
+如果不按照顺序，那么将失效。
+
+
+#### 超链接的美化
+
+a{}和a:link{}的区别：
+
+  a{}定义的样式针对所有的超链接(包括锚点)
+  a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)
+
+ 一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
+
+ 两个伪类的属性，可以用逗号隔开
+
+
+ ### 动态伪类举例
+
+ :hover 悬停：鼠标放到标签上的时候
+ :active 激活： 鼠标点击标签，但是不松手时。
+ :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+
+
+
+其他常见伪类：
+
+first-child：用于选择其父元素的第一个子元素。
+lang：用于选择指定语言的元素。
+where()：接受选择器列表作为参数，选择能被列表中任何一条规则选中的元素。
+is()：与:where()类似，但优先级由传入的选择器决定。
+has()：根据元素的后代或相邻元素的状态来选择元素
+
+
+
+## 练习
+
+请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>标签的字体变为粗体， 并且<aside>类中的<h3>标签的字体变为斜体。
+
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/1.png)
+```
+<style>
+        .main section h1,
+        .main article h2{
+            font-weight: bold;
+        }
+        .aside h3{
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="main">
+        <section id="intro">
+          <h1>Welcome</h1>
+          <p>This is the introduction section.</p>
+        </section>
+        <article class="post">
+          <h2>Post Title</h2>
+          <p>Post content...</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </article>
+        <aside class="sidebar">
+          <h3>Sidebar Title</h3>
+          <p>Sidebar content...</p>
+        </aside>
+      </div>
+      
+</body>
+```
+
+请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/2.png)
+```
+<style>
+        input[required]:focus{
+            border-color: blue;
+            outline: none;
+        }
+        input[placeholder]::-webkit-input-placeholder{
+            color: gray;
+        }
+    </style>
+</head>
+<body>
+    <form>
+        <input type="text" name="username" required placeholder="Username">
+        <input type="email" name="email" required placeholder="Email">
+        <input type="submit" value="Submit">
+      </form>
+      
+</body>
+```
+
+请写出CSS规则，使得导航栏中当前激活的链接（class="active"）的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/3.png)
+```
+<style>
+        .main section h1,
+        .main article h2{
+            font-weight: bold;
+        }
+        .sidebar h3{
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="main">
+        <section id="intro">
+          <h1>Welcome</h1>
+          <p>This is the introduction section.</p>
+        </section>
+        <article class="post">
+          <h2>Post Title</h2>
+          <p>Post content...</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </article>
+        <aside class="sidebar">
+          <h3>Sidebar Title</h3>
+          <p>Sidebar content...</p>
+        </aside>
+      </div>
+      
+</body>
+```
+
+
+请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/4.png)
+```
+<style>
+        h2.special-title::first-letter {  
+            font-size: 2em; 
+            float: left;    
+            color: gold;     
+            background-color: transparent; 
+        }
+    </style>
+</head>
+<body>
+    <h2 class="special-title">Special Title</h2>
+</body>
+```
+
+
+请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/5.png)
+```
+<style>
+        .list > li > ul:first-child{
+            background-color: lightgray;
+        }
+        .list > li:hover * {
+            color: darkblue;
+        }
+    </style>
+</head>
+<body>
+    
+            <ul class="list">
+                <li>Item 1
+                  <ul>
+                    <li>Subitem 1</li>
+                    <li>Subitem 2</li>
+                  </ul>
+                </li>
+                <li>Item 2
+                  <ul>
+                    <li>Subitem 3</li>
+                    <li>Subitem 4</li>
+                  </ul>
+                </li>
+              </ul>
+              
+</body>
+```
+
+
+请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签<label>在悬停时背景色变为浅蓝色。
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-14%20192609.png)
+```
+<style>
+        
+        .container form input[type="text"]:focus,
+        .container form input[type="password"]:focus{
+            border-color: green;
+            outline: none;
+        }
+        .container form label:hover {  
+        background-color: lightblue; 
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <form>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name">
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password">
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+      
+</body>
+```
\ No newline at end of file
-- 
Gitee


From bbe48d0c6328c0dcc4691edc5f7ea8ffd45c2f69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com>
Date: Wed, 16 Oct 2024 18:39:07 +0800
Subject: [PATCH 2/3] =?UTF-8?q?1016css=E6=A0=B7=E5=BC=8F=E7=BB=A7=E6=89=BF?=
 =?UTF-8?q?=E5=92=8C=E5=B1=82=E5=8F=A0=E7=AC=94=E8=AE=B0=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...60\345\222\214\347\273\203\344\271\240.md" | 429 ++++++++++++++++++
 1 file changed, 429 insertions(+)
 create mode 100644 "\346\235\216\346\200\235/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"

diff --git "a/\346\235\216\346\200\235/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md" "b/\346\235\216\346\200\235/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"
new file mode 100644
index 00000000..7e44ced7
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241016-CSS\346\240\267\345\274\217\350\241\250\347\232\204\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247\347\254\224\350\256\260\345\222\214\347\273\203\344\271\240.md"
@@ -0,0 +1,429 @@
+
+## css的继承性
+
+有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
+
+继承性是从自己开始，直到最小的元素。
+
+- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+
+- 关于盒子、定位、布局的属性，都不能继承。
+
+
+## CSS的层叠性
+
+### 层叠性：计算权重
+
+层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题
+
+当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
+
+-  id 选择器
+-  类选择器、属性选择器、伪类选择器
+-  标签选择器、伪元素选择器
+
+因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
+
+如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
+
+ 1. 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+ 2. 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+ 1. 对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：**定义**的CSS样式表中，谁最近，就用谁。
+ 2. 对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+#### !important标记
+
+!important标记优先级最高
+
+mportant是英语里面的 重要的 的意思。我们可以通过如下语法：
+
+```
+k:v !important;
+```
+
+来给一个属性提高权重。这个属性的权重就是无穷大。
+
+1. !important提升的是一个属性，而不是一个选择器
+2. !important无法提升继承的权重，该是0还是0
+3. !important不影响就近原则
+
+
+
+
+## 盒子模型
+
+盒子模型，英文即box model。无论是div、span、还是a都是盒子。
+
+### 盒子中的区域
+
+一个盒子中主要的属性就5个：width、height、padding、border、margin。
+
+ width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+ padding：内边距。
+ border：边框。
+ margin：外边距。
+
+
+#### 标准盒模型和IE盒模型
+
+CSS盒模型和IE盒模型的区别：
+
+- 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+- IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
+
+
+
+**body 标签也有margin**
+
+### padding有四个方向
+
+padding是4个方向的，所以我们能够分别描述4个方向的padding。
+
+方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
+
+小属性的写法：
+
+```css
+	padding-top: 30px;
+	padding-right: 20px;
+	padding-bottom: 40px;
+	padding-left: 100px;
+```
+
+综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
+
+```css
+padding:30px 20px 40px 100px;
+```
+
+如果写了四个值，则顺序为：上、右、下、左。
+
+如果只写了三个值，则顺序为：上、右和左、下。
+
+如果只写了两个值，则顺序为：上和下、左和右。
+
+一些元素，默认带有`padding`，比如ul标签。
+
+#### border
+
+border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
+
+比较稳定的border-style就几个：solid、dashed、dotted。
+
+**border拆分**
+
+border属性是能够被拆开的，有两大种拆开的方式：
+
+- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
+
+- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
+
+
+## 练习
+
+题1，文字“中华人民共和国”是何种颜色？
+
+ 蓝色
+
+```
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>蓝色</title>
+    <style>
+        #box1 .para1 p{
+            color:red;
+        }
+        div div #box3 p{
+            color: blue;
+        }
+        div.para1 div.para2 div.para3 p{
+            color: green;
+        }
+    </style>
+</head>
+<body>
+    <div id="box1" class="para1">
+        <div id="box2" class="para2">
+            <div id="box3" class="para3">
+                <p>中华人民共和国</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
+```
+题2，文字“中华人民共和国”是何种颜色？
+
+红色
+```
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>红色</title>
+    <style>
+        div p {
+            color: red;
+        }
+
+        #box {
+            color: blue;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="box">
+        <p id="para" class="spec">
+            <span>
+                中华人民共和国
+            </span>
+        </p>
+    </div>
+</body>
+
+</html>
+
+```
+题3，文字“中华人民共和国”是何种颜色？
+
+绿色
+```
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>绿色</title>
+    <style>
+        span{
+            color: green;
+        }
+        .nav{
+            color: red;
+        }
+        .nav ul li{
+            color: blue;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="nav">
+        <ul>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+            <li>
+                <span>中华人民共和国</span>
+            </li>
+        </ul>
+    </div>
+
+</body>
+
+</html>
+
+```
+题4，文字“中华人民共和国”是何种颜色？
+绿色
+```
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>绿色</title>
+    <style>
+        #box1 div.spec2 p ,#box1 #box2 p{
+            color: blue;
+        }
+        #box1 #box3 p{
+            color: green;
+        }
+    </style>
+</head>
+
+<body>
+   <div id="box1" class="spec1">
+    <div id="box2" class="spec2">
+        <div id="box3" class="spec3">
+            <p>中华人民共和国</p>
+        </div>
+    </div>
+   </div>
+
+</body>
+
+</html>
+
+```
+题5，文字“中华人民共和国”是何种颜色
+```
+蓝色
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>蓝色</title>
+    <style type="text/css">
+        #father #son{  
+          color:blue;
+        }
+        
+        #father p.c2{ 
+          color:black;
+        }
+        
+        div.c1 p.c2{ 
+          color:red;
+        } 
+        
+        #father{
+          color:green!important;
+        }
+      </style>
+      
+</head>
+<body>
+    <div id="father" class="c1">
+        <p id="son" class="c2">
+          中华人民共和国
+        </p>
+      </div>
+</body>
+</html>
+
+```
+题6，文字“中华人民共和国”是何种颜色
+蓝色
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>蓝色</title>
+    <style type="text/css">
+        #father{ 
+          color:red;
+        }
+        
+        p{ 
+          color:blue;
+        }
+      </style>
+</head>
+<body>
+    <div id="father">
+        <p>
+          中华人民共和国
+        </p>
+      </div>
+      
+</body>
+</html>
+```
+
+题7，文字“中华人民共和国”是何种颜色？
+黄色
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>黄色</title>
+    <style type="text/css">
+        .c1 .c2 div{ 
+          color:blue;
+        }
+        
+        div #box3{
+          color:green;
+        }
+        
+        #box1 div{
+          color:yellow;
+        }
+      </style>
+      
+</head>
+<body>
+    <div id="box1" class="c1">
+        <div id="box2" class="c2">
+          <div id="box3" class="c3">
+            中华人民共和国
+          </div>
+        </div>
+      </div>
+</body>
+</html>
+```
+
+说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+    div{
+        width: 200px;
+        height: 200px;
+        padding: 10px 20px 30px;
+        padding-right: 40px;
+        border: 1px solid #000;
+    }
+
+真实占用的宽度是 262px，真实占用的高度是 242px
+
+说出下面盒子的真实占用的宽高，并画出盒子模型图
+
+	div{
+		width: 200px;
+		height: 200px;
+		padding-left: 10px;
+		padding-right: 20px;
+		padding:40px 50px 60px;
+		padding-bottom: 30px;
+		border: 1px solid #000;
+	}
+
+真实占用的宽度是 232px，真实占用的高度是 272px
+
+3.有如下盒子模型图，请写出代码，尝试用最简单的方式
+```
+<style>
+        div{
+            height: 123px;
+            width: 123px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            padding-left: 40px;
+            padding-right: 40px;
+            border: 1px solid black;
+        }
+    </style>
+```
+
+4.有如下盒子模型图，请写出代码，尝试用最简单的方式
+```
+<style>
+        div{
+            height: 123px;
+            width: 123px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            padding-left: 20px;
+            padding-right: 40px;
+            border: 1px solid black;
+        }
+    </style>
+```
\ No newline at end of file
-- 
Gitee


From 2d6c26796bd749d9b47309b659617ad4e186fc95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=80=9D?= <1662679300@qq.com>
Date: Fri, 18 Oct 2024 19:57:31 +0800
Subject: [PATCH 3/3] =?UTF-8?q?1017=E6=B5=AE=E5=8A=A8=E7=AC=94=E8=AE=B0?=
 =?UTF-8?q?=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...24\350\256\260\347\273\203\344\271\240.md" | 311 ++++++++++++++++++
 1 file changed, 311 insertions(+)
 create mode 100644 "\346\235\216\346\200\235/20241017-\346\265\256\345\212\250\347\254\224\350\256\260\347\273\203\344\271\240.md"

diff --git "a/\346\235\216\346\200\235/20241017-\346\265\256\345\212\250\347\254\224\350\256\260\347\273\203\344\271\240.md" "b/\346\235\216\346\200\235/20241017-\346\265\256\345\212\250\347\254\224\350\256\260\347\273\203\344\271\240.md"
new file mode 100644
index 00000000..7f6c64b1
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241017-\346\265\256\345\212\250\347\254\224\350\256\260\347\273\203\344\271\240.md"
@@ -0,0 +1,311 @@
+## 浮动
+
+### 标准文档流
+
+### 标准文档流的特性
+
+（1）空白折叠现象：
+无论多少个空格、换行、tab，都会折叠为一个空格。
+
+（2）高矮不齐，底边对齐
+
+（3）自动换行，一行写不满，换行写。
+
+
+### 行内元素和块级元素
+
+**行内元素和块级元素的区别：**
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+
+
+
+**行内元素和块级元素的分类：**
+
+在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
+
+从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
+
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+#### 行内元素和块级元素的相互转换
+
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+##### 块级元素可以转换为行内元素：
+
+一旦，给一个块级元素（比如div）设置：
+
+```
+display: inline;
+```
+
+那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+##### 行内元素转换为块级元素：
+
+一旦给一个行内元素（比如span）设置：
+
+```
+display: block;
+```
+
+那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+### 浮动的性质
+
+性质1：浮动的元素脱标
+一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。
+
+性质2：浮动的元素互相贴靠
+
+性质3：浮动的元素有自围效果
+
+性质4：收缩
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度
+
+### 浮动的清除
+
+方法1：给浮动元素的祖先元素加高度
+如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。
+
+方法2：clear:both;
+clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。
+
+方法3：隔墙法
+
+方法4：overflow:hidden;
+overflow即溢出， hidden即隐藏。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。
+
+
+## 练习
+1.
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-18%20195043.png)
+```
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin: 0 auto;
+            margin-bottom: 8px;
+        }
+        .top .d1{
+            background-color: red;
+            width: 277px;
+            height: 103px;
+            float: left;
+            margin-right: 10px;
+        }
+        .top .d21{
+            background-color: green;
+            width: 137px;
+            height: 49px;
+            float: right;
+            margin-bottom: 8px;
+        }
+        .top .d22{
+            background-color: green;
+            width: 679px;
+            height: 46px;
+            float: right;
+        }
+        .middle{
+            height: 435px;
+            width: 970px;
+            margin: 0 auto;
+            margin-bottom: 10px;
+        }
+        .middle .left{
+            background-color: yellow;
+            width: 310px;
+            height: 435px;
+            float: left;
+            margin-right: 10px;
+        }
+        .middle .center{
+            width: 650px;
+            height: 400px;
+            float: left;
+        }
+        .middle .center .main{
+            width: 650px;
+            height: 400px;
+            margin-bottom: 10px;
+        }
+        .middle .center .main .news{
+            width: 450px;
+            height: 400px;
+            float: left;
+        }
+        .middle .center .main .news .m1{
+            background-color: lightblue;
+            height: 240px;
+            width: 450px;
+            margin-bottom: 10px;
+        }
+        .middle .center .main .news .m2{
+            background-color: lightblue;
+            width: 450px;
+            height: 110px;
+            margin-bottom: 10px;
+        }
+        .middle .center .main .news .m3{
+            width: 450px;
+            height: 30px;
+            background-color: lightblue;
+        }
+        .middle .center .main .cright{
+            background-color: purple;
+            height: 400px;
+            width: 190px;
+            margin-left: 10px;
+            float: left;
+        }
+        .middle.center .cbottom{
+            background-color: blue;
+            width: 650px;
+            height: 25px;
+            
+        }
+        .bottom{
+            background-color: yellow;
+            width: 970px;
+            height: 30px;
+            
+            margin:  0 auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="top">
+        <div class="d1">logo</div>
+        <div class="d2">
+            <div class="d21">语言选择</div>
+            <div class="d22">导航条</div>
+        </div>
+    </div>
+    <div class="middle">
+        <div class="left">大广告</div>
+        <div class="center">
+            <div class="main">
+                <div class="news">
+                    <div class="m1"></div>
+                    <div class="m2"></div>
+                    <div class="m3"></div>
+                </div>
+                <div class="cright"></div>
+            </div>
+            <div class="cbottom"></div>
+        </div>
+        
+    </div>
+    <div class="bottom"></div>
+</body>
+```
+
+
+2.
+[效果图](http://sl3216jzq.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-10-18%20194853.png)
+```
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .d1{
+            width: 800px;
+            height: 600px;
+        }
+        .top{
+            width: 760px;
+            margin: 10px;
+            border-top: 1px dashed;
+        }
+        p{
+            color: blue;
+            font-weight: bolder;
+            font-size: 24px;           
+            display: inline-block;           
+        }
+        .d11{
+            width: 760px;
+            height: 20px;
+            background-color: gainsboro;
+        }
+        .top a{
+            float: right;
+            margin-top: 10px;
+            color: blue;
+        }
+        a{
+            text-decoration: none;
+        }
+        .middle{
+            width: 760px;
+            height: 3px;
+            background-image: linear-gradient(to right, blue,red);
+            margin-top: 5px;
+        }
+        .bottom{
+            width: 800px;
+        }
+        .bottom li{
+            border-bottom: 1px dashed blue;
+            background: url(https://img.tukuppt.com/png_preview/00/19/56/qbuHbswXLs.jpg!/fw/780) no-repeat 4px;
+            background-size: 12px 12px;
+            padding: 5px;
+            padding-left: 25px;
+            margin: 10px;
+        }
+        span{
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">
+        <div class="top">
+            <div class="d11"></div>
+            <p>| &nbsp;通知公告</p><a href="">更多 >></a>
+            <div class="middle"></div>
+        </div>
+        
+        <div class="bottom">
+            <ul>
+                <li><a href="">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
+                <li><a href="">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
+                <li><a href="">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee

