1. BFC演示一 BFC_演示1 2. BFC演示二 BFC_演示2 3. BFC演示三 BFC_演示3
1. 媒体查询—媒体类型 媒体查询_媒体类型 带带大师兄 2. 媒体查询—媒体特性 媒体查询_媒体特性 带带大师兄 3. 媒体查询——运算符 媒体查询_运算符 带带大师兄 4. 媒体查询—常用的阈值 媒体查询_常用的阈值 带带大师兄
1. 伸缩容器、伸缩项目 伸缩容器_伸缩项目 1 2 a b c 2. 主轴方向 主轴方向 1 2 3 3. 主轴换行方式 主轴换行方式 1 2 3 4 5 6 7 8 9 10 11 4. flex-flow flex-flow 1 2 3 4 5 6 7 8 9 10 11 5. 主轴对齐方式 主轴对齐方式 1 2 3 6. 侧轴对齐方式—一行 侧轴对齐方式_一行 1 2 3 7. 侧轴对齐方式—多行 侧轴对齐方式_多行 1 2 3 4 5 6 7 8 9 10 11 8. 元素的水平垂直居中 元素的水平垂直居中 9. 项目在主轴的基准长度 项目在主轴的基准长度 1 2 3 10. 伸缩项目—伸 伸缩项目_伸 1 2 3 11. 伸缩项目—缩 伸缩项目_缩 1 2 3 12. flex复合属性 flex复合属性 1 2 3 13. 项目的排序与单独对齐 项目的排序与单独对齐 1 2 3
多列布局案例 《抽象行为艺术大课堂》 【开始】唐僧师徒四人忙着赶路，吃不好、睡不好，走了几天，来到一个景色迷人的万寿山五庄观，见天色不早，就想在五庄观里住上一晚。五庄观里的两个童子听说他们是来自东土大唐要到西天取经的，连忙说∶“我家师父到元始天尊那里讲经去了，让我们在这里等您，请快快进屋。”原来，这童子的师父是镇元子，在五百年前的兰盆会上认识了唐僧前世金蝉子。临走时曾告诉两个童子要好好对待唐僧，并交待童子用观里的两颗宝贝人参果招待他。【结束】 【开始】两人摘了人参果，趁着唐僧的徒弟不在，偷偷拿来给唐僧吃。唐僧看见人参果就好像刚出生的婴儿一样，吓得浑身发抖，使劲摇手不敢吃。两个童子越是解释说∶“这是仙果，不是人！”唐僧仍是不信，让他们赶快端走。两个童子没有办法，只好端着人参果，回到房里。因为那人参果不能久放，否则吃下也不能长寿，于是两童子一人一个，分着吃了。说来也巧，这间房子正好和厨房挨着，两童子分吃人参果的事，八戒听得明明白白，看得清清楚楚，馋得直流口水，恨不得立刻吃一个。【结束】 【开始】一会儿，悟空放马回来，八戒连忙把刚才的事情告诉了师兄。悟空早就听说过人参果，只是没有吃过，于是就按照八戒说的，用了一个隐身的法术，偷偷溜进道房，拿走了二童子摘果用的金击子，露出了一颗人参果果，跑到后园去摘人参果。这人参果树有一千多尺高，非常茂盛，朝南的枝头上，露出了一颗人参果。悟空轻轻一跳一跳，跳上树枝，用金击子一敲，那果子就掉下来，悟空紧跟着跳下来，可是却找不到那果子。悟空把果园里的土地神抓来，露出了一颗人参果，问他为什么把人参果偷走。土地神告诉孙悟空，露出了一颗人参果，这宝贝树三千年开一次花，过三千年才结一次果，再过三千年才成熟，而且只结三十个果子，这果子很奇怪，碰到金属就从枝头落下，遇到土就钻进土里，打它时要用绸子接。【结束】 【开始】悟空送走土地神后，一手拿金击子敲，一手扯着自己的衣服接了三个果子。悟空回到厨房后，让八戒把沙僧叫来，三个人每人分一个。猪八戒性急，一口把果子吞下去，什么味道也没有尝出来，就想让悟空再去偷几个。悟空告诉他这人参果是一万年才结三十个果子，能吃到一个，就应该满足了，说完就把金击子放回了原处。猪八戒心里不高兴，嘴里不停地说，要是能再吃一个该有多好，不巧被两童子听见了，慌忙跑到园子里去数，发现少了四个果子，想一定是被唐僧师徒四人偷吃了，就怒气冲冲地来找唐僧讲理，说∶“你这些和尚，叫你吃，你不吃，为什么偏偏偷着吃？”【结束】 【开始】刚开始，悟空师兄三人怎么也不承认偷吃了人参果，后来，经唐僧的一番开导，觉得确实是自己不对，就承认偷吃了三个。两个童子却说是四个，还骂了许多难听的话。悟空火了，拔了一根毫毛变成一个假悟空站在那挨骂，自己跳上云头向后园飞去。悟空一进果园，就拿出金箍棒一阵乱打，又使出自己的神力，把树连根拔出，摔在地上，仙果从树上掉下来，又碰到了土就全部钻到土里去了。【结束】 【开始】悟空回到房中，收回毫毛，让两个童子随便骂，也不还口。两个童子见唐僧他们一句话也不说，就想，是不是树太高，叶子太密，自己数不清，又回到果园仔细看看。一到果园，见那情景，吓得他们半死，趴在地上，放声大哭∶“师父回来，可怎么说呀！”两个童子商量，先把唐僧留住，师父回来也好说一些，于是回到房中，假说果子一个也没有少，是自己刚才数错了，请唐僧他们原谅。【结束】 【开始】接着，他们给唐僧师徒们准备了很多饭菜，趁他们吃饭时，关上门，又用一把大铜锁，把门锁上。孙悟空早就有了主意，等到夜深人静的时候，用开锁法术，将一道道紧锁的大门都打开，拔毫毛变成两个瞌睡虫，扔在童子脸上，两童子便呼噜地睡着了。唐僧师徒四人这才趁着黑夜逃出来，向西天赶路去了。天亮时镇元子回到五庄观，发现两个童子被人施了法术，躺在那里睡大觉，连忙运用神功把他们叫醒。二童子一见师父回来了，便急忙跪下，请师父原谅他们，并把唐僧师徒偷吃仙果，毁坏仙树的事情告诉了师父。镇元子想这一定是孙悟空干的，便去找孙悟空讲理。【结束】
1. 基本使用 基本使用 2. 其他属性 其他属性 3. 复合属性 复合属性 4. 动画与过渡的区别 动画与过渡的区别 过渡 动画
1. 基本使用 基本使用 2. 高级使用 高级使用 ease（慢，快，慢） linear（匀速） ease-in（先慢再快） ease-out（先快再慢） ease-in-out（先慢再快再慢） step-start（不考虑过渡的时间，直接到终点） step-end（考虑过渡的时间，时间到了之后直接到终点） steps（分步过渡） 贝塞尔曲线 3. 过渡复合属性 过渡复合属性
1. 3D空间与景深 3D空间与景深 你好 2. 透视点的位置 透视点的位置 你好 3. 位移 位移 你好 4. 旋转 旋转 你好 5. 缩放 缩放 你好 6. 多重变换 多重变换 你好 7. 背部可见性 背部可见性 你好
1. 位移 位移 你好 你好 2. 缩放 缩放 你好 带带大师兄 3.旋转 旋转 你好 4. 扭曲 扭曲 你好 5. 多重变换 多重变换 你好 6. 变换原点 变换原点 你好
1. web字体 web字体 春风得意马蹄疾，不信人间有别离 春风得意马蹄疾，不信人间有别离 2. 字体图标—方式一 字体图标_方式一     3. 字体图标—方式二 字体图标_方式二 4. 字体图标—方式三 字体图标_方式三 <use xlink:href="#icon-guanzhu"></use> <use xlink:href="#icon-fuwuqi"></use> <use xlink:href="#icon-shouhaizhe"></use> <use xlink:href="#icon-gongjizhe"></use> 5. 字体图标—方式一—在线使用 字体图标_方式一_在线使用     6. 字体图标—方式二—在线使用 字体图标_方式二_在线使用     7. 字体图标—方式三—在线使用 字体图标_方式二_在线使用 <use xlink:href="#icon-guanzhu"></use> <use xlink:href="#icon-fuwuqi"></use> <use xlink:href="#icon-shouhaizhe"></use> <use xlink:href="#icon-gongjizhe"></use>
1. 线性渐变 线性渐变 默认情况（从上到下） 通过关键词调整线性渐变方向 通过角度调整线性渐变方向 调整线性渐变的区域 带带大师兄 2. 径向渐变 径向渐变 默认情况 通过关键词调整径向渐变圆的圆心 通过像素值调整径向渐变圆的圆心 通过关键字circle调整为正圆 通过像素值调整为正圆 调整径向渐变的区域 综合写法 3. 重复渐变 重复渐变 重复线性渐变 重复径向渐变