fix:day16

day16/css/4.奥运五环.css

@@ -0,0 +1,94 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+div {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 10px;
+    position: absolute;
+}
+div::after {
+    content: "";
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    left: -10px;
+    top: -10px;
+}
+#blue {
+    border-color: blue;
+    /* 定位时 若想让元素层级在前 */
+    /* z-index: 999; */
+    left: 0;
+    top: 0;
+}
+#blue::after {
+    border: 10px solid blue;
+    z-index: 1;
+    /* 透明 */
+    border-bottom-color: transparent;
+}
+#black {
+    border-color: black;
+    /* 定位时 若想让元素层级在前 */
+    /* z-index: 999; */
+    left: 230px;
+    top: 0;
+}
+#black::after {
+    border: 10px solid black;
+    z-index: 1;
+    /* 透明 */
+    border-left-color: transparent;
+}
+
+#red {
+    border-color: red;
+    /* 定位时 若想让元素层级在前 */
+    /* z-index: 999; */
+    left: 460px;
+    top: 0;
+}
+#red::after {
+    border: 10px solid red;
+    z-index: 1;
+    /* 透明 */
+    border-left-color: transparent;
+}
+#yellow {
+    border-color: yellow;
+    /* 定位时 若想让元素层级在前 */
+    left: 117px;
+    top: 100px;
+}
+#yellow::after {
+    border: 10px solid yellow;
+    /* 透明 */
+    border-left-color: transparent;
+}
+#green {
+    border-color: green;
+    /* 定位时 若想让元素层级在前 */
+    left: 350px;
+    top: 100px;
+}
+#green::after {
+    border: 10px solid green;
+    /* 透明 */
+    
+    border-left-color: transparent;
+}
+p {
+    margin-top: 500px;
+    /* 隐藏 */
+    /* opacity: 0; */
+    /* display: none; */
+    visibility: hidden;
+    /* 
+        visibility 不会改变页面布局 绑定事件不会生效
+    */
+}

day16/css/5.弹性盒.css

@@ -0,0 +1,111 @@
+#box {
+    /* width: 900px; */
+    width: 550px;
+    height: 300px;
+    background: #ccc;
+    display: flex;
+    flex-wrap: wrap;
+    align-content:stretch;
+    /* flex-direction: column; */
+    /* align-items: center; */
+    /* justify-content:space-evenly; */
+    /* flex-direction:column-reverse; */
+    /* display: inline-flex; */
+}
+#box4 {
+    width: 100px;
+    height: 50px;
+    background: #f00;
+}
+#box5 {
+    width: 120px;
+    height: 100px;
+    background: #ff0;
+}
+#box6 {
+    width: 100px;
+    height: 100px;
+    background: #00f;
+}
+/* #box1 {
+    width: 200px;
+    height: 100px;
+    background: #f00;
+}
+#box2 {
+    width: 200px;
+    height: 100px;
+    background: #ff0;
+}
+#box3 {
+    width: 200px;
+    height: 100px;
+    background: #00f;
+} */
+.new {
+    width: 400px;
+    display: flex;
+    flex-flow: row wrap-reverse;
+    /* flex-wrap:wrap-reverse; */
+
+}
+.new1,.new2,.new3 {
+    width: 100px;
+    height: 100px;
+}
+.new1 {
+    background: #00f;
+}
+.new2 {
+    background: #f00;
+}
+.new3 {
+    background: #ff0;
+}
+/* 
+弹性盒:容器属性、项目属性
+容器属性:
+    开启弹性盒：display：flex;(常用)
+               display:inline-flex;（开启弹性盒子 以内联形式展示）
+               display:-moz-flex;
+    注意:设置为flex布局后，子元素的float、clear属性将失效;
+    1.flex-direction:控制弹性盒子方向
+                     row(默认) 从左到右
+                     row-reverse 从右到左
+                     column 从上到下
+                     column-reverse 从下到上
+                     
+    2.flex-wrap：控制弹性盒子换行
+                nowrap 不换行（默认）
+                wrap 换行
+                wrap-reverse 换行 第一行在下面
+    3.flex-flow(排列):flex-direction flex-wrap
+                      flex-flow:row nowrap;
+    4.justify-content:水平对齐方式
+                flex-start 左对齐 （默认）
+                flex-end 右对齐
+                center 居中
+                space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距  离是两个项目之间留白的和
+                space-between:两端对齐，项目之间间隔相等
+                space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
+    5.align-items:交叉轴对齐方式
+                stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
+                flex-start：交叉轴的起点对齐。
+                flex-end：交叉轴的终点对齐。
+                center：交叉轴的中点对齐。
+                baseline: 项目的第一行文字的基线对齐。
+    6.align-content：轴线的对齐方式(一根轴不生效)
+                    stretch (默认)：拉伸显示
+                    flex-start：从启点线开始顺序排列
+                    flex-end：相对终点线顺序排列
+                    center：居中排列
+                    space-between：项目均匀分布，第一项在启点线，最后一项在终点线
+                    space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
+    注意: Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。
+    注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。
+    注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。
+
+
+
+
+*/

day16/html/1.浏览器内核.html

@@ -9,4 +9,4 @@
 <body>
     <div id="box"></div>
 </body>
-</html>
+</html>

day16/html/4.奥运五环.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/4.奥运五环.css">
+</head>
+<body>
+    <div id="blue"></div>
+    <div id="black"></div>
+    <div id="red"></div>
+    <div id="yellow"></div>
+    <div id="green"></div>
+
+    <p id="aa">
+        一段文字一段文字一段文字一段文字一段文字一段文字一段文字
+    </p>
+    <script>
+        var aa = document.getElementById("aa");
+        aa.onclick = function() {
+            console.log("点击")
+        }
+    </script>
+</body>
+</html>

day16/html/5.弹性盒.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/5.弹性盒.css">
+</head>
+<body>
+    <div id="box">
+        <!-- <div id="box1"></div>
+        <div id="box2"></div>
+        <div id="box3"></div> -->
+        <div id="box4">4</div>
+        <div id="box5">5</div>
+        <div id="box6">6</div>
+        <div id="box4">4</div>
+        <div id="box5">5</div>
+        <div id="box6">6</div>
+        <div id="box4">4</div>
+        <div id="box5">5</div>
+        <div id="box6">6</div>
+    </div>
+    <div class="new">
+        <div class="new1"></div>
+        <div class="new2"></div>
+        <div class="new3"></div>
+        <div class="new1"></div>
+        <div class="new2"></div>
+        <div class="new3"></div>
+        <div class="new1"></div>
+        <div class="new2"></div>
+        <div class="new3"></div>
+    </div>
+
+</body>
+</html>