diff --git a/csspress/4.flex.assets/image-20210120113341512.png b/csspress/4.flex.assets/image-20210120113341512.png new file mode 100644 index 0000000..8db1205 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120113341512.png differ diff --git a/csspress/4.flex.assets/image-20210120114325303.png b/csspress/4.flex.assets/image-20210120114325303.png new file mode 100644 index 0000000..f961e2c Binary files /dev/null and b/csspress/4.flex.assets/image-20210120114325303.png differ diff --git a/csspress/4.flex.assets/image-20210120114326831.png b/csspress/4.flex.assets/image-20210120114326831.png new file mode 100644 index 0000000..f961e2c Binary files /dev/null and b/csspress/4.flex.assets/image-20210120114326831.png differ diff --git a/csspress/4.flex.assets/image-20210120114504619.png b/csspress/4.flex.assets/image-20210120114504619.png new file mode 100644 index 0000000..90ebe72 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120114504619.png differ diff --git a/csspress/4.flex.assets/image-20210120114721023.png b/csspress/4.flex.assets/image-20210120114721023.png new file mode 100644 index 0000000..661a920 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120114721023.png differ diff --git a/csspress/4.flex.assets/image-20210120134940595.png b/csspress/4.flex.assets/image-20210120134940595.png new file mode 100644 index 0000000..02f5089 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120134940595.png differ diff --git a/csspress/4.flex.assets/image-20210120135351730.png b/csspress/4.flex.assets/image-20210120135351730.png new file mode 100644 index 0000000..acc090d Binary files /dev/null and b/csspress/4.flex.assets/image-20210120135351730.png differ diff --git a/csspress/4.flex.assets/image-20210120135442183.png b/csspress/4.flex.assets/image-20210120135442183.png new file mode 100644 index 0000000..29d4f96 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120135442183.png differ diff --git a/csspress/4.flex.assets/image-20210120135503448.png b/csspress/4.flex.assets/image-20210120135503448.png new file mode 100644 index 0000000..71e13a4 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120135503448.png differ diff --git a/csspress/4.flex.assets/image-20210120143705542.png b/csspress/4.flex.assets/image-20210120143705542.png new file mode 100644 index 0000000..1232137 Binary files /dev/null and b/csspress/4.flex.assets/image-20210120143705542.png differ diff --git a/csspress/4.flex.md b/csspress/4.flex.md index 8a8f391..52837ec 100644 --- a/csspress/4.flex.md +++ b/csspress/4.flex.md @@ -29,6 +29,14 @@ display:inline-flex 垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end + + +注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row） + +当 flex-direction 的值为column时 主轴为竖直 侧轴为水平 + +![image-20210120143705542](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120143705542.png) + ### 容器的属性 - flex-direction 声明容器使用的轴是水平的还是垂直的 @@ -43,4 +51,137 @@ display:inline-flex - flex-start 交叉轴起点对齐（拓展） - flex-end 交叉轴终点对齐 - baseline 第一行文字的基线对齐 - - stretch 默认占满整个容器的高度 \ No newline at end of file + - stretch 默认占满整个容器的高度 + +![image-20210120113341512](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120113341512.png) + +``` + + + + + + Document + + + +
+
+
+
+ + +``` + + + +#### justify-content + +##### center: 水平居中 + +![image-20210120114326831](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114326831.png) + +``` +.box{ + width: 1000px; + height: 500px; + background: pink; + display:flex; + flex-direction: row; + justify-content: center; + } +``` + + + +##### space-around 每个项目两侧的间隔相等 项目到边框有间距 + +![image-20210120114504619](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114504619.png) + +``` +.box{ + width: 1000px; + height: 500px; + background: pink; + display:flex; + flex-direction: row; + justify-content: space-around; + } +``` + + + +##### space-between 两端对齐 项目之间的间隔都相等 + +![image-20210120114721023](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114721023.png) + + + +``` +.box{ + width: 1000px; + height: 500px; + background: pink; + display:flex; + flex-direction: row; + justify-content: space-between; + } +``` + + + +#### align-items + +定义侧轴的项目对齐方式 + +作业1： + +![image-20210120134940595](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120134940595.png) + +作业2： + +实现flex-内容宽度等分 + +作业3： + +左右布局，一侧定宽一侧自适应填满 + +作业4： + +未知高度上下左右居中 + +作业6： + +![image-20210120135351730](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135351730.png) + +作业7： + +![image-20210120135442183](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135442183.png) + +作业8 + +![image-20210120135503448](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135503448.png) \ No newline at end of file diff --git a/csspress/demo/flex.html b/csspress/demo/flex.html new file mode 100644 index 0000000..2d13769 --- /dev/null +++ b/csspress/demo/flex.html @@ -0,0 +1,57 @@ + + + + + + Document + + + +
+
+
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/csspress/demo2/flex.html b/csspress/demo2/flex.html new file mode 100644 index 0000000..ced5d99 --- /dev/null +++ b/csspress/demo2/flex.html @@ -0,0 +1,55 @@ + + + + + + Document + + + +
+
萤草
+ +
青行灯
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/csspress/demo2/flex2.html b/csspress/demo2/flex2.html new file mode 100644 index 0000000..86e8a16 --- /dev/null +++ b/csspress/demo2/flex2.html @@ -0,0 +1,103 @@ + + + + + + Document + + + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+
未知高度上下左右居中
+
+ + \ No newline at end of file diff --git a/csspress/float.assets/image-20210120160447090.png b/csspress/float.assets/image-20210120160447090.png new file mode 100644 index 0000000..f33f2e9 Binary files /dev/null and b/csspress/float.assets/image-20210120160447090.png differ diff --git a/csspress/float.assets/image-20210120160552069.png b/csspress/float.assets/image-20210120160552069.png new file mode 100644 index 0000000..e6754ad Binary files /dev/null and b/csspress/float.assets/image-20210120160552069.png differ diff --git a/csspress/float.md b/csspress/float.md index 305ad4d..804994c 100644 --- a/csspress/float.md +++ b/csspress/float.md @@ -30,31 +30,43 @@ 2. 浮动的破坏性 - 浮动会破坏正常的inline boxes + flex破坏性指的是，父元素高度塌陷 。 - 什么是inline boxes? +把一张图片放在div里显示： - ![image-20210120102415347](E:\web\lessons\课件\csspress\float.assets\image-20210120102415347.png) +``` +
+ x +
-inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。 +``` -Linebox +``` +.outer{ + width: 400px; + background-color: lightblue; +} +``` -![image-20210120102812428](E:\web\lessons\课件\csspress\float.assets\image-20210120102812428.png) +![image-20210120160447090](E:\web\lessons\课件\csspress\float.assets\image-20210120160447090.png) -正常的图文混排： +这时候如果给图片加上float:left ,父元素蓝色框就只有x占据的宽度 -不加float: +``` +.outer{ + width: 400px; + background-color: lightblue; + float:left; +} +``` -![image-20210120103521672](E:\web\lessons\课件\csspress\float.assets\image-20210120103521672.png) +![image-20210120160552069](E:\web\lessons\课件\csspress\float.assets\image-20210120160552069.png) -（加入float之后）： +这时候如果把x去掉 那么父元素（蓝色框） 就直接没了 -![image-20210120103339657](E:\web\lessons\课件\csspress\float.assets\image-20210120103339657.png) -正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了。被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列 ## float 使用 @@ -64,7 +76,7 @@ float:left 左浮动 float:right 右浮动 ``` -float:left 实现块级元素水平排列： +float:left 实现块级元素水平排列 ![image-20210120103840173](E:\web\lessons\课件\csspress\float.assets\image-20210120103840173.png)