diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html" index cfc0a4b4b304b2a322fc13b3c3a280dcc35ac20f..5e172086d0b2928f6183fbd172799e2e708c617f 100644 --- "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html" +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241024/test01-\345\260\217\347\261\263\345\225\206\345\223\201.html" @@ -27,7 +27,7 @@ position: relative; top: 0; overflow: hidden; - transition: all .5s; + transition: all 0.5s; } img { @@ -41,7 +41,7 @@ width: 100%; height: 80px; background-color: #ff6700; - transition: all .5s; + transition: all 0.5s; } .xg:hover { diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test01-\345\237\272\347\241\200\345\270\203\345\261\200\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test01-\345\237\272\347\241\200\345\270\203\345\261\200\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..207483567bbea6babdbea651d8924f0d27993955 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test01-\345\237\272\347\241\200\345\270\203\345\261\200\347\273\203\344\271\240.html" @@ -0,0 +1,26 @@ + + + + + test01 + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test02-\344\270\273\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test02-\344\270\273\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..6378182d33c1eb35b89ada5472aa884eddf657e7 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test02-\344\270\273\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" @@ -0,0 +1,47 @@ + + + + + test02 + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test03-\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test03-\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..17e6b92248e0871775857654e58d31de35aa6de0 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test03-\344\272\244\345\217\211\350\275\264\345\257\271\351\275\220\347\273\203\344\271\240.html" @@ -0,0 +1,47 @@ + + + + + test03 + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test04-\344\270\273\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test04-\344\270\273\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..e9c8892c25070de67332455bc81ce7d13a8dc475 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test04-\344\270\273\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" @@ -0,0 +1,30 @@ + + + + + test04 + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test05-\344\272\244\345\217\211\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test05-\344\272\244\345\217\211\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..e5711733d96cf9a837b9309705caff4911c38737 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test05-\344\272\244\345\217\211\350\275\264\346\226\271\345\220\221\347\273\203\344\271\240.html" @@ -0,0 +1,42 @@ + + + + + test05 + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test06-\351\252\260\345\255\220\345\270\203\345\261\200\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test06-\351\252\260\345\255\220\345\270\203\345\261\200\347\273\203\344\271\240.html" new file mode 100644 index 0000000000000000000000000000000000000000..cc256b99c0578f0050078e3804debb552f190de7 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241028/test06-\351\252\260\345\255\220\345\270\203\345\261\200\347\273\203\344\271\240.html" @@ -0,0 +1,174 @@ + + + + + test06 + + + + +
+
+ +
+
+ + +
+
+ + + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+ +
+ + +
+
+
+ + + + + + +
+
+ + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + + +
+
+ + \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..1a27d0a2fd4ce1b4e0aedafcd55640b707720caa --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" @@ -0,0 +1,151 @@ +### flex 布局的优势 +1. **flex 布局的子元素不会脱离文档流**，遵从“流的特性” +2. **flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范** + +### 概念：弹性盒子、子元素 +- 弹性盒子：使用 `display:flex` 或 `display:inline-flex` 声明的**父容器** +- 子元素/弹性元素：父容器里面的子元素们（父容器被声明为 flex 盒子的情况下），遵循弹性布局 + +### 概念：主轴和侧轴(副轴) +弹性盒子里面的子元素们，默认是从左至右排列的(主轴方向) + +- 主轴：flex容器的主轴，默认是水平方向，从左向右 + +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下 + +PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向 + +## 弹性盒子 +### flex-direction 属性：设置盒子中子元素的排列方向（不写就默认为从左至右） +| 属性值 | 描述 | +|:-------------|:-------------| +| row | 从左到右水平排列子元素（默认值） | +|column|从上到下垂直排列子元素| +| row-reverse |从右向左排列子元素 | +|column-reverse|从下到上垂直排列子元素| + +### flex-wrap 属性：控制子元素`溢出`时的换行处理 + +## 弹性元素 +### justify-content 属性：设置子元素在`主轴`上的排列（对齐）方式 +属性值： + +- `flex-start` 从主轴的起点对齐（默认值） +- `flex-end` 从主轴的终点对齐 +- `center` 居中对齐 +- `space-around` 在父盒子里平分 +- `space-between` 两端对齐 平分 + +### align-items 属性：设置子元素在`侧轴`上的对齐方式 +属性值： + +- `flex-start` 从侧轴开始的方向对齐 +- `flex-end` 从侧轴结束的方向对齐 +- `baseline` 基线 默认同flex-start +- `center` 中间对齐 +- `stretch` 拉伸 + +### `flex`属性：设置子盒子的权重 +```html + + + +
+

伸缩比例:flex

+ +
+
+

伸缩比例:flex

+ +
+ + +``` + +### CSS Flexbox 可视化手册 +可视化的截图: +相关文章： + +- 【英文原版】 CSS Flexbox Fundamentals Visual Guide： + +- 【中文翻译】CSS Flexbox 可视化手册： + +### flex 相关的推荐文章 + +- flex 效果在线演示： + +- A Complete Guide to Flexbox | 英文原版： + +- CSS3 Flexbox 布局完全指南 | 中文翻译： + +### flex 相关的教程 + +- [后盾人 flex 教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html) + +## 技巧：使用 margin 自动撑满剩余空间 \ No newline at end of file