diff --git "a/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140922556.png" "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140922556.png"
new file mode 100644
index 0000000000000000000000000000000000000000..95c20f84dc3bd1e23b74cd8852eb469ea061e28e
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140922556.png" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140938226.png" "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140938226.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8324f6ba06c9c745df38fb832c9f4c1414cc4d61
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/img/20171222140938226.png" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/\351\233\252\350\212\261\351\243\230\350\220\275.html" "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/\351\233\252\350\212\261\351\243\230\350\220\275.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b9bb6dcd68dc735013b7096b96a7b71e6f293612
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211115css\344\275\234\344\270\232-canvas/\351\233\252\350\212\261\351\243\230\350\220\275.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style>
+		        body{
+		            background: #000;
+		        }
+		        #snow{
+		            position: fixed;
+		            left: 0;
+		            top: 0;
+		            right: 0;
+		            bottom: 0; 
+		            background:url(./img/20171222140922556.png) , url(img/20171222140938226.png);
+		            -webkit-animation: snow 15s linear infinite;
+		            animation: snow 15s linear infinite;
+		        }
+		        @keyframes snow{
+		        0% {
+		            background-position: 0 0, 0 0;
+		        }
+		        100% {
+		            background-position: 500px 1000px, 500px 500px;
+		            }
+		        }
+		        @-webkit-keyframes snow{
+		            0% {
+		                background-position: 0 0, 0 0;
+		            }
+		            100% {
+		                background-position: 500px 1000px, 500px 500px;
+		            }
+		        }
+		    </style>
+		</head>
+		<body>
+		    <div id="snow"></div>
+		</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211117css\344\275\234\344\270\232-\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276.html" "b/\345\210\230\346\242\246\350\257\227/211117css\344\275\234\344\270\232-\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276.html"
new file mode 100644
index 0000000000000000000000000000000000000000..621b4696fdca1d78a77e3eccca71d23852f087e7
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211117css\344\275\234\344\270\232-\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276.html"
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			*{
+				padding: 0;
+				margin: 0;
+			}
+			.box {
+				width: 0;
+				height: 500px;
+				margin: 100px auto;
+				border-radius: 500px;
+				position: relative;
+				border-left: 250px solid black;
+				border-right: 250px solid white;
+				box-shadow: 0 0 30px #D3D3D3;
+				animation: taiji 3s linear infinite;
+			}
+
+			.box:before {
+				content: "";
+				position: absolute;
+				top: 75px;
+				left: -50px;
+				width: 100px;
+				height: 100px;
+				display: block;
+				z-index: 2;
+				background-color: black;
+				border-radius: 50%;
+			}
+			.box:before {
+				content: "";
+				position: absolute;
+				top: 75px;
+				left: -50px;
+				width: 100px;
+				height: 100px;
+				display: block;
+				z-index: 2;
+				background-color: black;
+				border-radius: 50%;
+				box-shadow: 0 250px 0 white;
+			}
+
+			.box:after {
+				width: 250px;
+				height: 250px;
+				position: absolute;
+				left: -125px;
+				display: block;
+				content: "";
+				z-index: 1;
+				background-color: white;
+				border-radius: 50%;
+			}
+			.box:after {
+				width: 250px;
+				height: 250px;
+				position: absolute;
+				left: -125px;
+				display: block;
+				content: "";
+				z-index: 1;
+				background-color: white;
+				border-radius: 50%;
+				box-shadow: 0 250px 0 black;
+			}
+			@keyframes taiji{
+				from{transform: rotate(0deg);}
+				to{transform: rotate(360deg);}
+			}
+		</style>
+	</head>
+	<body>
+		<!-- 绘制一个太极图效果：
+		只有一个div的盒子
+		div盒子设置白色背景，左边框设置黑色背景
+		给每个div盒子设置before和after伪元素，一个放在盒子中心的上方，一个放在盒子中心的下方（使用绝对定位）
+		设置伪元素的宽高，边框宽度和颜色，然后div盒子和伪元素盒子设置圆角边框（border-radius）
+		大圆的半径为200px，中间小圆的半径20px;-->
+		<div class="box"></div>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211118css\344\275\234\344\270\232-\350\203\214\346\231\257\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\346\226\207\346\234\254\345\261\236\346\200\247.html" "b/\345\210\230\346\242\246\350\257\227/211118css\344\275\234\344\270\232-\350\203\214\346\231\257\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\346\226\207\346\234\254\345\261\236\346\200\247.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5b4555a2c3dc039f29d42bbf3d95f24def44c4b6
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211118css\344\275\234\344\270\232-\350\203\214\346\231\257\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\346\226\207\346\234\254\345\261\236\346\200\247.html"
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style>
+			span {
+				color: red;
+			}
+
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+
+			a {
+				font-size: 12px;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>white-space</h3>
+		<ul>
+			<li>
+				<h4>white-space: normal</h4>
+				<p style="white-space: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space: pre</h4>
+				<p style="white-space: pre;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space: inherit</h4>
+				<p style="white-space: inherit;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space: nowrap</h4>
+				<p style="white-space: nowrap;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space: pre-wrap</h4>
+				<p style="white-space: pre-wrap;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space: pre-line</h4>
+				<p style="white-space: pre-line;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+		</ul>
+		<br>
+		<ul>
+			<h3>word-break</h3>
+			<li>
+				<h4>word-break: normal</h4>
+				<p style="word-break: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-break: break-all</h4>
+				<p style="word-break: break-all;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-break: keep-all</h4>
+				<p style="word-break: keep-all;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+		</ul>
+		<br>
+		<ul>
+			<h3>word-wrap</h3>
+			<li>
+				<h4>word-wrap: normal</h4>
+				<p style="word-wrap: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-wrap: break-word</h4>
+				<p style="word-wrap: break-word;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+		</ul>
+		<br>
+		<ul>
+			<h3>word-spacing</h3>
+			<li>
+				<h4>word-spacing: normal</h4>
+				<p style="word-spacing: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-spacing: inhreit</h4>
+				<p style="word-spacing: inherit;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-spacing: 25px</h4>
+				<p style="word-spacing: 25px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+		</ul>
+		<br>
+		<ul>
+			<h3>letter-spacing</h3>
+			<li>
+				<h4>letter-spacing: normal</h4>
+				<p style="letter-spacing: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>letter-spacing: 25px</h4>
+				<p style="letter-spacing: 25px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod
+					voluptatum libero rerum.</p>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211119css\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/\351\242\234\350\211\262\345\200\274.html" "b/\345\210\230\346\242\246\350\257\227/211119css\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/\351\242\234\350\211\262\345\200\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fdef5da3ba119f3d587b03047b3e481154cfa5d4
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211119css\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/\351\242\234\350\211\262\345\200\274.html"
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+				--red: 108;
+				--green: 87;
+				--blue: 106;
+				--threshold: 0.5;
+				--border-threshold: 0.8;
+			}
+
+			.btn {
+				font-size: 150%;
+				padding: .5em 2em;
+				width: 180px;
+				height: 45px;
+				text-align: center;
+				margin: 0px auto;
+			}
+			.btn {
+				background: rgb(var(--red), var(--green), var(--blue));
+				--r: calc(var(--red) * 0.2126);
+				--g: calc(var(--green) * 0.7152);
+				--b: calc(var(--blue) * 0.0722);
+				--sum: calc(var(--r) + var(--g) + var(--b));
+				
+				--lightness: calc(var(--sum) / 255);
+				color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+				--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
+				 border: .2em solid;
+				border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
+			}
+			.a{
+				color: red;
+				text-align: center;
+			}
+			.b{
+				color: green;
+				text-align: center;
+			}
+			.c{
+				color: blue;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="btn">颜色属性值</div>
+		<p class="a"><input type="range" min="0" max="255" value="108" name="red"><br>R</p>
+		<p class="b"><input type="range" min="0" max="255" value="87" name="green"><br>G</p>
+		<p class="c"><input type="range" min="0" max="255" value="106" name="blue"><br>B</p>
+		<script type="text/javascript">
+			var eleRanges = document.querySelectorAll('input[type="range"]');
+			Array.from(eleRanges).forEach(function (range) {
+			    range.addEventListener('input', function () {
+			        document.documentElement.style.setProperty('--' + this.name, this.value);    
+			    });
+			});
+		</script>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/1.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..520a4e8ffbc543ec9aaa38cc9236fc2f3fd156d8
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/1.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/10.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/10.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..2900d90bdfba375e01659057ed59586213cadd6c
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/10.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/11.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/11.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..dece3e5eda0419ebf0440fb0fba8dfb0e949535d
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/11.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/2.jpg" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ca587d3920a5e46223dcd4aeedd19ba59ed38402
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/2.jpg" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/3.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d17981ddd902460fe6591d74682527d748096e0d
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/3.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/4.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..9264c8022ade03951effb2de2b7f962ee4719b8a
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/4.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/5.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ffd475fffb7ddbb641c2becf13f289acad13512f
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/5.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/6.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..642ae10c86084c09343c235c858140f663d2cdfd
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/6.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/7.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..836637d24f2fa3f46dc5450d36a598ddb800fa94
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/7.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/8.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/8.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..746d3ba643d0a4e20169ccf59870890005e5556e
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/8.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/9.webp" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/9.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..47e67271f158f21e061f0f25e064edfdc236329f
Binary files /dev/null and "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/img/9.webp" differ
diff --git "a/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html" "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cbfdaed183a9d555fba58e406dcfd39a10395c6d
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211122css\344\275\234\344\270\232-\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html"
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			*{
+				margin: 0px;
+				padding: 0px;
+			}
+			body{
+				background-color: #fffae8;
+			}
+			.box{
+				column-width: 200px;
+				-webkit-column-width: 200px;
+				column-gap: 10px;
+				-webkit-column-gap: 10px;
+			}
+			.img img{
+				width: 200px;
+				height: auto;
+			}
+			.img{
+				background-color: white;
+				margin-bottom: 10px;
+				padding: 5px;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<div class="img">
+				<img src="img/1.webp" >
+			</div>
+			<div class="img">
+				<img src="img/2.jpg" >
+			</div>
+			<div class="img">
+				<img src="img/3.webp" >
+			</div>
+			<div class="img">
+				<img src="img/4.webp" >
+			</div>
+			<div class="img">
+				<img src="img/5.webp" >
+			</div>
+			<div class="img">
+				<img src="img/6.webp" >
+			</div>
+			<div class="img">
+				<img src="img/7.webp" >
+			</div>
+			<div class="img">
+				<img src="img/8.webp" >
+			</div>
+			<div class="img">
+				<img src="img/9.webp" >
+			</div>
+			<div class="img">
+				<img src="img/10.webp" >
+			</div>
+			<div class="img">
+				<img src="img/11.webp" >
+			</div>
+			<div class="img">
+				<img src="img/6.webp" >
+			</div>
+			<div class="img">
+				<img src="img/2.jpg" >
+			</div>
+			<div class="img">
+				<img src="img/3.webp" >
+			</div>
+			<div class="img">
+				<img src="img/4.webp" >
+			</div>
+			<div class="img">
+				<img src="img/5.webp" >
+			</div>
+			<div class="img">
+				<img src="img/6.webp" >
+			</div>
+			<div class="img">
+				<img src="img/7.webp" >
+			</div>
+			<div class="img">
+				<img src="img/8.webp" >
+			</div>
+			<div class="img">
+				<img src="img/9.webp" >
+			</div>
+			<div class="img">
+				<img src="img/6.webp" >
+			</div>
+			<div class="img">
+				<img src="img/7.webp" >
+			</div>
+			<div class="img">
+				<img src="img/8.webp" >
+			</div>
+			<div class="img">
+				<img src="img/9.webp" >
+			</div>
+			<div class="img">
+				<img src="img/10.webp" >
+			</div>
+			<div class="img">
+				<img src="img/11.webp" >
+			</div>
+		</div>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\235\236\345\206\205\350\201\224\345\261\236\346\200\247\346\225\210\346\236\234.html" "b/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\235\236\345\206\205\350\201\224\345\261\236\346\200\247\346\225\210\346\236\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..682e5b809151ccda0459e961b3363aa7ca75b5fb
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\235\236\345\206\205\350\201\224\345\261\236\346\200\247\346\225\210\346\236\234.html"
@@ -0,0 +1,857 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			body {
+				margin: 0;
+				padding: 0;
+			}
+
+			select {
+				outline-style: none;
+			}
+
+			.wrapper {
+				width: 100%;
+				background-color: #fffae8;
+				margin-bottom: 30px;
+				position: relative;
+				border: 1px solid #f4b46a;
+			}
+
+			.wrapper h1 {
+				margin-top: 5px;
+			}
+
+			.container {
+				display: flex;
+				background-color: #fed980;
+			}
+
+			.item {
+				overflow: auto;
+				resize: both;
+				line-height: 80px;
+				text-align: center;
+				width: 100px;
+				background-color: rgb(254, 217, 128);
+				border-radius: 1em;
+				border: 5px solid #F4B46A;
+			}
+
+			.wrapper .container-controller {
+				display: flex;
+				flex-wrap: wrap;
+				width: 100%;
+			}
+
+			.container-controller .contorler-button:active {
+				background-color: rgba(32, 108, 179, 0.685);
+			}
+
+			.container-controller .contorler-button {
+				flex: auto;
+				font-size: 15px;
+				line-height: 20px;
+				border: 1px solid #ce8f40;
+				background-color: rgb(255, 236, 123);
+				color: black;
+				border-radius: 1em;
+				padding: 0.1em 0.5em;
+				cursor: pointer;
+				white-space: nowrap;
+			}
+
+			.container-controller .contorler-select,
+			.item-controller .contorler-select {
+				flex-grow: 1;
+				font-size: 15px;
+				line-height: 25px;
+				border: 1px solid #ce8f40;
+				background-color: rgb(255, 236, 123);
+				color: black;
+				border-radius: 1em;
+				padding: 0.1em 0.5em;
+				cursor: pointer;
+				min-width: 120px;
+				width: 0;
+			}
+
+			.item-controller {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				position: absolute;
+				background-color: rgb(255, 236, 123);
+				border: 1px solid #ce8f40;
+				border-radius: 0.4em;
+			}
+
+			.item-controller .contorler-select {
+				width: 100%;
+				border: none;
+				border-top: 1px  solid #CE8F40;
+				border-radius: inherit;
+				outline-style: none;
+			}
+
+			.item-controller .contorler-number-input,
+			.item-controller .contorler-input {
+				list-style: none;
+				font-size: 15px;
+				line-height: 25px;
+				color:black;
+				padding: 0.1em 0.5em;
+				cursor: pointer;
+				text-align: center;
+			}
+
+			.item-controller .contorler-number-input select {
+				border: 1px solid #cf9041;
+				color: black;
+				background-color: rgb(255, 236, 123);
+				border-radius: 0.5em;
+				padding: 0.1em 0.5em;
+				margin-left: 10px;
+				cursor: pointer;
+				outline-style: none;
+			}
+
+			.item-controller .contorler-number-input input,
+			.item-controller .contorler-input input {
+				border: 1px solid #cd9040;
+				color: black;
+				background-color: rgb(254, 237, 121);
+				border-radius: 5em;
+				padding: 0.1em 0.5em;
+				margin-left: 10px;
+				cursor: pointer;
+				width: 50px;
+				outline-style: none;
+			}
+
+			.item-controller .contorler-input input {
+				width: 100px;
+				word-spacing: 1em;
+				padding-left: 30px;
+			}
+
+			/* 非内联 flex */
+			/* 内联 flex */
+			.inline-flex {
+				display: inline-flex;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="wrapper">
+			<h1>非内联flex</h1>
+			<div class="container flex">
+				<div class="item">1</div>
+				<div class="item">2</div>
+				<div class="item">3</div>
+				<div class="item">4</div>
+				<div class="item">5</div>
+			</div>
+			<span>非内联flex</span>
+		</div>
+		<script type="text/javascript">
+			// Controller
+			class Controller {
+				constructor(name) {
+					this.name = name
+				}
+
+				_getPropertypeSupported(propertype) {
+					if (propertype in document.body.style) {
+						return propertype
+					}
+					var prefixes = ["Moz", "Webkit", "O", "ms", "Khtml"]
+					var prefPropertype =
+						propertype.charAt(0).toUpperCase() + propertype.substring(1)
+					for (let i = 0; i < prefixes.length; i++) {
+						if (prefixes[i] + prefPropertype in document.body.style) {
+							return prefixes[i] + prefPropertype
+						}
+					}
+					alert(`${propertype} 属性不支持, 用其他浏览器试试`)
+				}
+
+				_camelize(style) {
+					return style.replace(/-(\w)/, function(all, letter) {
+						return letter.toUpperCase()
+					})
+				}
+
+				_getStyle(ele, propertype) {
+					propertype = this._getPropertypeSupported(propertype)
+					if (window.getComputedStyle) {
+						return window.getComputedStyle(ele, null)[propertype]
+					} else {
+						if (propertype === "opacity") {
+							return getIEOpacity(ele)
+						}
+						if (propertype === float) {
+							return ele.currentStyle.getAttribute("styleFloat")
+						}
+						if (
+							(propertype === "width" || propertype === "height") &&
+							elem.currentStyle[propertype] == "auto"
+						) {
+							var clientRect = ele.getBoundingClientRect()
+							return (
+								(propertype == "width" ?
+									clientRect.right - clientRect.left :
+									clientRect.bottom - clientRect.top) + "px"
+							)
+						}
+						return ele.currentStyle.getAttribute(this._camelize(propertype))
+					}
+				}
+
+				_setStyle(ele, propertype, value) {
+					propertype = this._getPropertypeSupported(propertype)
+					if (propertype == "opacity") {
+						if (!ele.currentStyle || !elem.currentStyle.hasLayout) {
+							ele.style.zoom = 1
+						}
+						propertype = "filter"
+						if (!!window.XDomainRequest) {
+							value =
+								"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" +
+								value * 100 +
+								")"
+						} else {
+							value = "alpha(opacity=" + value * 100 + ")"
+						}
+					}
+					ele.style[propertype] = value
+				}
+
+				_minxinPropertype(...propertypes) {
+					if (propertypes.length === 0) {
+						return []
+					}
+
+					function minxinPropertype(propertype1 = [], propertype2 = []) {
+						let newPropertype = []
+						let newIndex = 0
+						for (const propertypeValue1 of propertype1) {
+							for (const propertypeValue2 of propertype2) {
+								newPropertype[newIndex++] =
+									propertypeValue1 + " " + propertypeValue2
+							}
+						}
+						return newPropertype
+					}
+
+					return propertypes.reduce((propertype1, propertype2) => {
+						return minxinPropertype(propertype1, propertype2)
+					})
+				}
+
+				_createControlInput(ele, propertype) {
+					const li = document.createElement("li")
+					const label = document.createElement("label")
+					const input = document.createElement("input")
+					let value = this._getStyle(ele, propertype)
+					input.value = value
+					label.textContent = propertype + " :"
+					li.classList.add("contorler-input")
+					li.appendChild(label)
+					li.appendChild(input)
+					return li
+				}
+
+				_createControlNumberInput(ele, propertype) {
+					const li = document.createElement("li")
+					const label = document.createElement("label")
+					const input = document.createElement("input")
+					let value = this._getStyle(ele, propertype)
+					let match = value.toString().match(/([-.\d]*)(.*)/)
+					input.type = "number"
+					if (!match[1]) {
+						input.type = "text"
+						input.value = match[2]
+					} else {
+						input.value = match[1]
+					}
+					let units = ["auto", "%", "em", "px", "rem", "ex"]
+					label.textContent = propertype + " :"
+					li.classList.add("contorler-number-input")
+					li.appendChild(label)
+					li.appendChild(input)
+					if (match[2]) {
+						const select = document.createElement("select")
+						for (const unit of units) {
+							const option = document.createElement("option")
+							option.value = unit
+							option.text = unit
+							if (unit === match[2]) {
+								option.selected = true
+							}
+							select.appendChild(option)
+						}
+						li.appendChild(select)
+					}
+					return li
+				}
+
+				_createControlButton(ele, propertype) {
+					let str = "切换至 "
+					let propertypeValue = ""
+					let propertypeValues = this[propertype]
+					let currentPropertypeValue = this._getStyle(ele, propertype)
+					if (currentPropertypeValue === propertypeValues[0]) {
+						propertypeValue = propertypeValues[1]
+					} else {
+						propertypeValue = propertypeValues[0]
+					}
+					const span = document.createElement("span")
+					span.innerHTML = str + propertypeValue
+					span.classList.add("contorler-button")
+					return span
+				}
+				_createControlSelect(ele, propertype) {
+					let propertypeValues = this[propertype]
+					const select = document.createElement("select")
+					select.classList.add("contorler-select", propertype)
+					let prefix = propertype.replace(/([A-Z])/, (all, letter) => {
+						return "-" + letter.toLowerCase()
+					})
+					select.title = prefix
+					const option = document.createElement("option")
+					option.text = prefix
+					select.appendChild(option)
+					for (const propertypeValue of propertypeValues) {
+						const option = document.createElement("option")
+
+						option.value = propertypeValue
+						option.text = propertypeValue
+						if (propertypeValue === this._getStyle(ele, propertype)) {
+							setTimeout(() => {
+								option.selected = true
+							}, 1000)
+						}
+						setTimeout(() => {
+							select.options[0].disabled = true
+						}, 1000)
+						select.appendChild(option)
+					}
+					return select
+				}
+			}
+
+			// ContainerController
+			class ContainerController extends Controller {
+				constructor(
+					wrapper, {
+						name = "container-controller",
+						ele = ".container",
+						display = ["inline-flex", "flex"],
+						flexDirection = ["row", "row-reverse", "column", "column-reverse"],
+						flexWrap = ["nowrap", "wrap", "wrap-reverse"],
+						justifyContent = [
+							"flex-start",
+							"flex-end",
+							"center",
+							"space-between",
+							"space-around",
+							"space-evenly"
+						],
+						alignItems = [
+							"stretch",
+							"flex-start",
+							"flex-end",
+							"center",
+							"baseline"
+						],
+						alignContent = [
+							"flex-start ",
+							"flex-end",
+							"center",
+							"space-between",
+							"space-around",
+							"stretch"
+						]
+					} = {}
+				) {
+					super(name)
+					this.wrapper = wrapper
+					this.ele = this.wrapper.querySelector(ele)
+					this.display = display
+					this.flexDirection = flexDirection
+					this.flexWrap = flexWrap
+					this.justifyContent = justifyContent
+					this.alignItems = alignItems
+					this.alignContent = alignContent
+					this.flexFlow = this._minxinPropertype(
+						this.flexDirection,
+						this.flexWrap
+					)
+				}
+
+				_createControlAddItem(ele) {
+					const span = document.createElement("span")
+					span.innerHTML = "增加成员"
+					span.classList.add("contorler-button")
+					span.onclick = () => {
+						const item = document.createElement("div")
+						item.classList.add("item")
+						item.innerHTML = ele.children.length + 1
+						let randomLineHeight = Math.random() * 80 + 20
+						this._setStyle(item, "line-height", randomLineHeight + "px")
+						ele.appendChild(item)
+					}
+					return span
+				}
+
+				_createControlRemoveItem(ele) {
+					const span = document.createElement("span")
+					span.innerHTML = "减少成员"
+					span.classList.add("contorler-button")
+					span.onclick = () => {
+						if (ele.lastElementChild) {
+							ele.removeChild(ele.lastElementChild)
+						}
+					}
+					return span
+				}
+
+				_createControlAddInlineText(ele) {
+					const span = document.createElement("span")
+					span.innerHTML = "增加内联文本"
+					span.classList.add("contorler-button")
+					span.onclick = () => {
+						ele.insertAdjacentText("afterend", "xx内联脚本xx")
+					}
+					return span
+				}
+
+				_getControledButton(ele, propertype) {
+					const button = this._createControlButton(ele, propertype)
+					let propertypeValues = this[propertype]
+					button.onclick = () => {
+						let currentPropertypeValue = this._getStyle(ele, propertype)
+						let prevPropertypeValue =
+							currentPropertypeValue === propertypeValues[0] ?
+							propertypeValues[1] :
+							propertypeValues[0]
+						button.innerHTML = button.innerHTML.replace(
+							prevPropertypeValue,
+							currentPropertypeValue
+						)
+						this._setStyle(ele, propertype, prevPropertypeValue)
+					}
+					return button
+				}
+
+				_getControledSelect(ele, propertype) {
+					const select = this._createControlSelect(ele, propertype)
+					select.onchange = e => {
+						const currentTarget = e.currentTarget
+						let propertypeValue =
+							currentTarget.options[currentTarget.selectedIndex].value
+						this._setStyle(ele, propertype, propertypeValue)
+						const parentnode = currentTarget.parentNode
+						const selectFlexFlow = parentnode.getElementsByClassName(
+							"flexFlow"
+						)[0]
+						const selectFlexDirection = parentnode.getElementsByClassName(
+							"flexDirection"
+						)[0]
+						const selectFlexWrap = parentnode.getElementsByClassName(
+							"flexWrap"
+						)[0]
+						if (currentTarget.classList.contains("flexDirection")) {
+							for (const option of selectFlexFlow.options) {
+								if (
+									option.value ===
+									propertypeValue +
+									" " +
+									selectFlexWrap.selectedOptions[0].value
+								) {
+									option.selected = true
+								}
+							}
+						}
+
+						if (currentTarget.classList.contains("flexWrap")) {
+							for (const option of selectFlexFlow.options) {
+								if (
+									option.value ===
+									selectFlexDirection.selectedOptions[0].value +
+									" " +
+									propertypeValue
+								) {
+									option.selected = true
+								}
+							}
+						}
+						if (currentTarget.classList.contains("flexFlow")) {
+							for (const option of selectFlexWrap.options) {
+								if (
+									option.value ===
+									selectFlexFlow.selectedOptions[0].value.split(" ")[1]
+								) {
+									option.selected = true
+								}
+							}
+							for (const option of selectFlexDirection.options) {
+								if (
+									option.value ===
+									selectFlexFlow.selectedOptions[0].value.split(" ")[0]
+								) {
+									option.selected = true
+								}
+							}
+						}
+					}
+					return select
+				}
+
+				render(
+					propertypes = [
+						"display",
+						"flexDirection",
+						"flexWrap",
+						"justifyContent",
+						"alignItems",
+						"alignContent",
+						"flexFlow"
+					]
+				) {
+					const div = document.createElement("div")
+					div.classList.add(this.name)
+					for (const propertype of propertypes) {
+						let ele
+						let propertypeValues = this[propertype]
+						if (propertypeValues.length === 2) {
+							ele = this._getControledButton(this.ele, propertype)
+						} else {
+							ele = this._getControledSelect(this.ele, propertype)
+						}
+						div.appendChild(ele)
+					}
+					div.appendChild(this._createControlAddItem(this.ele))
+					div.appendChild(this._createControlRemoveItem(this.ele))
+					div.appendChild(this._createControlAddInlineText(this.ele))
+					this.wrapper.insertBefore(div, this.wrapper.firstElementChild)
+				}
+			}
+
+			// ItemController
+			class ItemController extends Controller {
+				constructor({
+					name = "item-controller",
+					alignSelf = [
+						"stretch",
+						"flex-start",
+						"flex-end",
+						"center",
+						"baseline"
+					],
+					numberInputPropertypes = [
+						"order",
+						"flex-grow",
+						"flex-shrink",
+						"flex-basis"
+					],
+					inputPropertypes = ["flex"]
+				} = {}) {
+					super(name)
+					this.alignSelf = alignSelf
+					this.numberInputPropertypes = numberInputPropertypes
+					this.inputPropertypes = inputPropertypes
+				}
+
+				_getControledSelect(ele, propertype) {
+					const select = this._createControlSelect(ele, propertype)
+					select.onchange = e => {
+						const currentTarget = e.currentTarget
+						let propertypeValue =
+							currentTarget.options[currentTarget.selectedIndex].value
+						this._setStyle(ele, propertype, propertypeValue)
+					}
+					return select
+				}
+
+				_updateFlex(ele, e) {
+					const currentTarget = e.currentTarget
+					const li = currentTarget.parentNode
+					const itemController = li.parentNode
+					if (
+						li.classList.contains("flex-basis") ||
+						li.classList.contains("flex-shrink") ||
+						li.classList.contains("flex-grow")
+					) {
+						const flex = itemController.getElementsByClassName("flex")[0]
+						const input = flex.getElementsByTagName("input")[0]
+						input.value = this._getStyle(ele, "flex")
+					}
+				}
+
+				_getControledNumberInput(ele, propertype) {
+					const li = this._createControlNumberInput(ele, propertype)
+					li.classList.add(propertype)
+					const input = li.getElementsByTagName("input")[0]
+					if (
+						propertype === "flex-grow" ||
+						propertype === "flex-shrink" ||
+						propertype === "flex-basis"
+					) {
+						input.min = 0
+					}
+					let unit = "px"
+					if (propertype === "flex-basis") {
+						const select = li.getElementsByTagName("select")[0]
+						select.onchange = e => {
+							if (e.currentTarget.value !== "auto") {
+								input.type = "number"
+								input.value = input.value ? input.value : 0
+								unit = e.currentTarget.value
+								this._setStyle(ele, propertype, input.value + unit)
+							} else {
+								input.type = "text"
+								input.value = "auto"
+								this._setStyle(ele, propertype, "auto")
+							}
+							this._updateFlex(ele, e)
+						}
+					}
+					input.oninput = e => {
+						const currentTarget = e.currentTarget
+						let value = currentTarget.value
+						if (propertype === "flex-basis") {
+							this._setStyle(ele, propertype, value + unit)
+						} else {
+							this._setStyle(ele, propertype, value)
+						}
+						this._updateFlex(ele, e)
+					}
+					return li
+				}
+
+				_getControledInput(ele, propertype) {
+					const li = this._createControlInput(ele, propertype)
+					li.classList.add(propertype)
+					const input = li.getElementsByTagName("input")[0]
+					if (propertype === "flex") {
+						input.onchange = e => {
+							let value = e.currentTarget.value
+							this._setStyle(ele, propertype, value)
+							const parentNode = li.parentNode
+							let flexBasis = parentNode.getElementsByClassName("flex-basis")[0]
+							let flexGrow = parentNode.getElementsByClassName("flex-grow")[0]
+							let flexShrink = parentNode.getElementsByClassName(
+								"flex-shrink"
+							)[0]
+							flexGrow.getElementsByTagName("input")[0].value = this._getStyle(
+								ele,
+								"flex-grow"
+							)
+							flexShrink.getElementsByTagName(
+								"input"
+							)[0].value = this._getStyle(ele, "flex-shrink")
+							let flexBasisProperTypeValue = this._getStyle(ele, "flex-basis")
+							let flexBasisInput = flexBasis.getElementsByTagName("input")[0]
+							let flexBasisSelect = flexBasis.getElementsByTagName("select")[0]
+							let match = flexBasisProperTypeValue
+								.toString()
+								.match(/([.\d]*)(.*)/)
+							if (match[2] === "auto") {
+								flexBasisInput.type = "text"
+								flexBasisInput.value = "auto"
+								flexBasisSelect.value = "auto"
+							} else {
+								flexBasisInput.type = "number"
+								flexBasisSelect.value = match[2]
+								flexBasisInput.value = match[1]
+							}
+						}
+					}
+					return li
+				}
+
+				render(propertypes = ["alignSelf"]) {
+					const div = document.createElement("div")
+					div.classList.add(this.name)
+					for (const numberInputPropertype of this.numberInputPropertypes) {
+						div.appendChild(
+							this._getControledNumberInput(this.ele, numberInputPropertype)
+						)
+					}
+					for (const inputPropertype of this.inputPropertypes) {
+						div.appendChild(this._getControledInput(this.ele, inputPropertype))
+					}
+					for (const propertype of propertypes) {
+						let ele
+						let propertypeValues = this[propertype]
+						ele = this._getControledSelect(this.ele, propertype)
+						div.appendChild(ele)
+					}
+					return div
+				}
+			}
+
+			const wrappers = document.getElementsByClassName("wrapper")
+			for (const wrapper of wrappers) {
+				const containerController = new ContainerController(wrapper)
+				containerController.render()
+			}
+			const itemController = new ItemController()
+
+			function itemControlHandler(e) {
+				const target = e.target
+				if (!target.classList.contains("item")) {
+					return false
+				}
+				itemController.ele = target
+				const div = itemController.render()
+				let pageX = e.pageX
+				let pageY = e.pageY
+				let doc = document.documentElement
+				let clientHeight = doc.clientHeight
+				let clientWidth = doc.clientWidth
+				itemController._setStyle(div, "left", pageX - 10 + "px")
+				itemController._setStyle(div, "top", pageY - 10 + "px")
+				document.body.appendChild(div)
+				let boundingClientRect = div.getBoundingClientRect()
+				if (boundingClientRect.right > clientWidth) {
+					let left = parseFloat(itemController._getStyle(div, "left"))
+					let x = boundingClientRect.right - clientWidth
+					itemController._setStyle(div, "left", left - x + "px")
+				}
+				if (boundingClientRect.bottom > clientHeight) {
+					let top = parseFloat(itemController._getStyle(div, "top"))
+					let y = boundingClientRect.bottom - clientHeight
+					itemController._setStyle(div, "top", top - y + "px")
+				}
+				let isLeave = false
+				div.onmouseleave = function(e) {
+					isLeave = true
+					setTimeout(() => {
+						if (isLeave) {
+							div.parentNode.removeChild(div)
+						}
+					}, 500)
+				}
+				div.onmouseenter = function(e) {
+					isLeave = false
+				}
+				div.onmousedown = function(e) {
+					let rectBounding = div.getBoundingClientRect()
+					let x = e.clientX - rectBounding.left
+					let y = e.clientY - rectBounding.top
+					div.onmousemove = function(e) {
+						let pageX = e.pageX
+						let pageY = e.pageY
+						itemController._setStyle(div, "top", pageY - y + "px")
+						itemController._setStyle(div, "left", pageX - x + "px")
+					}
+					div.onmouseup = function(e) {
+						div.onmousemove = null
+					}
+				}
+			}
+
+			function itemControlTouchHandler(e) {
+				const target = e.target
+				if (!target.classList.contains("item")) {
+					return false
+				}
+				itemController.ele = target
+				const div = itemController.render()
+				const touche = e.touches[0]
+				let pageX = touche.pageX
+				let pageY = touche.pageY
+				let doc = document.documentElement
+				let clientHeight = doc.clientHeight
+				let clientWidth = doc.clientWidth
+				itemController._setStyle(div, "left", pageX - 10 + "px")
+				itemController._setStyle(div, "top", pageY - 10 + "px")
+				document.body.appendChild(div)
+				let boundingClientRect = div.getBoundingClientRect()
+				if (boundingClientRect.right > clientWidth) {
+					let left = parseFloat(itemController._getStyle(div, "left"))
+					let x = boundingClientRect.right - clientWidth
+					itemController._setStyle(div, "left", left - x + "px")
+				}
+				if (boundingClientRect.bottom > clientHeight) {
+					let top = parseFloat(itemController._getStyle(div, "top"))
+					let y = boundingClientRect.bottom - clientHeight
+					itemController._setStyle(div, "top", top - y + "px")
+				}
+				let isLeave = true
+
+				function leaveBySeconds(time = 2000) {
+					setTimeout(() => {
+						if (isLeave) {
+							div.parentNode.removeChild(div)
+						}
+					}, time)
+				}
+				leaveBySeconds()
+
+				for (const input of div.getElementsByTagName('input')) {
+					input.onblur = function() {
+						isLeave = true
+						leaveBySeconds(4000)
+					}
+					input.onfocus = function() {
+						isLeave = false
+						return false
+					}
+				}
+				for (const select of div.getElementsByTagName('select')) {
+					select.addEventListener('focus', function() {
+						isLeave = false
+						return false
+					}, false)
+					select.onblur = function() {
+						isLeave = true
+						leaveBySeconds(4000)
+					}
+
+				}
+
+				div.ontouchstart = function(e) {
+					isLeave = false
+					let rectBounding = div.getBoundingClientRect()
+					let touche = e.touches[0]
+					let x = touche.clientX - rectBounding.left
+					let y = touche.clientY - rectBounding.top
+					div.ontouchmove = function(e) {
+						let touche = e.touches[0]
+						let pageX = touche.pageX
+						let pageY = touche.pageY
+						itemController._setStyle(div, "top", pageY - y + "px")
+						itemController._setStyle(div, "left", pageX - x + "px")
+						e.preventDefault()
+					}
+					div.ontouchend = function(e) {
+						div.ontouchmove = null
+						isLeave = true
+						leaveBySeconds()
+					}
+				}
+			}
+			if ('ontouchstart' in document.body) {
+				document.documentElement.addEventListener(
+					"touchstart",
+					itemControlTouchHandler,
+					false
+				)
+				document.getElementsByClassName('ribbon')[0].style.fontSize = '16px'
+			} else {
+				document.documentElement.addEventListener(
+					"click",
+					itemControlHandler,
+					false
+				)
+			}
+		</script>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html" "b/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..449a9e2cb882410ef6eb8eca98e2de94d283967e
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211124css\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			body {
+				background-color: #333;
+			}
+
+			.container {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset -5px 0 #d7d7d7;
+			}
+
+			.item1 {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				margin: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.box1 {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.item2 {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				margin: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.box2 {
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.item2:nth-child(2) {
+				align-self: flex-end;
+			}
+
+			.item3 {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				margin: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.box3 {
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.item3:nth-child(2) {
+				align-self: center;
+			}
+
+			.item3:nth-child(3) {
+				align-self: flex-end;
+			}
+
+			.item4 {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				margin: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.box4 {
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+
+			.row4 {
+				display: flex;
+				flex-basis: 100%;
+				justify-content: space-between;
+			}
+
+			.item5 {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				margin: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.box5 {
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+
+			.row5 {
+				display: flex;
+				flex-basis: 100%;
+				justify-content: space-between;
+			}
+
+			.box5 .row5:nth-child(2) {
+				justify-content: center;
+			}
+
+			.box6 {
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				align-content: space-between;
+			}
+
+			.box9 {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				align-content: space-between;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container box1">
+			<div class="item1"></div>
+		</div>
+		<div class="container box2">
+			<div class="item2"></div>
+			<div class="item2"></div>
+		</div>
+		<div class="container box3">
+			<div class="item3"></div>
+			<div class="item3"></div>
+			<div class="item3"></div>
+		</div>
+		<div class="container box4">
+			<div class="row4">
+				<div class="item4"></div>
+				<div class="item4"></div>
+			</div>
+			<div class="row4">
+				<div class="item4"></div>
+				<div class="item4"></div>
+			</div>
+		</div>
+		<div class="container box5">
+			<div class="row5">
+				<div class="item5"></div>
+				<div class="item5"></div>
+			</div>
+			<div class="row5">
+				<div class="item1"></div>
+			</div>
+			<div class="row5">
+				<div class="item5"></div>
+				<div class="item5"></div>
+			</div>
+		</div>
+		<div class="container box6">
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+		</div>
+		<div class="container box9">
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+			<div class="item1"></div>
+		</div>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html" "b/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ae145d9509fc2c46a2bec8dde34fb06f14549944
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			.all {
+				display: grid;
+				width: 500px;
+				height: 500px;
+				grid-template-rows: repeat(2, 20%) 60%;
+				color: white;
+				font-size: 50px;
+			}
+			.A{
+				display: grid;
+				grid-template-columns: repeat(2,50%);
+			}
+			.a1{
+				background-color: red;
+			}
+			.a2{
+				background-color: green;
+			}
+			.B{
+				display: grid;
+				grid-template-columns: repeat(3,1fr);
+			}
+			.b1{
+				background-color: teal;
+			}
+			.b2{
+				background-color: yellow;
+			}
+			.b3{
+				background-color: gold;
+			}
+			.C{
+				display: grid;
+				grid-template-columns: repeat(4,1fr);
+				grid-auto-rows: repeat(3,1fr);
+				grid-template-areas: 'a b c d' 'e e f f' 'e e f f';
+			}
+			.c1{
+				background-color: pink;
+				grid-area: a;
+			}
+			.c2{
+				background-color: purple;
+				grid-area: b;
+			}
+			.c3{
+				background-color: blue;
+				grid-area: c;
+			}
+			.c4{
+				background-color: black;
+				grid-area: d;
+			}
+			.c5{
+				background-color: red;
+				grid-area: e;
+			}
+			.c6{
+				background-color: green;
+				grid-area: f;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="all">
+			<div class="A">
+				<div class="a1">50%</div>
+				<div class="a2">50%</div>
+			</div>
+			<div class="B">
+				<div class="b1">33%</div>
+				<div class="b2">33%</div>
+				<div class="b3">33%</div>
+			</div>
+			<div class="C">
+				<div class="c1">25%</div>
+				<div class="c2">25%</div>
+				<div class="c3">25%</div>
+				<div class="c4">25%</div>
+				<div class="c5">50%</div>
+				<div class="c6">50%</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git "a/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220grid\345\270\203\345\261\200.html" "b/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220grid\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a3590247274b8af1d3627e5cdeaf5419239fac61
--- /dev/null
+++ "b/\345\210\230\346\242\246\350\257\227/211125css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220grid\345\270\203\345\261\200.html"
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			body {
+				background-color: #333;
+			}
+
+			.box {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				display: grid;
+				width: 100px;
+				height: 100px;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset -5px 0 #d7d7d7;
+				border-radius: 10px;
+				grid-template:
+					"a1 a2 a3"1fr "a4 a5 a6"1fr "a7 a8 a9"1fr /1fr 1fr 1fr;
+			}
+
+			.box>div {
+				width: 24px;
+				height: 24px;
+				background: #333;
+				border-radius: 50%;
+			}
+
+			.box1>div:nth-child(1) {
+				grid-area: a5;
+				place-self: center center;
+			}
+
+			.box2>div:nth-child(1) {
+				grid-area: a4;
+				place-self: center end;
+			}
+
+			.box2>div:nth-child(2) {
+				grid-area: a6;
+				place-self: center start;
+			}
+
+			.box3>div:nth-child(1) {
+				grid-area: a1;
+				place-self: end end;
+			}
+
+			.box3>div:nth-child(2) {
+				grid-area: a5;
+				place-self: center center;
+			}
+
+			.box3>div:nth-child(3) {
+				grid-area: a9;
+				place-self: start start;
+			}
+
+			.box4>div:nth-child(1) {
+				grid-area: a1;
+				place-self: end end;
+			}
+
+			.box4>div:nth-child(2) {
+				grid-area: a3;
+				place-self: end start;
+			}
+
+			.box4>div:nth-child(3) {
+				grid-area: a7;
+				place-self: start end;
+			}
+
+			.box4>div:nth-child(4) {
+				grid-area: a9;
+				place-self: start start;
+			}
+
+			.box5>div:nth-child(1) {
+				grid-area: a1;
+				place-self: end end;
+			}
+
+			.box5>div:nth-child(2) {
+				grid-area: a3;
+				place-self: end start;
+			}
+
+			.box5>div:nth-child(3) {
+				grid-area: a5;
+				place-self: center center;
+			}
+
+			.box5>div:nth-child(4) {
+				grid-area: a7;
+				place-self: start end;
+			}
+
+			.box5>div:nth-child(5) {
+				grid-area: a9;
+				place-self: start start;
+			}
+
+			.box6>div:nth-child(1) {
+				grid-area: a1;
+				place-self: end end;
+			}
+
+			.box6>div:nth-child(2) {
+				grid-area: a3;
+				place-self: end start;
+			}
+
+			.box6>div:nth-child(3) {
+				grid-area: a4;
+				place-self: center end;
+			}
+
+			.box6>div:nth-child(4) {
+				grid-area: a6;
+				place-self: center start;
+			}
+
+			.box6>div:nth-child(5) {
+				grid-area: a7;
+				place-self: start end;
+			}
+
+			.box6>div:nth-child(6) {
+				grid-area: a9;
+				place-self: start start;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box box1">
+			<div></div>
+		</div>
+		<div class="box box2">
+			<div></div>
+			<div></div>
+		</div>
+		<div class="box box3">
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="box box4">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="box box5">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="box box6">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<div class="box box9">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</body>
+</html>
