<div class="work-list"> <div class="list" v-for="item in 11" :key="item" @click="$router.push('/dataList')"> </div></div>.work-list { display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 1200px; height: 290px; &:after { content: ''; ** width: 332px;** //// 这个宽度为外面.listdediv的宽度 } .list { cursor: pointer; font-size: 24px; width: 332px; height: 75px; display: flex; align-items: center; }
注：CRMEB 附件包已放在文章最下方，须要的能够下载，心愿在互联网的路线上对你有所启发和帮忙 容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做 main start，完结地位叫做 main end；穿插轴的开始地位叫做 cross start，完结地位叫做 cross end。 我的项目默认沿主轴排列。单个我的项目占据的主轴空间叫做 main size，占据的穿插轴空间叫做 cross size。 容器属性flex-direction(属性决定主轴的方向) flex-wrap (换行) flex-flow (flex-direction 属性和 flex-wrap 属性的简写模式) justify-content（主轴上的对齐形式） align-items（在穿插轴上如何对齐） align-content（多根轴线的对齐形式） flex-direction 属性决定主轴的方向（即我的项目的排列方向）。 .box {flex-direction: row | row-reverse | column | column-reverse;}row（默认值）：主轴为程度方向，终点在左端。 row-reverse：主轴为程度方向，终点在右端。 column：主轴为垂直方向，终点在上沿。 column-reverse：主轴为垂直方向，终点在下沿。 默认状况下，我的项目都排在一条线（又称 "轴线"）上。flex-wrap 属性定义，如果一条轴线排不下，从而达到换行。 .box{flex-wrap: nowrap | wrap | wrap-reverse;}nowrap：（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。 例如： 4.justify-content 属性定义了我的项目在主轴上的对齐形式 ...
Flex 与 Bison 是为编译器和解释器的编程人员特地设计的工具： Flex 用于词法剖析（lexical analysis，或称 scanning），把输出宰割成一个个有意义的词块，称为记号（token）。Bison 用于语法分析（syntax analysis，或称 parsing），确定这些记号是如何彼此关联的。例如，如下代码片段： alpha = beta + gamma;词法剖析把这段代码合成为这样一些记号：alpha, =, beta, +, gamma, ;。接着语法分析确定了 beta + gamma 是一个表达式，而这个表达式被赋给了 alpha。 不过起初它们在其余应用领域被证实也十分无效。任何应用程序，尤其文本处理，只有在其输出中寻找特定的模式，或者它应用命令语言作为输出，都适宜应用 Flex 与 Bison。 例如，SQL 剖析： MySQL: C++ 词法剖析, Bison 语法分析 sql/sql_yacc.yyPostgreSQL: Flex 词法剖析, Bison 语法分析 parser/scan.lparser/gram.y在编译器构造中，词法分析器、语法分析器是编译器前端的次要组成部分。大多数编译器组织成三个次要的阶段：前端、优化器和后端。前端专一于了解源语言程序，将其转换为某种两头示意（IR）。而 Flex 与 Bison 就是给编译器前端设计出的工具。 起源bison 来源于 yacc，一个由 Stephen C. Johnson 于 1975 年到 1978 年期间在贝尔实验室实现的语法分析器生成程序。正如它的名字（yacc 是 yet another compiler compiler 的缩写）所暗示的那样，那时很多人都在编写语法分析器生成程序。Johnson 的工具基于 D. E. Knuth 所钻研的语法分析实践（因而 yacc 非常牢靠）和不便的输出语法。这使得 yacc 在 Unix 用户中十分风行，只管过后 Unix 所遵循的受限版权使它只可能被应用在学术界和贝尔零碎里。大概在 1985 年，Bob Corbett，一个加州伯克利大学的研究生，应用改良的外部算法再次实现了 yacc 并演变成为伯克利 yacc。因为这个版本比贝尔实验室的 yacc 更快并且应用了灵便的伯克利许可证，它很快成为最风行的 yacc。来自自由软件基金会（Free Software Foundation）的 Richard Stallman 改写了 Corbett 的版本并把它用于 GNU 我的项目中，在那里，它被增加了大量的新个性并演变成为以后的 bison。bison 当初作为 FSF 的一个我的项目而被保护，且它基于 GNU 公共许可证进行公布。 ...
如图所示：如果要用flex设置图中构造时：A：flexB：flex 宽度200pxC：flex flex：1E：宽度30pxD：flex：1此时，对D应用超出一行省略，显示...就会有问题，会一行展现，不会显示...解决：减少C：overflow: hidden;即刻完满解决！
第一题布局介绍 这个是经典的首页布局，垂直方向分为头,内容,尾组成，内容又分为导航和展现，其中展现内容须要自适应，须要随着窗口的大小发生变化 剖析垂直方向能够应用flex方向为column，因为两头内容项须要自适应，能够应用flex-grow指定增长自适应，内容外面又蕴含了导航和内容展现，其中内容展现是自适应，因而布局代码参考如下： <div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div>加上款式后 <html><head><style>.container{ width: 100%; height: 100%; display: flex; flex-direction: column;}.head{ height: 80px; background-color: green; margin: 5px;}.main{ flex-grow: 1; background-color: blue; margin: 5px;}.footer{ height:80px; background-color: purple; margin: 5px;}</style></head><body><div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div></body></html> 有了上中下三层，并且中间层依附flex-grow: 1可能随着高度增长增长，上和下放弃高度不变，增加nav和content款式 <html><head><style>.container{ width: 100%; height: 100%; display: flex; flex-direction: column;}.head{ height: 80px; background-color: green; margin:5px;}.main{ flex-grow: 1; display: flex; flex-direction: row;}.nav{ width: 100px; background-color: yellow; margin:5px;}.content{ flex-grow: 1; background-color: blue; margin:5px;}.footer{ height:80px; background-color: purple; margin:5px;}</style></head><body><div class="container"> <div class="head"></div> <div class="main"> <div class="nav"></div> <div class="content"></div> </div> <div class="footer"></div></div></body></html> ...
背景我的强项是后端开发，很少波及前端开发，一个很重要的起因是前端布局太妖，要实现一个居中须要各种奇技淫巧，而且每个浏览器实现还不一样，前端的布局就像谜一样，你都不晓得为啥就能够了，也不晓得为啥就不行。直到Flex布局的呈现前端的布局终于有点章法了，第一次接触Flex布局是从阮一峰的博客Flex 布局教程，阮一峰写博客的能力的确厉害，通俗易懂又直击要害，倡议想要入门Flex都去拜读一下。那么写这篇文章的目标是从一个后端的角度去看Flex布局，如果你看完阮一峰的博客后依然有一些疑难，那么能够读一读这篇文章。 Flex基本概念容器和我的项目Flex布局包含容器(flex container)和我的项目(flex item)，比方上面这段代码 <div class="content"> <div class="block"></div> <div class="block"></div></div>content这个div就是容器，block的div就是我的项目 两轴两个方向Flex外围就是靠两根轴进行布局的调整，其实就是程度和垂直两个方向，只不过在Flex中程度方向称为主轴，垂直方向称为穿插轴，每个方向各有start center end三个方位，其实就是右边两头和左边三个方位。 容器属性flex有以下几个属性能够作用于容器上 flex-directionjustify-contentalign-itemsflex-wrapflex-flowalign-content咱们一个个来 flex-directionflex-direction指定了Flex布局的方向，其实最外围就是指定了是横向排列还是纵向排列，flex-direction有以下取值 row（默认值）：横向排列row-reverse：反向横向排列column：纵向排列column-reverse：反向纵向排列如下代码 <html><head> <style> .container { display: flex; background-color: aliceblue; } .box1 { width: 80px; height: 80px; margin: 5px; background-color: orange; } .box2 { width: 40px; height: 100px; margin: 5px; background-color: orange; } .box3 { width: 100px; height: 30px; margin: 5px; background-color: orange; } </style></head><body><div class="container" style="flex-direction: row"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></div></body></html>flex-direction: row成果 flex-direction: row-reverse成果 ...
咱们在进行页面布局时，元素程度垂直居中是必备的布局形式之一，那么上面咱们来总结四种咱们常见的程度垂直居中的形式，你经常应用哪种呢？ html对立代码 <div class="out"> <div class="inner"> </div> </div>table-cell布局 css代码 .out{ width: 400px; height: 400px; background-color: pink; display: table-cell; vertical-align: middle; } .inner{ width: 200px; height: 200px; background-color: #bfa; margin: 0 auto; }相对定位+margin:auto; .out{ width: 400px; height: 400px; background-color: pink; position: relative; } .inner{ width: 200px; height: 200px; background-color: #bfa; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }相对定位+负magin或2d转换.out{ width: 400px; height: 400px; background-color: pink; position: relative; } .inner{ width: 200px; height: 200px; background-color: #bfa; position: absolute; left: 50%; top: 50%; /* 应用负margin与2d转换皆可 */ /* margin-left: -100px; margin-top: -100px; */ transform: translate(-50%,-50%); }flex布局 应用flex布局此时要留神兼容问题 ...
根本文件夹 设置视口标签及引入css初始化款式留神:css初始化款式必须位于css首页款式前面，否则容易出bug <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 引入视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入css首页款式及css初始化款式 --> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/normalize.css"> <title>携程网</title></head><body></body></html>body设置罕用款式 header局部注意事项：采纳固定定位，肯定要给最大宽度及最小宽度，利用弹性盒技术及如何让盒子居中对齐 css3伪元素的办法 焦点图 思路：容器外面放图像 图像的宽度设置为100% 部分导航 主导航局部 html <div class="nav"> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div>css /* 部分导航局部 */ .local-nav { display: flex; height: 64px; background-color: #fff; margin: 5px; border-radius: 8px; } .local-nav li { flex: 1; } .local-nav a { display: flex; flex-direction: column; align-items: center; font-size: 12px; } span[class^='local-nav-icon'] { width: 32px; height: 32px; background: url(../img/localnav_bg.png) no-repeat; background-size: 32px auto; margin: 5px; } span.local-nav-icon-icon1 { background-position: 0px 0px; } span.local-nav-icon-icon2 { background-position: 0px -32px; } span.local-nav-icon-icon3 { background-position: 0px -64px; } span.local-nav-icon-icon4 { background-position: 0px -96px; } span.local-nav-icon-icon5 { background-position: 0px -128px; } /* 主导航局部 */ .nav { overflow: hidden; border-radius: 8px; } div.nav_commen { display: flex; height: 88px; background-color: pink; } .nav_commen:nth-of-type(1) { background: -webkit-linear-gradient(left, #FA5A55, #FA994D); } .nav_commen:nth-of-type(2) { background: -webkit-linear-gradient(left, #4B90ED, #53BCED); } .nav_commen:nth-of-type(3) { background: -webkit-linear-gradient(left, #34C2A9, #6CD559); } .nav_commen .nav_items:nth-of-type(1) a { border: none; background: url(../img/hotel.png) no-repeat bottom center; background-size: 121px auto; } .nav_items { flex: 1; display: flex; flex-direction: column; } .nav_items a:nth-of-type(1) { border-bottom: 1px solid #fff; } .nav_items a { flex: 1; text-align: center; line-height: 44px; font-size: 14px; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, .2); } .nav_items:nth-of-type(-n+2) { border-right: 1px solid white; } .nav_commen:nth-of-type(2) { margin: 2px 0px; }留神:多应用flex技术选型 ...
明天的知识点 (2020.08.04) —— 第476天 (我也要出题)[html] 个别习惯把js写在</body>前，但有例外的状况吗？说说看[css] 应用flex实现一个自适应的九官格[js] Array(3)和Array(3, 4)的区别是什么？[软技能] 你晓得什么是硬编码吗？什么时候会用到硬编码呢？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]
当父盒子设置flex时<style> .box{ display: flex; height: 200px; width: 300px; border: 1px solid red; } .box > div{ width: 30px; background-color: pink; border: 1px solid blue; } </style></head><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div></body>后果 默认值此时出现如上，因为父盒子默认值如下： flex-direction: row //定义主轴为从左往右，即终点为左，起点为右，穿插轴为从上往下。justify-content： flex-start //定义所有子盒子从左往右排列，即从主轴终点到起点。align-items：stretch //定义所有子盒子沿着穿插轴，即与主轴垂直的轴，撑满 flex 容器。
今天的知识点 (2020.07.05) —— 第446天 (我也要出题)[html] 页面刷新时sessionStroage会变（会清空）吗？[css] flex与其他有什么不同，用它有什么好处？[js] 请使用js实现vue的diff算法[软技能] 说下你学习前端的历程吧《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！欢迎在 Issues 和朋友们一同讨论学习！ 项目地址：前端面试每日3+1【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star]
CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... CSS3最新选择器规范: https://www.w3.org/TR/selectors !---问题---! 1.CSS的全称是什么？Cascading Style Sheets 2.样式表的组成：CSS选择器 + CSS声明块：（一个个CSS声明：属性名+属性值） 3.浏览器读取编译CSS的顺序？CSS选择器的解析顺序：从右往左。这样做是为了减少无效匹配次数，从而匹配快、性能更优。 1.基本选择器*,html,.,#,空格,>,+,~,,（1）通配符选择器：* {}（2）元素选择器：body {}任何一个HTML元素（3）类选择器：. .list {}（4）ID选择器：# #list {}（5）后代选择器：空格 .list li{}（6）选择器的分组：用逗号,隔开各个选择器 h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符基本选择器扩展（7）子元素选择器：>，也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素。 #wrap > .inner {color: pink;}（8）相邻兄弟选择器：+，它只会匹配紧跟着的兄弟元素。 #wrap #first + .inner {color: #f00;}（9）通用兄弟选择器：~，它会匹配所有的兄弟元素(不需要紧跟)。 #wrap #first ~ div { border: 1px solid;}2.属性选择器（1）存在 和 值 属性选择器 [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。 （2）子串值属性选择器 [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。 [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。 [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。 [attr*=val] : 选择attr属性的值中包含字符串val的元素。 ...
这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比， 感受Flexbox布局带来的便捷开发体验。 1 垂直居中对齐不使用Flexbox <style> .main1 { position: relative; height: 200px; background: #8A469B; } .main1 div { display: block; width: 50%; height: 50%; background: #EA7F26; overflow: hidden; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .main1 div span { position: absolute; margin: 0; padding: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #EA7F26; } .main2 { height: 200px; display: flex; justify-content: center; align-items: center; background: #8A469B; } .main2 div { width: 50%; height: 50%; display: flex; justify-content: center; align-items: center; background: #EA7F26; } </style> <body> <h3>不使用Flexbox</h3> <div class="main1"> <div> <span> 侠课岛 </span> </div> </div> <h3>使用Flexbox</h3> <div class="main2"> <div> <span> 侠课岛 </span> </div> </div> </body>使用Flexbox ...
flex的简介在flex的容器中默认存在两条轴，水平主轴main axis和垂直交叉轴cross axis，这是默认的设置，不过我们可以通过设置将主轴的方向变成垂直方向，交叉轴变成水平方向。 在一个被设置为flex的容器中，每个直接子元素都被称之为flex item，每个flex item占据着主轴空间是main size，占据交叉轴上的空间叫做corss size; 需要注意的是：主轴和交叉轴的方向是可以设置的，默认的是主轴为水平方向、交叉轴为垂直方向；当然RN的表现和浏览器相反，默认主轴是垂直方向 flex容器为了实践一个flex布局，我们首先需要一个容器，也就是父元素，并指定为flex布局，这样，容器就具备了上述的flex的特性，其直接子元素也将成为flex item；设置为flex容器也很简单： .root{ display: flex | inline-flex; // 两个值都可以使用}上述的两个值可以分别生成一个块级flex容器盒子、一个行内flex容器盒子，简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。 设置为flex的容器，有以下六种可以设置的属性： flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content这里会对这几个属性进行分别的解释 flex-direction 设置flex容器的主轴方向flex-direction 决定主轴的方向(即项目的排列方向)， .root{ display: flex | inline-flex; // 两个值都可以使用 flex-direction: row | row-reverse | column | column-reverse; // 四个值可选}row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。row-reverse：对齐方式与row相反。[右对齐]column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。column-reverse：对齐方式与column相反。【底对齐】伪代码和伪展示分别对应如下的方式： <div class="root"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div><div>// flex-direction: row 水平靠左排列 第一个元素在左边【1，2，3 】// flex-direction: row-reverse 水平靠右排列 第一个元素在右边【 3，2，1】// flex-direction: column 垂直靠顶部排列 第一个元素在最顶部【 1， 2， 3， 】// flex-direction: column-reverse 垂直靠底部排列 第一个元素在最底部【 3， 2， 1， 】注意：该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列，不仅是对齐方向，还有是子元素的排列顺序，第一个元素或者order靠前的将会出现在对齐方向的第一个位置处 ...
翻译：疯狂的技术宅原文：https://www.freecodecamp.org/... 未经允许严禁转载 如果一张图片胜过千言万语 —— 那么动画呢？ Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解，我制作了这些动画演示。 注意 overflow: hidden 行为类型是默认值，因为 flex-wrap 还未设置。 为了获得更好的想法，你可以在这个页面上去尝试一下 Flex Layout Editor。 按默认 flex不会包装你的内容。它的工作原理很像 overflow: hidden。 可能你在学习 flex 时第一个接触到的就是 flex-wrap。 Flex Wrap让我们添加 flex-wrap:wrap 来看看它是如何改变 flex 项的行为的。 基本上，它只会扩展容器高度并将物品包裹起来。 注意：即便是未指定容器得高度（auto/unset）仍然会这样。 wrap 如果你有一些内容大小未知且数量也未知的项目，并且希望在屏幕上全部显示它们时，这是一种常见模式。 可以用 flex-direction: row-reverse 来反转项目的实际顺序。 row-reverse 这可以用于需要从右到左的顺序阅读的内容。 你可以 “float:right” 所有与 flex-end 在同一行上的项目。 这与 row-reverse 不同，因为它保留了项目的顺序。 Justify Contentjustify-content 属性负责 flex 项目的水平对齐。 它看起来很像前面的例子……除了项目的顺序。 flex-end 在以下示例中（justify-content: center），所有项目将自然地聚集到父容器的中心 —— 无论其宽度怎样。它与 position: relative; margin: auto 相似。 ...
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如万恶的垂直居中。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。(ie 10+支持flex布局，对于我现在的项目，因为使用cors解决跨域，所以对ie的支持也是ie10+，完美契合) 嘴上说着支持，但是ie从来不让我们失望，flex在ie下的bug和解决方法，有需自取。一、基础和术语1、flex布局是啥Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex;}行内元素也可以使用 Flex 布局。 .box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。当然如果你也使用了无敌的autoprefixer就不需要这么做了。 .box{ display: -webkit-flex; /* Safari */ display: flex;}还有一点需要注意的是设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 2、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 二、属性1、容器的属性容器可以设置的属性共有以下6个 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1.1 flex-directionflex-direction属性决定主轴的方向（即项目的排列方向）。 .box { flex-direction: row | row-reverse | column | column-reverse;}该属性的4个值分别表示： ...
常见的前端布局模型涵盖浮动、定位和弹性盒等 CSS 技术，其中浮动和定位技术往往在制作自适应布局页面时显得不够优雅——对于浮动布局，前后端分离时代很多时候我们并不知道每行会遍历显示多少个元素，每个元素会被内容撑到多宽，所以每个元素的宽度百分比是很难去控制的；对于定位布局，在垂直居中（尤其是多个兄弟元素的垂直居中）样式上会显得比较吃力。鉴于但不限于以上两点，如今越来越多的开发者正选择弹性盒技术（即 Flex），如果你对这项技术还比较生疏，Flex简易教程 就其基本语法、兼容性写法以及典型实现等给出介绍，希望能够帮到你。 Flex简易教程首发于我的个人博客 ，欢迎访问。
问题描述先来看一个需求场景： 上图中需要实现在水平方向上子元素之间、子元素和父容器边框之间的间距要相等。 实现的方法有很多，我们这里要讨论的是：如何简洁地使用 Flex 布局来实现？我这里采用的方法是：使用自动的外边距在主轴上对齐。 自动的外边距在主轴上对齐我们先来看一下 MDN 关于这个的解释： ... 自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。两边尽可能占据多的空间，块就被置于中间位置了。这很好理解：自动外边距将平分全部的剩余空间。下面就来尝试下这个方案吧，代码如下： <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>.container { display: flex; align-items: center; box-sizing: border-box; border: 2px dashed #7cb305; width: 600px; height: 200px; margin: auto;}.item { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100px; height: 100px; background: #722ed1; border-radius: 50%; color: #fff; font-size: 22pt;}然后看一下效果： 貌似有点不对。仔细看看子元素之间的间距比到边框的大，大概是子元素到边框的两倍，跟我们预期的效果有差异。按照 MDN 的解释来看，自动的外边距会等分剩余空间，但为什么会出现上图的情况呢？下面来谈一下我的理解。 主轴剩余空间“分配权重”与子元素自动外边距的关系这个分配权重关系没有在 MDN 上找到相关解释，纯粹是个人见解，我们可以这样来理解： 如果一个子元素在主轴的一个区域（或方向）上声明了 margin-*: auto，那么这个空间的分配权重 + 1如果另外一个子元素也在同样的区域（或方向）上有自动外边距的声明，那么分配权重再 + 1在这些声明了自动外边距的区域上，剩余空间根据分配权重来划分间距大小首先，这个理解显然是可以满足 MDN 上的解释。然后我们再来看看上图的情况怎么解释： ...
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。 我们要讲什么？这节还是聊天消息中遇到的问题，群组消息之头像，哈哈是不是感觉好熟悉，对的是我之前抛出的一个问题。我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。 flex 实现微信头像布局效果地址，本来是在JSRun的，但是大哥最近有点不稳定老连不上。如果你说什么Flex我不会啊，之前写的Flex的教程一发入魂。 看第一个效果（avatar3）一个在上，两个在下，想想有什么属性适合？flex-wrap 用来规定内容放不下，如何换行 nowrap(不换行)（默认值）wrap(换行，第一行在上方)（两个在上，一个在下）wrap-reverse(换行，第一行在下方)（两个在下，一个在上）是不是发现，效果对了，但是排序的头像错了？微信头像是加群时间升序的。不用担心，渲染的时候取反就ok，负负得正嘛。。头像等分，我是参照100px。一个90px,两个45px，三个30px。然后使用百分比实现。为什么要用百分比呢？因为你也不能保证所有地方都是100px吧。然后你是不是发现多行的时候，间距有问题？align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。设置一下就好了background-image 实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。这个效果的实现依赖于多重背景实现，background --MDN absolute 实现效果地址，写起来感觉比上一个方案要简单一点，但是，还是不好写。我只写了前几个。 文档流+after/before填充效果地址，基本上属于看到哪里不对改哪里，操作上来说，比上两个方案要简单一些。 其他思路需要换行的地方插入br标签，然后水平居中。垂直居中使用padding。方案同上垂直居中换成table-cell。等其他方法。grid方案优缺点方案理解程度位置控制描述flex易弱很好理解，思路清晰，但是无法对于设计稿精细微调背景图难强高可控性，但是代码复杂，不易理解修改绝对定位难强高可控性，但是代码复杂，不易理解修改，比背景图还是要好理解一点文档流中中可控性较好，但是代码无关联，易于修改。不推荐。grid中强 后记你有什么方案可以在评论区留言讨论
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意）定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值）定位+transform（不固定子级的宽高）flex html<div class="parent"> <div class="child"></div></div>css.parent{ width: 500px; height: 500px; margin: 0 auto; border: 1px solid gainsboro; display: flex; justify-content: center; align-items: center;}.child{ width: 200px; height: 200px; background: red;}定位+margin html<div class="parent"> <div class="child"></div></div>css.parent{ position: relative; width: 500px; height: 500px; margin: 0 auto; border: 1px solid gainsboro; }.child{ position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background: red; }定位+transform html<div class="parent"> <div class="child"> <span>我是子元素</span> </div></div>css.parent{ position: relative; width: 500px; height: 500px; margin: 0 auto; border: 1px solid gainsboro; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: red; }个人更喜欢flex ...
在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。 例如：打算一行放三个子元素 效果： 这看起来一点问题都没有，还挺好看的，但是如果下一行不够三个呢，只有两个的时候就会出现问题。 这样看起来特别恶心，中间空了一大块出来，看起来特别像一个bug，而不是我们要的跟上一行一个一个对齐的效果。 现在来解决这个问题，在这里提供两个方法： 伪类：after提供占位元素伪类方案 占位元素方案 效果
一.Flex布局是什么Flex是Flexible Box的缩写，意为弹性布局。任何容器都可以指定为Flex布局.备注以下：在文中，自我理解：主轴为X轴，交叉轴为Y轴 .box{ display:flex}之所以有这个布局出现，是因为布局的传统方案：基于盒状模型，依赖display属性，position属性，float属性对于那些特殊布局非常不方便. 行内元素若想使用Flex .box{ display:inline-flex }若是webkit内核的浏览器，例如safari，必须加上-webkit前缀.如果设置了flex，则float,clear,vergical-align三个属性将失去作用. 二.Flex的一些名词概念采用Flex布局的元素，被称为Flex容器（Flex container）,它的所有子元素自动成为容器成员，被称为Flex项目（Flex item） 容器默认存在两根轴：水平的主轴（main axis）和 垂直的交叉轴（cross axis）. 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目(Flex item)占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三.容器的属性3.1 flex-direction属性flex-direction属性决定主轴（在我自已的理解中，主轴即X轴）的方向（即项目的排列方向） .box{ flex-direction:row | row-reverse | column |column-reverse;} 属性解释：row(默认值):主轴为水平方向，起点在左端row-reverse:主轴为水平方向，起点在右端column:主轴为垂直方向，起点在上沿column:主轴为垂直方向，起点在下沿 3.2 flex-wrap属性默认情况下，项目(flex-item)都排在一条线上，flex-wrap属性定义，如果一条轴线排不下，如何换行. .box{ flex-wrap:nowrap | wrap | wrap=reverse;}属性解释：总共有12个块1.nowrap(默认值)：不换行 2.wrap:换行，且第一行在上方 3.wrap-reverse:换行，第一行在下方 3.3 flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row 与 nowrap 3.4 justify-content属性justify-content定义了项目在主轴上的对齐方式 .box{ justify-content:flex-start | flex-end | center | space-between | space-around}属性解释：1.flex-start:左对齐 2.flex-end:右对齐 ...
首先父盒子设置成display: flex子元素(行内元素)设flex: 1和text-align: right<div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> <span class="item-right">水平居右并垂直居中</span> </div>.flex-box { display: flex; flex-direction: row;}.flex-box div { width: 100px; height: 100px; background: #f9f9f9; margin-right: 10px;}.item-right { flex: 1; text-align: right; align-self: center;}完整的HTML如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .flex-box { display: flex; flex-direction: row; } .flex-box div { width: 100px; height: 100px; background: #f9f9f9; margin-right: 10px; } .item-right { flex: 1; text-align: right; align-self: center; } </style></head><body> <div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> <span class="item-right">水平居右并垂直居中</span> </div></body></html>
介绍这是关于 Flex 布局的实践，原想还水一点字数来介绍 Flex 相关属性，想想还是算了，阮一峰大佬的两篇文章推上：Flex 布局教程：语法篇Flex 布局教程：实例篇如何用 CSS 来增进对 Flex 的理解：CSS 搞事技巧：checkbox+label+selectorCSS 搞事技巧：hover+active常规布局1. 两栏布局左侧定宽，右侧自适应：源码<Layout-Layout :background-color=“bgColor” class=“flex-layout”> <div class=“flex__item”>left</div> <div class=“flex__item”>right</div></Layout-Layout>.flex-layout display flex.flex__item &:nth-child(1) background-color #c04851 // 玉红 flex 0 0 200px &:nth-child(2) background-color #440e25 // 古铜紫 flex 1 1 auto 原因解释：flex 是一个简写属性，用来设置 flex-grow、flex-shrink、flex-basis。一般来说让元素等高需要额外设置，而 flex 容器的存在一个默认属性值：align-items:stretch，它会帮助你，当然也会给你带来糟糕的体验。2. 三栏布局圣杯布局与双飞翼布局都是三栏布局，稍微介绍一下：圣杯布局关键是父元素设置 padding，接着子元素通过 margin 负值以及定位；双飞翼布局关键是中间一栏多了子元素并设置 margin，然后侧边栏使用 margin 负值。而通过 flex 实现则简单多了： 源码<Layout-Layout :background-color=“bgColor” class=“holy-grail”> <div class=“flex__content”>content</div> <div class=“flex__nav”>nav</div> <div class=“flex__side”>side</div></Layout-Layout>.holy-grail display flex .flex__content flex 1 1 auto background-color #009999 .flex__nav, .flex__side flex 0 0 120px .flex__nav order -1 background-color #1D7373 .flex__side background-color #33CCCC原因解释：中间一栏为核心，所以需要优先渲染，DOM 结构也就放在了前面，主要是使用 order 属性将 nav 放置到前方。常见布局除了整体结构用到这些布局以外，对于一些组件也常常需要一些简单的布局。1. 导航栏模仿示例：实现效果图：源码<header class=“header”> <div class=“header__avatar”></div> <div class=“header__title”>Title</div> <div class=“header__more”></div></header>.header height 100px width 100% background-color #f9f1db // 蚌肉白 display flex align-items center > * margin 0 10px &__avatar, &__more flex 0 0 80px height 80px border-radius 50% &__avatar background-color #FFAC40 &__title color #FF9000 &__more margin-left auto background-color #A65E00原因解释：此处主要是利用了 margin-auto 来占据剩余的空间，就与我们使用 margin: 0 auto 来获取水平居中一样。2. 输入框模仿示例：实现效果图：源码<Layout-Layout align-center justify-center :background-color=“bgColor”> <div class=“input-group”> <span class=“title” @click=“message = !message” v-if=“message”>Message</span> <input type=“text” class=“input-text”> <span class=“icon” @click=“icon = !icon” v-if=“icon”></span> </div></Layout-Layout>.input-group flex 0 0 75% height 40px border 2px solid red border-radius 4px display flex align-items center > * box-sizing border-box .input-text font-size 20px padding-left 10px height 100% flex 1 outline none border none .icon flex 0 0 24px height 24px border-radius 50% background-color #648e93 // 晚波蓝原因解释：这也是一个常规的三栏布局，关键是 .input-text 的 flex: 1 属性可以占据剩余空间，当其余配件不存在时也可以相应的扩张。3. 卡片实现效果图：源码<Layout-Layout :background-color=“bgColor” class=“flex-card”> <header class=“header”></header> <article class=“article”> <div class=“article__item”>1</div> <div class=“article__item”>2</div> <div class=“article__item”>3</div> <div class=“article__item”>4</div> <div class=“article__item”>5</div> <div class=“article__item”>6</div> </article> <footer class=“footer”></footer></Layout-Layout>.flex-card display flex flex-flow column nowrap .header flex-basis 80px background-color #4E51D8 .footer flex-basis 50px background-color #00B060 .article flex auto background-color #FF9000 display flex flex-flow row wrap align-content center justify-content space-around &__item width 28% height 50px box-shadow 0 2px 4px rgba(255, 255, 255, .4), 3px 0 5px rgba(0, 0, 0, .6)原因解释：将主轴修改为垂直方向，header 和 footer 因为 article 的 flex:auto 属性被分别顶至上方和下方，可以避免 absolute 的滥用。在中间使用 align-content 区别于 align-items ，可以将多行元素视为一个整体。4. 瀑布流实体效果：在编译时会赋予 CSS 颜色，所以直接刷新页面是不可行的，只有重新保存代码进行编译可以变更颜色。源码<Layout-Layout :background-color=“bgColor” class=“flex-flow”> <div class=“flow-column” v-for=“m in 5” :key=“m” > <div class=“flow-item” v-for=“n in 8” :key=“n” ></div> </div></Layout-Layout>$flow-columns = 5; // flow 的列数$flow-items = 8; // flow 每列的个数// 函数randomColor(min, max) { return floor(math(0, ‘random’) * (max - min + 1) + min);}randomPx(min, max) { return floor(math(0, ‘random’) * (max - min + 1) + min) px;}.flex-flow { display: flex; justify-content: space-between; overflow: hidden; .flow-column { display: flex; flex-direction: column; flex: 0 0 18.6%; .flow-item { width: 100%; margin: .1rem 0; } }}for column in (1 .. $flow-columns) { .flow-column:nth-child({column}) { for item in (1 .. $flow-items) { .flow-item:nth-child({item}) { flex: 0 0 randomPx(30, 100); background-color: rgb( randomColor(0, 255), randomColor(0, 255), randomColor(0, 255) ); } } }}原因解释：flex 实现瀑布流还是比较简单的。友情提示：当使用 stylus 时还是加上标点符号吧，找编译错误花了我近二十分钟。最后合并多个 commit在 push 前需要合并 commit：git log –onelinegit rebase -i xxxxxxxgit log –onelinegit status git push初步地把 CSS 稍微过了一遍，下一步继续完善那个简陋的 简历 了…参考资料VSCode 的友情提示Vuetify ...
如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局1、网格布局1.1、基本网格布局最简单的网格布局，就是平均分布。HTML代码如下。<div class=“Grid”> <div class=“Grid-cell”>1/2</div> <div class=“Grid-cell”>1/2</div> </div> <div class=“Grid”> <div class=“Grid-cell”>1/3</div> <div class=“Grid-cell”>1/3</div> <div class=“Grid-cell”>1/3</div> </div>CSS代码如下。.Grid { display: flex;}.Grid-cell { flex: 1; background: #eee; margin: 10px;}这里最关键的就是flex:1使得各个子元素可以等比伸缩1.2、百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。HTML代码如下。<div class=“Grid”> <div class=“Grid-cell col2”>50%</div> <div class=“Grid-cell”>auto</div> <div class=“Grid-cell “>auto</div></div><div class=“Grid”> <div class=“Grid-cell”>auto</div> <div class=“Grid-cell col2”>50%</div> <div class=“Grid-cell clo3”>1/3</div></div>CSS代码如下。.col2 { flex: 0 0 50%;}.col3 { flex: 0 0 33.3%;}这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素占据的空间。2、圣杯布局圣杯布局（Holy Grail Layout：）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。HTML代码如下。<div class=“container”> <header class=“bg”>header</header> <div class=“body”> <main class=“content bg”>content</main> <nav class=“nav bg”>nav</nav> <aside class=“ads bg”>aside</aside> </div> <footer class=“bg”>footer</footer> </div>CSS代码如下。.container { display: flex; flex-direction: column; min-height: 100vh;}.body { display: flex; flex: 1;}header,footer { flex: 0 0 100px;}.content { flex: 1;}.ads,.nav { flex: 0 0 100px;}.nav { order: -1;}.bg { background: #eee; margin: 10px;}@media (max-width: 768px) { .body { flex-direction: column; flex: 1; } .nav, .ads, .content { flex: auto; }}这里面需要注意的点有container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列header,footer的高度可以通过flex: 0 0 100px来控制nav可以通过order:-1来调整位置通过@media (max-width: 768px)来调整小屏幕的页面结构3、侧边固定宽度侧边固定宽度，右边自适应html代码如下。<div class=“container1”> <div class=“aside1 bg”>aside</div> <div class=“body1”> <div class=“header1 bg”>header</div> <div class=“content1 bg”>content</div> <div class=“footer1 bg”>footer</div> </div></div>CSS代码如下。.bg { background: #eee; margin: 10px;}.container1 { min-height: 100vh; display: flex;}.aside1 { /* flex: 0 0 200px; */ flex: 0 0 20%;}.body1 { display: flex; flex-direction: column; flex: 1;}.content1 { flex: 1;}.header1, .footer1 { flex: 0 0 10%;}这个和上面的基本差不多就不做解释了。4、流式布局每行的项目数固定，会自动分行。html代码如下<div class=“container2”> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div></div>css代码如下.container2 { width: 200px; height: 150px; display: flex; flex-flow: row wrap; align-content: flex-start;}.item { box-sizing: border-box; background: #eee; flex: 0 0 20%; height: 40px; margin: 5px;}这里主要使用到了flex-flow: row wrap使得子元素水平排列，并且换行总结这是我简单总结的一些布局。如有错误，欢迎指正。更多系列文章 ...
在没有接触Flex之前一直使用float、display、position 。说实话用起来非常恶心。当使用Flex时，我们可以简洁优雅实现复杂的页面布局1、Flex 布局？在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。.container { display: flex | inline-flex; //可以有两种取值}分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。注意：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。1.1、容器的属性容器有以下6个属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1.1.1 、flex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse;}默认值：row，主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿;column-reverse：主轴为垂直方向，起点在下沿;1.1.2、flex-wrap: 决定容器内项目是否可换行默认情况下，项目都排在主轴线上不换行，但使用 flex-wrap 可实现项目的换行。.container { flex-wrap: nowrap | wrap | wrap-reverse;}nowrap (默认值)不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。wrap：项目主轴总尺寸超出容器时换行，第一行在上方wrap-reverse：换行，第一行在下方1.1.3、flex-flow: flex-direction 和 flex-wrap 的简写形式.container { flex-flow: <flex-direction> || <flex-wrap>;}默认值为: row nowrap;1.1.4、justify-content：定义了项目在主轴的对齐方式。.container { justify-content: flex-start | flex-end | center | space-between | space-around;}flex-start(默认值):左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。1.1.5、align-items: 定义了项目在交叉轴上的对齐方式.container { align-items: flex-start | flex-end | center | baseline | stretch;}建立在主轴为水平方向时测试，即 flex-direction: row默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px。flex-start：交叉轴的起点对齐,假设容器高度设置为 100px，而项目分别为 30px,60px, 100px, 则如上图显示。flex-end：交叉轴的终点对齐center：交叉轴的中点对齐baseline: 项目的第一行文字的基线对齐1.1.6、align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}当我们 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。当我们 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候就需要去设置多条轴线之间的对齐方式了。建立在主轴为水平方向时测试，即 flex-direction: row,flex-wrap: wrap;默认值为 stretch平分容器的垂直方向上的空间。如果没有设置高度将会撑开整个容器。flex-start：轴线全部在交叉轴上的起点对齐flex-end：轴线全部在交叉轴上的终点对齐center：轴线全部在交叉轴上的中间对齐space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。到这里关于容器上的所有属性都讲完了，接下来就来讲讲关于在 flex item 上的属性。1.2、Flex项目的属性主要有以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self1.2.1、order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>;}1.2.2、 flex-grow: 定义项目的放大比例.item { flex-grow: <number>;}如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。1.2.3、flex-shrink属性：定义了项目的缩小比例.item { flex-shrink: <number>;}默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。这里可以看出，虽然每个项目都设置了宽度为 50px，但是由于自身容器宽度只有 200px，这时候每个项目会被同比例进行缩小，因为默认值为 1。注意：如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。1.2.4、 flex-basis属性:定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */}默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。当 flex-basis 值为 0 % 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。1.2.5、flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]}该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。关于 flex 取值，还有许多特殊的情况，可以按以下来进行划分：当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：.item {flex: 1;}.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）.item-1 {flex: 0%;}.item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}.item-2 {flex: 24px;}.item-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px;}当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：.item {flex: 2 3;}.item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%;}1.2.6、align-self属性：允许单个项目有与其他项目不一样的对齐方式单个项目覆盖 父元素的align-items 定义的属性默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}这个跟 align-items 属性时一样的，只不过 align-self 是对单个项目生效的，而 align-items 则是对容器下的所有项目生效的。容器 align-items 设置为 flex-start，而第三个子元素的align-self: flex-end;更多系列文章请看 ...
FlexBox学习 弹性布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维布局：一个 flexbox一次只能处理一个维度上的元素布局，一行或者一列。flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]FlexBox的两根轴线当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 -direction 定义，另一根轴垂直于它。使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。主轴 flex-directionrowrow-reversecolumncolumn-reverse<!DOCTYPE html><html lang=“en”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <title>FlexBox学习</title> <style> .container { display: flex; flex-direction: row; } .container-item { height: 100px; width: 100px; margin: 10px; border: 1px solid #dddddd; background-image: linear-gradient(-90deg, #3860f4 0%, #5f87f8 100%); } </style> </head> <body> <div class=“container”> <div class=“container-item”>1</div> <div class=“container-item”>2</div> <div class=“container-item”>3</div> <div class=“container-item”>4</div> <div class=“container-item”>5</div> <div class=“container-item”>6</div> </div> </body></html>交叉轴交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。起始线和终止线flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以不再假设一行文字是从文档的左上角开始向右书写,新的行也不是必须出现在另一行的下面。 如果 flex-direction 是 row ,那么主轴的起始线是左边，终止线是右边。https://developer.mozilla.org…Flex 容器CSS采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，把一个容器的 display 属性值改为 flex 或者 inline-flex。容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为:元素排列为一行 (flex-direction 属性的初始值是 row)。元素从主轴的起始线开始。元素不会在主维度方向拉伸，但是可以缩小。元素被拉伸来填充交叉轴大小。flex-basis 属性为 auto。flex-wrap 属性为 nowrap。这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。用flex-wrap实现多行Flex容器flexbox是一维模型，但可以使我们的flex项目应用到多行中。 在这样做的时候，应该把每一行看作一个新的flex容器。 任何空间分布都将在该行上发生，而不影响该空间分布的其他行。.container { display: flex; flex-direction: column-reverse; flex-flow: wrap; } .container-item { height: 100px; margin: 10px; width: 40%; border: 1px solid #dddddd; background-image: linear-gradient(-90deg, #3860f4 0%, #5f87f8 100%); }简写属性 flex-flow可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。flex 元素上的属性在考虑这几个属性的作用之前，需要先了解一下 布局空白 available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的布局空白的行为。同时，布局空白对于 flex 元素的对齐行为也是很重要的。假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的布局空白。在默认情况下， flexbox 的行为会把这 200px 的空白留在最后一个元素的后面。如果期望这些元素能自动地扩展去填充满剩下的空白，那么我们需要去控制布局空白在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。flex-grow 定义弹性盒子元素的扩展比率。flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的布局空白（available space）。如果有其他元素也被允许延展，那么会各自占据布局空白的一部分。如果我们给上例中的所有元素设定 flex-grow 值为1， 容器中的布局空白会被这些元素平分。它们会延展以填满容器主轴方向上的空间。flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为200px 中的 100px）, 另外两个元素各占有1/4（各50px）。flex-shrink 定义弹性盒子元素的收缩比率flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。flex-basis 定义弹性盒子元素的默认基准值flex-basis 定义了该元素的布局空白（available space）的基准值。 该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。元素间的对齐和空间分配Flexbox的一个关键特性是能够设置flex元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。align-itemsalign-items 属性可以使元素在交叉轴方向对齐。stretchflex-startflex-endcenterjustify-contentjustify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.stretchflex-startflex-endcenterspace-aroundspace-between水平居中.container { display: flex; justify-content: center; } https://www.html.cn/archives/… ...
废话不多说！flex-内容宽度等分//css .box { display: flex; } .box div { flex: 1; border: 1px solid red; }//html <div class=“box”> <div>1</div> <div>2</div> <div>3</div> </div>左右布局，一侧定宽，一侧自适应撑满//css html, body { height: 100% } .main { display: flex; height: 100%; } .left, .right { height: 100%; border: 1px solid red; box-sizing: border-box; } .left { width: 300px; } .right { width: 100%; }//html <div class=“main”> <div class=“left”>固定宽度300px</div> <div class=“right”>自适应宽度</div> </div>未知高宽上下左右居中//css html, body { height: 100% } .main { display: flex; height: 100%; justify-content: center; align-items: center } .box { width: 300px; border: 1px solid red; } //html <div class=“main”> <div class=“box”>未知高度上下左右居中</div> </div>这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。 ...
本文主要记录一些自己遇见的flex布局案例简单回顾一下flex常用属性6个常用的容器属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。flex-direction属性决定主轴的方向（即项目的排列方向）flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。6个常用的元素属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。(如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。)flex：1 等价于 flex-grow: 1flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。)order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。关于更详细的基础知识，放几个我收藏的链接吧Flex-弹性布局原来如此简单！30 分钟学会 Flex 布局演示：Flexbox演示站1.上中下布局，中间自适应 <div class=“flexContainer”> <header class=“header”>header：height = 100px</header> <main class=“main”>conent：height = auto</main> <footer class=“footer”>footer：height = 100px</footer> </div>.flexContainer{ display: flex; height: 100%; //要指定高度 flex-direction: column; //布局从上到下排列} .header,.footer{ font-size: 18px; display: flex; // 这是是为居中 文字的 justify-content: center; // 文字 水平居中 align-items: center; // 文字垂直居中} .header{ height: 100px; background: #665aa4;} .main{ flex-grow: 1; // 不知道和 flex: 1 有啥区别 text-align: center; background: #3dc95d;} .footer{ height: 100px; background: #fc430b;} 2.实现多个元素宽度平分父级,且可配置一行最多展示多少个元素<main class=“main”> conent：height = auto <div class=“main-body”> <div class=“main-item”>1</div> <div class=“main-item”>2</div> <div class=“main-item”>3</div> <div class=“main-item”>4</div> <div class=“main-item”>5</div> <div class=“main-item”>6</div> <div class=“main-item”>7</div> </div></main>//styl,我就不给大家手动转成css了.main flex 1 text-align: center background: #3dc95d .main-body display: flex //关键 flex-wrap: wrap //关键 .main-item flex-grow:1 //关键 基础知识介绍过了 再来一边 定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大。 min-width: 30% //关键 width: 30%跟flex-basis:30%;（flex: 0 0 30%）作用是相同的，我是这么理解 max-width: 100% //关键 min-width 和 max-width 只是让元素变得更响应而已 margin: 15px height: 30px border: 1px red solid background: #ccc text-align: center完全响应式的，你可以改变游览器窗口的宽度，也可以改变.main-item个数思路来源：记工作中遇到一件…3.圣杯布局<div class=“flexContainer”> <main class=“main”>conent：height = auto</main> <header class=“header”>header：height = 100px</header> <footer class=“footer”>footer：height = 100px</footer></div>.flexContainer{ display:flex; height:100vh;}.footer{ width:50px; background #CCC}.main{ flex-grow:1; background #3dc95d}.header{ width 150px; background #665aa4 order:-1;//使得order处于最左侧(html中main写在了最前，以利于优先加载主内容区)}4.每行间距均匀分配，并自动换行的列表项<div class=“container”> <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 class=“item”>6</div></div>.container{ display: flex; justify-content: space-around; //使主轴方向的多余空间平均分配在两两item之间 flex-wrap: wrap; // 子元素每行填满时会自动换行}.item{ width: 30%; //（绝大多数情况）同 flex: 0 0 30%; min-width: 400px; // 每一个子元素最小宽度 max-width: 420px; // 每一个子元素最大宽度 min-height: 360px;} 在使用了justify-content:space-around、justify-content: center 或者 justify-content: space-between后有个问题，看最后一张图最后一排，我想让它按着顺序排怎么办解决方法一// 在列表结尾增加一系列空标签，// 数量我觉得最好是 一行最大容量 - 1// 因为这子元素个数可能是不确定的<div class=“item”></div><div class=“item”></div>//在css里做如下定义：//根据自己实际情况，有时候可以不添加布局上也不会有影响.item:empty { height: 0; min-height: 0px; // 当然要记得把这些元素重置 border: none; // 这些 padding: 0…….}// 当然你也可以不用 .item这个类名，随便换一个//.fix {// width: 30.333333%;// height:0;// margin: 0;//}缺点就是加了额外空标签效果还算满足要求解决方法二：.container{ display: flex; flex-wrap: wrap; background: red;}.item{ box-sizing: border-box; width: 30.333333%; margin: 10px 1.5%; background:#eee; height: 120px;}这种方法也能实现响应式，但是如果你.item的子元素的宽度不能小于或大与某个固定宽度，换句话说就是设置min-width或max-width就会出现不能均匀沾满一行的情况这是目前我知道的两种好用的方法，根据自己的实际情况选择吧，如果你有idea欢迎留言讨论5.每个区块之间用竖线分割，如图<!–html 结构–><!–电压等级分布–><div class=“pieItem”> <div class=“pieTitle”> <span> 电压等级分布 </span> </div> <!–饼图–> <div class=“pieDiv” id=“voltageLevel”></div></div><!–行业分类分布–><div class=“pieItem”> <div class=“pieTitle”> <span> 行业分类分布 </span> </div> <!–饼图–> <div class=“pieDiv” id=“category”></div></div><!–电源数量分布–><div class=“pieItem”> <div class=“pieTitle”> <span> 电源数量分布 </span> </div> <!–饼图–> <div class=“pieDiv” id=“powerSupply”></div></div>// stylus.pieItem width: 33.333% min-width: 400px max-width: 50% box-sizing: border-box .pieDiv height: 360px &:not(:nth-child(3n)) .pieDiv::after content: ’’ width: 1px position: absolute height: 360px top 50% right 0 transform: translate(0, -50%) background: #ccc background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ddd), to(rgba(0,0,0,0))) ...
当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位html<div class=“dui-container”><header>Header</header><main>Content</main><footer>Footer</footer></div>CSS.dui-container{position: relative;min-height: 100%;}main {padding-bottom: 100px;}header, footer{line-height: 100px;height: 100px;}footer{width: 100%;position: absolute;bottom: 0}查看效果方法二：在主体content上的下边距增加一个负值等于底部高度html<header>Header</header><main>Content</main><footer>Footer</footer>CSShtml, body {height: 100%;}main {min-height: 100%;padding-top: 100px;padding-bottom: 100px;margin-top: -100px;margin-bottom: -100px;}header, footer{line-height: 100px;height: 100px;}查看效果方法三：将页脚的margin-top设为负数html<header>Header</header><main>Content</main><footer>Footer</footer>CSSmain {min-height: 100%;padding-top: 100px;padding-bottom: 100px;}header, footer{line-height: 100px;height: 100px;}header{margin-bottom: -100px;}footer{margin-top: -100px;}查看效果方法四： 通过设置flex，将footer的margin-top设置为autohtml<header>Header</header><main>Content</main><footer>Footer</footer>CSSbody{display: flex;min-height: 100vh;flex-direction: column;}header,footer{line-height: 100px;height: 100px;}footer{margin-top: auto;}查看效果方法五： 通过函数calc()计算内容的高度html代码<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码main{min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */}header,footer{height: 100px;line-height: 100px;}查看效果方法六： 通过设置flexbox，将主体main设置为flexhtml<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码body{display: flex;min-height: 100vh;flex-direction: column;}main{flex: 1}查看效果方法七： 使用grid布局Html代码<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码html {height: 100%;}body {min-height: 100%;display: grid;grid-template-rows: auto 1fr auto;}.footer {grid-row-start: 3;grid-row-end: 4;}查看效果方法八： display-*html<header>Header</header><main>Content</main><footer>Footer</footer>CSSbody { min-height: 100%; display: table; width: 100%;}main { display: table-row; height: 100%;}查看效果 ...
一.flex属性1.父容器常用属性六个:flex-direction:row|row-reverse|column|column-reverse;主轴的方向(项目的排列方向)flex-wrap:wrap|nowrap|wrap-reverse;换行方式flex-flow是flex-direction和flex-wrap的结合justify-content:flex-start|flex-end|center|space-between|space-around;//主轴方向的对齐方式align-items:flex-start|flex-end|center|basline|stretch;//交叉轴方向的对齐方式align-content:flex-start|flex-end|center|space-between|space-around|stretch(多个主轴的排序方式)2.子容器(子项目)常用属性六个:order:<integer>;数值越排序越靠前align-self:auto | flex-start | flex-end | center | baseline | stretch;允许单个项目和整体项目不一样的对齐方式flex-group:<number>;默认值是0,即存在剩余空间也不放大;如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。flex-shrink:<number>;默认值是1,如果该项目空间不足,将等比例缩小;如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-basis:<length> | auto; / default auto /剩余空间没分配前,子项目占据的主轴空间。flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值是0,1，auto;flex:1;指flex-grow:1;flex-shrink:1;flex-basis:auto;
flex布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝APP为例。看了网上很多关于flex布局，有些写得太乱了，也太复杂了。写一个导航栏，5个导航，用普通得写法是。<!DOCTYPE html><html><head> <title>Flex布局</title> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”> <style type=“text/css”> *{margin:0px;padding: 0px;list-style: none;} .con{ height: 50px; text-align: center; background: #f00; } .con li{ width: 20%; border:1px solid #000; box-sizing: border-box; height: 50px; float: left; line-height: 50px; } </style></head><body><ul class=“con”><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>就没每个<li></li>按照20%平均分，左浮动即可。这种方法是可以实现得，但后面再增加<li></li>，例如7个<li></li>，那么是下面这样的。很明显父级元素放不下了，只能被挤下去了。那么，用flex布局怎么做呢？有何优点？<!DOCTYPE html><html><head> <title>Flex布局</title> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”> <style type=“text/css”> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; background: #f00; } .con li{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; } </style></head><body><ul class=“con”><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>效果是和上面一样的但是当我新增7-10个，都不会被挤下去，而是直接在父级元素上面进行排列并重新划分宽度。如果要加一个margin-right呢？这个也容易啊，但是最后一个<li></li>不贴边，我们要给最后一个<li></li>单独加一个style。<!DOCTYPE html><html><head> <title>Flex布局</title> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”> <style type=“text/css”> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; } .con li{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; margin-right: 3px; background: #f00; } </style></head><body><ul class=“con”><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li style=“margin-right: 0;">9</li></ul></body></html>下面再说一个不均等的。如上图，有三个<li></li>，每个<li></li>都是不均等的，在父级元素用普通的方法就是给不同的百分比。那么用flex布局，就是这样：<!DOCTYPE html><html><head> <title>Flex布局</title> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”> <style type=“text/css”> *{margin:0px;padding: 0px;list-style: none;} .con{ display: flex; height: 50px; text-align: center; } .con .li_1{ flex: 1; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } .con .li_2{ flex: 2; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } .con .li_3{ flex: 3; text-align: center; line-height: 50px; border:1px solid #000; box-sizing: border-box; background: #f00; } </style></head><body><ul class=“con”><li class=“li_1”>1</li><li class=“li_2”>2</li><li class=“li_3”>3</li></ul></body></html>上面给每个<li></li>用flex划分，一共分6份，li_1占1/6，那就是flex:1;li_2占2/6，那就是flex:2;这个容易理解吧。下面接着说水平排列方式：在父级元素使用justify-contentjustify-content：space-around;/左右平均分布/justify-content：center;/居中/justify-content：space-between;/两端分布/justify-content：flex-start;/居左/justify-content：flex-end;/居右/Author：TANKINGWeChat:likeyunba520web：http://likeyunba.com ...
基本介绍特点flexbox是一种css display类型，提供一种更简单高效的布局方式；flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距；flexbox对响应式有很好的支持；工作原理设置父元素的display属性为flex，则子元素都变成flex item，由此可以控制子元素的排列方式、尺寸、间距等；兼容性Flex Container先来看一个最简单的flex示例，外层div设置display: flex成为一个flex container，内部的3个div则自动变为flex item：html:<div class=“flex-container”> <div class=“box one”></div> <div class=“box two”></div> <div class=“box three”></div></div>css:.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }.box{ height: 100px; min-width: 100px; }.one{ background: pink; }.two{ background: lightgreen; }.three{ background: skyblue; }效果：效果与浮动布局类似，但是如果用浮动实现的话需要写更多的代码，而flex一行就搞定了。1. Justify Content如果我们想让flex item居中排列呢，我们可以给flex container增加一个css属性：justify-content，它控制flex item在主轴方向（main axis，由flex-drection决定，默认为水平方向）上的对齐方式：.flex-container{ … justify-content: center;}效果如图：除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值，具体效果请自行实验。2. Align Items实现了flex方向的居中后，垂直于主轴方向（cross axis）的居中可以用align-items实现。css：.flex-container{ max-width: 960px; margin: 0 auto; display:flex; justify-content: center; height: 200px; background-color: white; align-items: center;}效果：使用flex解决了以往css垂直居中实现复杂的问题！相应的，align-items还有flex-start, flex-end等其他值。3. Flex Directionflex-direction决定了主轴方向即flex item排列方向，除了默认的row方向之外，还可以纵向、反向（row-reverse/column-reverse）排列flex item：css：.flex-container{ … flex-direction: column; align-items: center;}效果：4. Flex Wrap如果我们不想在窗口变窄的情况下压缩flex item，而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap：.flex-container{ max-width: 960px; margin: 0 auto; display:flex; flex-wrap: wrap;}.box{ height: 100px; min-width: 300px; flex-grow: 1;}当我们压缩窗口的时候，效果如下：flex wrap还有一个值：wrap-reverse，设置该值后，被wrap的元素会排到其他元素上面：由此可见，flex wrap一定程度上可以取代media query了。5. Flex Row最后，flex-direction和flex-wrap可以合并为一个属性flex-flow，比如：flex-flow: row-reverse wrap。Flex Item1. Flex Grow在上面所有的例子中，三个flex item只占据了flex container小部分空间，如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义，grow意味着增长，用于控制flex item的尺寸的伸展。将css修改为:.box { height: 100px; min-width: 100px; flex-grow:1; }效果：可以看到三个子元素平分了父元素的空间，因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢？css：.box{ height: 100px; min-width: 100px; }.one{ background: pink; flex-grow: 1; }效果：此时two和three的大小不变，而one占据了父元素剩余空间。如果将one的flex-grow改为2，而two和three改为1，我们看看会发生什么：css:.box{ height: 100px; min-width: 100px; flex-grow:1; }.one{ background: pink; flex-grow: 2; }效果：可以看到one的宽度变成了two和three的两倍，因此flex item的尺寸和flex-grow的值成正比。2. Flex Shrink与flex-grow相对的是flex-shrink， flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。请看示例：修改box的宽度为flex container的1/3，one、two、three的flex-shrink分别为1，2，3：.box{ height: 100px; width: 320px; }.one{ background: pink; flex-shrink: 1; }.two{ background: lightgreen; flex-shrink: 2; }.three{ background: skyblue; flex-shrink: 3; }当窗口正常尺寸时，效果如下：当我们压缩窗口使其变得更窄后，效果如下：当flex container宽度变为540px后，子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px，所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px，70 : 140 : 210 = 1 : 2 : 3，与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系，只不过当初始尺寸一样时它带来的影响被忽略了。假设flex shrink为fs，flex item的初始尺寸为is，flex item被压缩的尺寸为ss，则正确的表达式为：fs ∝ is/ss3. Flex Basisflex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢？flex-basis和width/height有如下的区别：flex-basis只能用于flex-item，而width/height可以应用于其他类型的元素；flex-basis和flex-direction有关，当flex-direction为row的时，flex-basis设置的是宽度，当flex-direction为column时，flex-basis设置的是高度；当flex item被绝对定位后（absolute position），flex-basis不起作用，而width/height可以；flex-basis可以用于flex的简写形式，如：flex: 1 0 200px;我们来看一下flex-basis的作用，将css修改如下：.box{ height: 100px; flex-grow: 1;}.one{ background: pink; flex-basis: 100px;}.two{ background: lightgreen; flex-basis: 200px;}.three{ background: skyblue; flex-basis: 300px;}3个flex item都在原来的初始宽度基础上增加了相同的宽度：当然，这个例子如果换成使用width也是一样的效果，但是虽然效果一样但意义不一样，所以使用flex布局时还是应该尽量遵守规范，选合适的人去干正确的事。4. Order通过order属性我们可以改变flex item的排列顺序，例如：html:<section id=“blocks”> <div class=“one”>1</div> <div class=“two”>2</div> <div class=“three”>3</div> <div class=“four”>4</div></section>css：#blocks{ display: flex; margin: 10px; justify-content: space-between;}#blocks div{ flex: 0 0 100px; padding: 40px 0; text-align: center; background: #ccc;}默认排列顺序是按照flex item在html中的出现顺序：当我们修改flex item的order值后，flex item会按照order值升序排列：css：.one{ order: 4; }.two{ order: 3; }.three{ order: 2; }.four{ order: 1; }效果：结语flex就先简单介绍到这里，flex很强大也很简单，希望大家用的开心。 ...
动画动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。11.1 如何实现动画必要元素：a、通过@keyframes指定动画序列；b、通过百分比将动画序列分割成多个节点；c、在各节点中分别定义各属性d、通过animation将动画应用于相应元素；示例代码： 两种定义动画的方式<style> /* move 是定义的动画名 / @keyframes move { 0% { transform: translateX(0px); width: 200px; height: 200px; } 40% { width: 300px; height: 300px; } 80% { width: 200px; height: 200px; transform: translateX(100px); } 100% { transform: translateX(0px); width: 200px; height: 200px; } } / 定义动画集 / @keyframes move1 { from { / 动画的开始状态 / / 位置开始状态 / transform: translateX(0px); } to { / 动画的结束状态 / / 位置结束状态 / transform: translateX(300px); } } .box { width: 200px; height: 200px; background-color: pink; / 调用动画集 动画名 持续时间 执行速度 / animation: move 5s linear; }</style>11.2 动画关键属性关键属性a、animation-name设置动画序列名称b、animation-duration动画持续时间c、animation-delay动画延时时间d、animation-timing-function动画执行速度，linear、ease等e、animation-play-state动画播放状态，running、paused等f、animation-direction动画逆播，alternate等g、animation-fill-mode动画执行完毕后状态，forwards、backwards等h、animation-iteration-count动画执行次数，inifinate等i、steps(60)表示动画分成60步完成参数值的顺序：关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意。示例代码：<style type=“text/css”> .box { width: 200px; height: 200px; background-color: pink; / 调用动画集 / animation: move 5s linear; } / 定义动画集 / @keyframes move { 0% { / 位置开始状态 / transform: translateX(0px); / 动画的开始状态 / width: 100px; height: 100px; } 40% { width: 150px; height: 150px; background: orange； } 80% { width: 200px; height: 200px; background: cyan; transform: translateX(100px); } 100% { / 位置结束状态 / transform: translateX(0px); / 动画的结束状态 / width: 100px; height: 100px; background: pink; } }</style><div class=“box”></div>效果图：11.3 动画案例1、全屏切换定义三个动画集，当点击a标签的时候，通过他的锚点触发对应的动画集。<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } .box { width: 100%; height: 100%; position: relative; overflow: hidden; } .box>div{ width: 100%; height: 100%; position: absolute; background-size: cover; } .one { background: url(img/bg6.jpg) no-repeat; } .two { background: url(img/bg7.jpg) no-repeat; } .three { background: url(img/bg8.jpg) no-repeat; } .box .numbers { width: 150px; height: 40px; left: 50%; margin-left: -75px; bottom: 30px; z-index: 4; } .box .numbers a { width: 40px; height: 40px; display: block; line-height: 40px; text-align: center; text-decoration: none; color: #777; background-color: rgba(255,255,255,.8); border-radius: 50%; float: left; margin: 0 5px; } .one:target { animation: move 1s linear; z-index: 1; } .two:target { animation: rotate 1s linear; z-index: 1; } .three:target { animation: scale 1s linear; z-index: 1; } @keyframes move { from { transform: translateX(-100%); } to { transform: translateX(0px); } } @keyframes rotate { from { transform: scale(0) rotateZ(0deg); } to { transform: scale(1) rotateZ(360deg); } } @keyframes scale { from { transform: scale(0); } to { transform: scale(1); } }</style><div class=“box”> <div class=“one” id=“one”></div> <div class=“two” id=“two”></div> <div class=“three” id=“three”></div> <div class=“numbers”> <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a> </div></div>效果图：2、大海波涛波浪其实是两张图片，执行的是同一组动画，只需要在第二张图片执行动画的时候，让它延迟1s执行，就可以出现“波动”的感觉。<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } .box { width: 100%; height: 100%; background-color: #0EA9B1; position: relative; overflow: hidden; } .box img { position: absolute; width: 100%; bottom: 0; } .sun { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute; left: 100px; top: 50px; } .sun:after { content: “”; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: rgba(255,255,255,.6); position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; animation: scale 1s linear infinite alternate; } .sun:before { content: “”; display: block; width: 120px; height: 120px; border-radius: 50%; background-color: rgba(255,255,255,.4); position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; animation: scale 2s 1s linear infinite alternate; } @keyframes scale { from { transform: scale(1); } to { transform: scale(1.2); } } @keyframes move{ from { bottom: 0px; } to { bottom: -60px; } } img:nth-child(2){ animation: move 1s linear infinite alternate; } img:nth-child(3) { animation: move 2s 1s linear infinite alternate; }</style> <div class=“box”> <div class=“sun”></div> <img src=“img/1.png” alt=""> <img src=“img/2.png” alt=""> </div>效果图：3、宇宙通过定位确定各“星球”的位置，再对每个星球设定单独的动画，形成联动的各大星球。<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background: url(img/bg.jpg) no-repeat; background-size: cover; position: relative; } .box { width: 600px; height: 600px; border: 1px solid #ccc; border-radius: 50%; position: absolute; left: 50%; margin-left: -300px; top: 50%; margin-top: -300px; } .sun { position: absolute; width: 50px; height: 50px; background-color: orange; border-radius: 50%; margin-left: -25px; left: 50%; margin-top: -25px; top: 50%; box-shadow: 0px 0px 50px orange; } .lin1 { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; margin-left: -50px; margin-top: -50px; animation: rotate 10s linear infinite; } .lin1:after { content: “”; width: 20px; height: 20px; display: block; border-radius: 50%; background-color: orange; position: absolute; left: -2px; top: 10px; } .public { position: absolute; left: 50%; top: 50%; } @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } .lin2 { width: 150px; height: 150px; border: 1px solid #ccc; border-radius: 50%; margin-left: -75px; margin-top: -75px; animation: rotate 5s linear infinite; } .lin2:after { content: “”; width: 10px; height: 10px; background-color: blue; display: block; border-radius: 50%; position: absolute; left: 25px; top: 10px; } .lin3 { width: 230px; height: 230px; border: 1px solid #ccc; border-radius: 50%; margin-left: -115px; margin-top: -115px; animation: rotate 10s linear infinite; } .lin3 span { width: 20px; height: 20px; display: block; background-color: green; border-radius: 50%; position: absolute; left: 50px; animation: rotate 5s linear infinite; } .lin3 span b { width: 10px; height: 10px; background-color: pink; display: block; border-radius: 50%; position: absolute; left: 25px; } .lin4 { width: 332px; height: 332px; border: 1px solid #ccc; background: url(img/asteroids_meteorids.png) no-repeat; border-radius: 50%; margin-left: -161px; margin-top: -161px; animation: rotate 15s linear infinite; } .lin4:after { content: “”; display: block; width: 10px; height: 10px; background-color: red; border-radius: 50%; position: absolute; left: 120px; } .line5 { width: 450px; height: 450px; border: 1px solid #ccc; border-radius: 50%; margin-left: -220px; margin-top: -220px; animation: rotate 10s linear infinite; } .line5 span { width: 30px; height: 30px; background-color: blue; border-radius: 50%; display: block; position: absolute; left: 120px; } .line5 span b { display: block; width: 40px; height: 40px; border: 5px solid #ccc; border-radius: 50%; transform: skew(45deg); position: absolute; left: -6px; top: -10px; }</style> <div class=“box”> <div class=“sun”></div> <div class=“lin1 public”></div> <div class=“lin2 public”></div> <div class=“lin3 public”> <span> <b></b> </span> </div> <div class=“lin4 public”></div> <div class=“line5 public”> <span> <b></b> </span> </div></div>效果图：4、无缝滚动轮播结构上与普通的轮播图没有什么区别，定义一个盒子的宽度，宽度为八张图片的总宽度，定义一个动画集，10s内将ul从0的位置移动到盒子的宽度，此时动画集结束，应该是跳到0的位置，循环此动画就会形成无缝滚动。之所以ul下的li定义的是十四张图片，是因为，一开始的时候图片从零的位置向右移动时，如果只有七张图片的时候，右边是空白的，只有完全到达盒子宽的时候，整个图片才会显示完整，用户体验很差，所以需要用到障眼法，就是用14张图片。<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } .box { width: 882px; height: 84px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; } ul { width: 1764px; height: 84px; float: right; animation: move 10s linear infinite; } li { float: left; } ul:hover { animation-play-state: paused; } @keyframes move { from { transform: translateX(0px); } to { transform: translateX(882px); } }</style><div class=“box”> <ul> <li><img src=“img/1.jpg” alt=""></li> <li><img src=“img/2.jpg” alt=""></li> <li><img src=“img/3.jpg” alt=""></li> <li><img src=“img/4.jpg” alt=""></li> <li><img src=“img/5.jpg” alt=""></li> <li><img src=“img/6.jpg” alt=""></li> <li><img src=“img/7.jpg” alt=""></li> <li><img src=“img/1.jpg” alt=""></li> <li><img src=“img/2.jpg” alt=""></li> <li><img src=“img/3.jpg” alt=""></li> <li><img src=“img/4.jpg” alt=""></li> <li><img src=“img/5.jpg” alt=""></li> <li><img src=“img/6.jpg” alt=""></li> <li><img src=“img/7.jpg” alt=""></li> </ul></div>效果图：5、进度条前面已经接触了一个demo，只不过是一个静态的进度条，现在我们通过动画，让他动起来。<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #ccc; } .line { width: 980px; height: 40px; margin: 50px auto; border-radius: 10px; background-image: linear-gradient( 135deg, #fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%, #000 75%, #000 ); background-size: 40px 40px; animation: move 2s linear infinite; } @keyframes move { from { background-position: 0px; } to { background-position: 40px; } }</style><div class=“line”></div>效果图：6、时钟案例本时钟案例，主要是依赖CSS3中动画以及旋转的概念实现的。<style type=“text/css”> * { margin: 0; padding: 0; } body{ background: #ccc; } .box { width: 300px; height: 300px; border: 1px solid #fff; margin: 100px auto; border-radius: 50%; position: relative; } .line { position: absolute; left: 50%; margin-left: -1px; height: 100%; width: 2px; background-color: #fff; } .line:nth-child(1){ } / 设置时刻位置的刻度线 / .line:nth-child(2) { transform: rotateZ(30deg); } .line:nth-child(3) { transform: rotateZ(60deg); } .line:nth-child(4) { transform: rotateZ(90deg); } .line:nth-child(5) { transform: rotateZ(120deg); } .line:nth-child(6) { transform: rotateZ(-30deg); } .cover { position: absolute; left: 50%; top: 50%; margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; background-color: #fff; border-radius: 50%; } / 设置时针转完一圈所要用的时间为 43200s / .h{ width: 6px; height: 100px; background-color: #000; position: absolute; left: 50%; top: 40px; margin-left: -3px; animation: rotate 43200s linear infinite; } / 设置分针转完一圈所要用的时间为 3600s / .m { width: 4px; height: 120px; background-color: #000; position: absolute; left: 50%; top: 20px; margin-left: -2px; transform-origin: bottom; animation: rotate 3600s linear infinite; } / 设置秒针转完一圈所要用的时间为 60s / / steps(60) 表示该动画需要60步完成 / .s { width: 2px; height: 130px; background-color: orange; position: absolute; left: 50%; top: 10px; margin-left: -1px; transform-origin: bottom; animation: rotate 60s steps(60) infinite; } .dotted { width: 10px; height: 10px; background-color: #000; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -5px; margin-top: -5px; } / 定义旋转角度动画，从0 度旋转到 360度 / @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }</style><div class=“box”> <div class=“line”></div> <div class=“line”></div> <div class=“line”></div> <div class=“line”></div> <div class=“line”></div> <div class=“line”></div> <div class=“cover”> <div class=“h”></div> <div class=“m”></div> <div class=“s”></div> <div class=“dotted”></div> </div></div>效果图：7、魔方案例<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } .box { width: 400px; height: 400px; margin: 150px auto; / perspective: 1000px; / transform-style: preserve-3d; animation: rotate 5s linear infinite alternate; } .box>div { position: absolute; width: 100%; height: 100%; } .left { background-color: transparent; transform: rotateY(-90deg) translateZ(200px); } .right { background-color: transparent; transform: rotateY(90deg) translateZ(200px); } .top { background-color: transparent; transform: rotateX(90deg) translateZ(200px); } .bottom { background-color: transparent; transform: rotateX(-90deg) translateZ(200px); } .before { background-color: transparent; transform: translateZ(200px); } .back { transform: translateZ(-200px); background-color: transparent; } @keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } 50% { transform: rotateY(30deg) rotateX(60deg) rotateZ(45deg); } 75% { transform: rotateY(80deg) rotateX(-60deg) rotateZ(-45deg); } 100% { transform: rotateY(-45deg) rotateX(50deg) rotateZ(-35deg); } } li { width: 120px; height: 120px; background-color: green; float: left; margin-left: 10px; margin-top: 10px; text-align: center; line-height: 120px; font-size: 50px; border-radius: 10px; } .left li { background-color: orange; } .right li { background-color: pink; } .top li { background-color: red; } .bottom li { background-color: yellow; } .back li { background-color: orangered; }</style><div class=“box”> <div class=“left”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class=“right”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class=“top”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class=“bottom”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class=“before”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class=“back”> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div>效果图：12. 伸缩布局本章节摘自阮一峰老师的《Flex 布局教程》CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。伸缩布局也叫弹性布局或者flex布局。12.1 什么是伸缩布局Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; / Safari / display: flex;}注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。12.2 基本概念浏览器兼容性：学习几个新概念：主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。12.3 flex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; }参数说明：row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。示例代码：<style> .block{ width: 100%; border-radius: 15px; background: rgba(158,158,158,0.15); padding: 20px; box-sizing: border-box; margin-bottom: 20px; } .box{ background: #fff; display: flex; margin: 0 0 55px; } .box-item { width: 150px; height: 150px; line-height: 150px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-1-1 { flex-direction: row; } .box-1-2 { flex-direction: row-reverse; } .box-1-3 { flex-direction: column; } .box-1-4 { flex-direction: column-reverse; }</style><div class=“block”> <h4>flex-direction: row 水平向右</h4> <div class=“box box-1-1”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>flex-direction: row-reverse 水平向左</h4> <div class=“box box-1-2”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>flex-direction: column 垂直向下</h4> <div class=“box box-1-3”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>flex-direction: column-reverse 垂直向上</h4> <div class=“box box-1-4”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div>效果图：12.4 flex-wrap 属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }参数说明：nowrap（默认）：不换行，宽度自动适应；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方示例代码：<style> .block{ width: 100%; border-radius: 15px; background: rgba(158,158,158,0.15); padding: 20px; box-sizing: border-box; margin-bottom: 20px; } .box{ background: #fff; display: flex; margin: 0 0 55px; } .box-item { width: 150px; height: 150px; line-height: 150px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-2-1 { flex-wrap: nowrap; } .box-2-2 { flex-wrap: wrap; } .box-2-3 { flex-wrap: wrap-reverse; } </style><div class=“block”> <h4>nowrap（默认）：不换行。</h4> <div class=“box box-2-1”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> </div></div><div class=“block”> <h4>wrap：换行，第一行在上方。</h4> <div class=“box box-2-2”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> </div></div><div class=“block”> <h4>wrap-reverse：换行，第一行在下方。</h4> <div class=“box box-2-3”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> </div></div>效果图：12.5 flex-flow 属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。.box { flex-flow: <flex-direction> || <flex-wrap>;}示例代码：<style> .block{ width: 100%; border-radius: 15px; background: rgba(158,158,158,0.15); padding: 20px; box-sizing: border-box; margin-bottom: 20px; } .box{ background: #fff; display: flex; margin: 0 0 55px; } .box-item { width: 150px; height: 150px; line-height: 150px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-3{ flex-flow: row wrap; }</style><div class=“block”> <h4>row nowrap（默认）：不换行。</h4> <div class=“box box-3”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> </div></div>效果图：12.6 justify-content 属性justify-content属性定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around;}参数说明：flex-start：（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。示例代码：<style> .block{ width: 100%; border-radius: 15px; background: rgba(158,158,158,0.15); padding: 20px; box-sizing: border-box; margin-bottom: 20px; } .box{ background: #fff; display: flex; margin: 0 0 55px; } .box-item { width: 150px; height: 150px; line-height: 150px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .box-4-1{ justify-content:flex-start; } .box-4-2{ justify-content:flex-end; } .box-4-3{ justify-content:center; } .box-4-4{ justify-content:space-between; } .box-4-5{ justify-content:space-around; }</style><div class=“block”> <h4>flex-start（默认值）：左对齐</h4> <div class=“box box-4-1”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>flex-end：右对齐</h4> <div class=“box box-4-2”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>center： 居中</h4> <div class=“box box-4-3”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>space-between：两端对齐，项目之间的间隔都相等。</h4> <div class=“box box-4-4”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div><div class=“block”> <h4>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</h4> <div class=“box box-4-5”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> </div></div>效果图：12.7 align-items 属性align-items属性定义项目在交叉轴上如何对齐。.box { align-items: flex-start | flex-end | center | baseline | stretch;}参数说明：flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。示例代码：<style> .block{ width: 100%; border-radius: 15px; background: rgba(158,158,158,0.15); padding: 20px; box-sizing: border-box; margin-bottom: 20px; } .box{ background: #fff; display: flex; margin: 0 0 55px; } .box-item { width: 150px; height: 150px; line-height: 150px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } .item-tall { height: 400px; line-height: 400px; } .box-5-1 { align-items: flex-start; } .box-5-2 { align-items: flex-end; } .box-5-3 { align-items: center; } .box-5-4{ align-items: baseline; } .box-5-4 .box-item{ font-size: 88px; line-height: initial; text-decoration: underline; } .box-5-4 .item-tall{ font-size: 122px; line-height: initial; } .box-5-5 { align-items: stretch; } .box-5-5 .box-item { height: auto;}</style><div class=“block”> <h4>flex-start：交叉轴的起点对齐。</h4> <div class=“box box-5-1”> <div class=“box-item”>1</div> <div class=“box-item item-tall”>2</div> <div class=“box-item”>3</div> <div class=“box-item item-tall”>4</div> </div></div><div class=“block”> <h4>flex-end：交叉轴的终点对齐。</h4> <div class=“box box-5-2”> <div class=“box-item”>1</div> <div class=“box-item item-tall”>2</div> <div class=“box-item”>3</div> <div class=“box-item item-tall”>4</div> </div></div><div class=“block”> <h4>center：交叉轴的中点对齐。</h4> <div class=“box box-5-3”> <div class=“box-item”>1</div> <div class=“box-item item-tall”>2</div> <div class=“box-item”>3</div> <div class=“box-item item-tall”>4</div> </div></div><div class=“block”> <h4>baseline: 项目的第一行文字的基线对齐。</h4> <div class=“box box-5-4 line”> <div class=“box-item”>1</div> <div class=“box-item item-tall”>2</div> <div class=“box-item”>3</div> <div class=“box-item item-tall”>4</div> </div></div><div class=“block”> <h4>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</h4> <div class=“box box-5-5”> <div class=“box-item”>1</div> <div class=“box-item item-tall”>2</div> <div class=“box-item”>3</div> <div class=“box-item item-tall”>4</div> </div></div>效果图：12.8 align-content 属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}参数说明：flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。示例代码：<style> .box-tall { height: 800px; } .box-6-1 { flex-wrap: wrap; align-content: flex-start; } .box-6-2 { flex-wrap: wrap; align-content: flex-end; } .box-6-3 { flex-wrap: wrap; align-content: center; } .box-6-4 { flex-wrap: wrap; align-content: space-between } .box-6-5 { flex-wrap: wrap; align-content: space-around; } .box-6-6 { flex-wrap: wrap; align-content: stretch; } .box-6-6 .box-item { height: auto; }</style><div class=“block”> <h4>flex-start：交叉轴的起点对齐。</h4> <div class=“box box-tall box-6-1”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div><div class=“block”> <h4>flex-end：与交叉轴的终点对齐。</h4> <div class=“box box-tall box-6-2”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div><div class=“block”> <h4>center：与交叉轴的中点对齐。</h4> <div class=“box box-tall box-6-3”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div><div class=“block”> <h4>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</h4> <div class=“box box-tall box-6-4”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div><div class=“block”> <h4>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</h4> <div class=“box box-tall box-6-5”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div><div class=“block”> <h4>stretch（默认值）：轴线占满整个交叉轴。</h4> <div class=“box box-tall box-6-6”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item”>4</div> <div class=“box-item”>5</div> <div class=“box-item”>6</div> <div class=“box-item”>7</div> <div class=“box-item”>8</div> <div class=“box-item”>9</div> <div class=“box-item”>10</div> <div class=“box-item”>11</div> <div class=“box-item”>12</div> </div></div>效果图：12.9 Order 属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>; }参数说明：order属性值是一个数值，可以是正数，也可以是负数，在当前项目里，数值越小，排列越靠前。示例代码：<style> .box-7 .order { order: -1; } .box-7 .box-item div{ font-size: 14px; position: relative; bottom: 90px; color: #9236f4; }</style><div class=“box box-7”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> <div class=“box-item order”>4 <div>(order:-1)</div></div></div>效果图：12.10 flex-grow 属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item { flex-grow: <number>; / default 0 / }参数说明：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。示例代码：<style> .box-8 .box-item div{ font-size: 14px; position: relative; bottom: 90px; color: #9236f4; } .box-8 .grow{ flex-grow: 1; width: auto; } .box-8 .grow-2 { flex-grow: 2; }</style><div class=“block”> <div class=“box box-8”> <div class=“box-item grow”>1 <div>flex-grow: 1</div></div> <div class=“box-item grow grow-2”>2 <div>flex-grow: 2</div></div> <div class=“box-item grow”>3 <div>flex-grow: 1</div></div> </div></div>效果图：12.11 flex-shrink 属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。.item { flex-shrink: <number>; / default 1 / }参数说明：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。示例代码：<style> .box-9 .box-item div{ font-size: 14px; position: relative; bottom: 90px; color: #9236f4; } .box-9 .box-item { width: 400px; } .box-9 .shrink{ flex-shrink: 0; }</style><div class=“block”> <div class=“box box-9”> <div class=“box-item shrink”>1 <div>flex-shrink: 0</div></div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> </div></div>效果图：12.12 flex-basis 属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main-size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item { flex-basis: <length>; | auto; / default auto / }示例代码：<style> .box-10 .box-item { flex-basis: 200px; width: 400px; / width 将失去作用*/ }</style><div class=“block”> <h4></h4> <div class=“box box-10”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item”>3</div> </div></div>效果图：12.13 flex 属性flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] }12.14 align-self 属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}参数说明：auto：表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。示例代码：<style> .box-11 { height: 400px; } .box-11 .box-item { align-self: flex-start; } .box-11 .box-item div{ font-size: 14px; position: relative; bottom: 90px; color: #9236f4; } .box-11 .end { align-self: flex-end; }</style><div class=“block”> <h4>stretch（默认值）：轴线占满整个交叉轴。</h4> <div class=“box box-11”> <div class=“box-item”>1</div> <div class=“box-item”>2</div> <div class=“box-item end”>3<div>flex-end</div></div> <div class=“box-item”>4</div> </div></div>效果图：
前言如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。1.选择器CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。1.1 属性选择器属性选择器就是通过属性来选择元素。选择器含义[attr]存在attr属性即可[attr=val]属性值完全等于val[attr*=val]属性值里包含val字符并且在“任意”位置[attr^=val]属性值里包含val字符并且在“开始”位置[attr$=val]属性值里包含val字符并且在“结束”位置1、[attr]<style> /* 所有拥有class属性的标签，添加color样式 / [class]{ color: #333; }</style>2、[attr=val]<style> / 所有拥有class属性全等于“one”的标签，添加color样式 / [class = “one”]{ color: #333; }</style>3、[attr=val]<style> /* class属性的值里面包含“one”的标签，添加color样式 / [attr=“one”]{ color: #333; }</style>4、[attr^=val]<style> /* class属性的值以“one”开始的标签，添加color样式 / [attr ^= “one”]{ color: #333; }</style>5、[attr$=val]<style> / class属性的值以“one”结束的标签，添加color样式 / [attr $= “one”]{ color: #333; }</style>1.2 伪类选择器除了以前介绍的的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。1、结构（位置）伪类选择器含义:first-child其父元素的第1个子元素:last-child其父元素的最后1个子元素:nth-child(n)其父元素的第n个子元素:nth-last-child(n)其父元素的第n个子元素（倒着数）2、空伪类:empty选中没有任何子节点的元素<style> div:empty { / 没有子元素的div元素 / width: 100px; height: 100px; background-color: pink; }</style><!– css 样式不起作用 –><div class=“one”>阿斯蒂芬</div> <!– css样式不起作用 –><div> <p></p></div><!– css样式生效 –><div></div>3、目标伪类:target结合锚点进行使用，处于当前锚点的元素会被选中；<style type=“text/css”> / 使用锚链接指向当前标签的时候 / .one:target { background-color: pink; font-size: 30px; }</style><a href="#hh">找笑脸去</a><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p id=“hh” class=“one”>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p>4、排除伪类:not(selector)除selector（任意选择器）外的元素会被选中；<style> / 除了类名是“.not”的div元素 / div:not(.one) { width: 100px; height: 100px; background-color: pink; }</style><!– css样式不生效 –><div class=“one”></div><!– css样式生效 –><p></p><!– css样式生效 –><div></div>1.3 伪元素选择器1、::first-letter文本的第一个单词或字（如中文、日文、韩文等）2、::first-line 文本第一行；3、::selection 可改变选中文本的样式；4、::before和::after示例代码：伪元素实现横竖分割线<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } .box { width: 300px; height: 200px; background-color: pink; margin: 50px auto; } .box li { width: 100px; height: 100px; float: left; background-color: #555; position: relative; overflow: hidden; } li:before { content: “”; display: block; width: 90px; height: 1px; background-color: #ccc; position: absolute; top: 97px; left: 5px; } li:after { content: “”; display: block; width: 1px; height: 90px; background-color: #ccc; position: absolute; left: 0px; top: 4px; } li:nth-child(1):after,li:nth-child(4):after { display: none; } li:nth-last-child(-n+3):before { display: none; }</style><div class=“box”> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>效果图：:after、:before在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下:after、:before会被自动识别为::after、::before，这样做的目的是用来做兼容处理。2. 颜色新增了RGBA、HSLA模式，其中的A表示透明度，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。2.1 RGBARed、Green、Blue、Alpha即RGBA，R、G、B取值范围0255。<style> #box{ width:100px; height:100px; background: rgba(200,200,200,.5); }</style><div id=“box”></div>2.2 HSLAH 色调 取值范围0360，0/360表示红色、120表示绿色、240表示蓝色S 饱和度 取值范围0%100%L 亮度 取值范围0%100%A 透明度 取值范围01<style> #box{ width:100px; height:100px; background: hsla(200,50%,50%,.5); }</style><div id=“box”></div>2.3 关于 CSS 的透明度Alpha和opacity的区别主要就是，opacity具有继承性，父盒子设置该属性，下面所有的子元素都会继承该属性。transparent不可调节透明度，始终完全透明。3. 文本阴影text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。如：text-shadow: 2px 2px 2px #CCC;1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；4、阴影颜色。示例代码：文字浮雕<style> html,body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #999; font-size: 50px; text-align: center; line-height: 260px; color: #999; } .one { text-shadow: -1px -1px 1px #fff,1px 1px 1px #000; } .two { text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; }</style><div class=“one”>我是凸起文字</div><div class=“two”>我是凹下去的文字</div>效果图：4. 盒模型CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: border-box盒子大小为width2、box-sizing: content-box盒子大小为width + padding + border注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。示例代码：<style type=“text/css”> .box { width: 316px; height: 170px; float: left; margin-left: 20px; box-sizing: border-box; } .box img { width: 100%; height: 100%; } .box:hover { border: 10px solid #00eeff; }</style><div class=“box”> <img src=“1.jpg” alt=""></div><div class=“box”> <img src=“1.jpg” alt=""></div>效果图：可以看出通过设置盒子模型后，虽然.box设置了边框，但是整个box的盒子大小没有改变。5. 边框边框中的边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征。5.1 边框圆角通过border-radius属性，设置边框圆角，圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的14个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。<style type=“text/css”> .box { margin: 50px auto; width: 300px; height: 500px; border: 1px solid #ccc; border-radius: 10px 20px 50px 70px / 10px 20px 50px 70px; }</style><div class=“box”></div>效果图：一般情况下，我们用不到这么复杂的，除非特殊需求的时候。支持简写模式，具体如下：1、border-radius: 10px;表示四个角的横纵轴半径都为10px；2、border-radius: 10px 5px;表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；3、border-radius: 10px 5px 8px;表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；4、border-radius: 10px 8px 6px 4px;表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；椭圆的画法：<style type=“text/css”> .box { margin: 50px auto; width: 300px; height: 500px; border: 1px solid #ccc; / 当盒子长宽不一致时，圆角属性 分别设置宽度的一半，以及长度的一半，即是椭圆 / / 或者直接 border-radius:50%; / border-radius: 150px 250px; }</style><div class=“box”></div>如果不想计算，直接设百分比：“50%”。正圆的画法：<style type=“text/css”> .box { margin: 50px auto; width: 200px; height: 200px; border: 1px solid #ccc; / 当盒子长宽相等时，圆角属性分别设置宽度的一半，以及长度的一半，即是正圆 / / 或者直接 border-radius:50%; / border-radius: 100px; }</style><div class=“box”></div>示例代码：边框圆角合集<style> * { margin: 0; padding: 0; list-style: none; background-color: wheat; overflow: hidden; } .box { width: 980px; height: 400px; background-color: #fff; margin: 50px auto; } .box li { float: left; width: 193px; height: 193px; background-color: #fff; margin:5px; box-shadow: 2px 3px 5px #aaa; } li:first-child:after { content: “”; height: 130px; width: 130px; margin: 30px auto; display: block; border: 1px solid orangered; border-radius: 50%; } li:nth-child(2):after { content: “”; display: block; height: 130px; width: 130px; border: 1px solid orangered; margin: 30px auto; border-radius: 65px 65px 0px 0px; } li:nth-child(3):after { content: “”; display: block; width: 130px; height: 65px; border: 1px solid orangered; margin: 50px auto; border-radius: 65px 65px 0px 0px; } li:nth-child(4):after { content: “”; display: block; width: 130px; height: 130px; border: 1px solid orangered; margin: 20px auto; border-radius: 65px 0px 0px 0px; } li:nth-child(5):after { content: “”; width: 130px; height: 65px; display: block; border: 1px solid orangered; border-radius: 50%; margin: 50px auto; } li:nth-child(6):after{ content: “”; height: 130px; width: 65px; display: block; border: 1px solid orangered; border-radius: 50%; margin: 20px auto; } li:nth-child(7):after { content: “”; height: 130px; width: 130px; display: block; border: 1px solid orangered; margin: 20px auto; border-radius: 135px 0px 0px 0px; } li:nth-child(8):after { content: “”; width: 135px; height: 30px; display: block; margin: 30px auto; border: 1px solid orangered; border-radius: 65px 65px 0px 0px / 30px 30px 0px 0px; }</style><div class=“box”> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>效果图：5.2 边框阴影box-shadow，与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。如：box-shadow: 5px 5px 5px #CCC1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；4、inset可以设置内阴影；注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。示例代码：<style> .box { width: 200px; height: 200px; margin: 50px auto; border: 1px dashed #000; box-shadow: 2px 3px 4px rgba(0, 247, 255, 0.452),inset 5px 6px 7px rgba(255, 0, 140, 0.562); }</style><div class=“box”></div>效果图：我们通过上图可以看到，虚线是盒子的位置，粉色阴影是inset属性设置的，所以是内阴影，浅蓝色是直接设置的外阴影，效果一目了然。6. 背景背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。6.1 background-size通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下：可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。6.2 background-origin通过background-origin可以设置背景图片定位(background-position)的参照原点。其参数设置如下：border-box以边框做为参考原点；padding-box以内边距做为参考原点；content-box以内容区做为参考点；示例代码：<style type=“text/css”> .box1,.box2,.box3 { width: 200px; height: 200px; display: inline-block; margin: 50px 30px; border: 10px dashed aquamarine; padding: 10px; background-image: url(bg.jpg); background-repeat: no-repeat; } .box1{ background-origin: padding-box; } .box2{ background-origin: content-box; } .box3{ background-origin: border-box; }</style><div class=“box1”></div><div class=“box2”></div><div class=“box3”></div>效果图：6.3 background-clip通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。其参数设置如下：border-box裁切边框以内为背景区域；padding-box裁切内边距以内为背景区域；content-box裁切内容区做为背景区域；6.4 多背景以逗号分隔可以设置多背景，可用于自适应布局。在一个盒子里可以设置多个背景图片，通过背景定位的功能将两张图片组装起来。示例代码：<style type=“text/css”> .box { width: 320px; height: 410px; margin: 50px auto; background: url(head.jpg) no-repeat left top, url(foot.jpg) no-repeat left bottom; background-size: contain; background-color: #ccc; }</style><div class=“box”></div>效果图：从效果图中我们可以看到，在盒子里面设置了两张背景图，分别是上面一部分，下面一部分。这里故意给盒子高度拉长了一点，并且设置了一个灰色的背景，为的就是大家能够清楚的看到上下两部分的背景图。7. 渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。7.1 线性渐变linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。1、必要的元素：借助Photoshop总结得出线性渐变的必要元素a、方向b、起始色c、终止色d、渐变距离2、关于方向通过具体的方位词指定to leftto rightto topto bottom通过角度改变渐变的方向0°，从下往上渐变90°，从左向右渐变示例代码：<style type=“text/css”> .box { width: 400px; height: 150px; margin: 100px auto; / 线性渐变 / background-image: linear-gradient( /渐变的方向/ 45deg, /渐变开始的颜色/ #88f5ea, /渐变结束的颜色/ #d36be7 ); }</style><div class=“box”></div>效果图：3、渐变范围如果不设置范围，默认渐变的范围是父盒子的宽度，如果通过background-size设置宽度的话，渐变范围即为设置的宽度。<style> .box { width: 500px; height: 100px; margin: 100px auto; background-image: linear-gradient( 135deg, yellow 20%, black 20%, black 40%, yellow 40%, yellow 60%, black 60%, black 80%, yellow 80%, yellow ); background-size: 66px 100px; }</style><div class=“box”></div>效果图：7.2 径向渐变radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。1、必要的元素：a、辐射范围即圆半径b、中心点 即圆的中心c、渐变起始色d、渐变终止色e、渐变范围2、关于中心点中心位置参照的是盒子的左上角，例如：<style> #div{ width:200px; height:200px; background: radial-gradient( / 100px是渐变辐射的范围 0 0 指的是圆心在盒子的左上角 / 100px at 0 0, /渐变起始色/ orange, /渐变终止色/ #ff4500 ) }</style><div id=“box”></div>示例代码：镜像渐变画个球<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #ccc; } .box { width: 400px; height: 400px; background-color: #fff; margin: 50px auto; border-radius: 50%; background-image: radial-gradient( 300px at 100px 100px, rgba(0,0,0,.1), rgba(0,0,0,.8) ); }</style><div class=“box”></div>效果图：8. 过渡过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。8.1 帧动画通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。示例代码：<!– baidu.png这个背景图由64张图片横向组成，我们通过动态改变图片的位置，实现动画效果–><style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .logo { width: 270px; height: 129px; margin: 100px auto; background-image: url(./baidu.png); background-position: 0 0; }</style><div class=“logo”></div><script> var logo = document.querySelector(’.logo’); var offset = -270; var n = 0; setInterval(function () { n++; logo.style.backgroundPosition = offset * n + ‘px 0px’; if(n >= 64) n = 0; },100);</script>效果图：这里不做详细了解，主要是为了区分与补间动画的区别。8.2 补间动画自动完成从起始状态到终止状态的的过渡。语法：transition当前元素只要有“属性”发生变化时，可以平滑的进行过渡，并不仅仅局限于hover状态。transition-property设置过渡属性/设置哪些属性要参加到动画效果中/transition-property: all;transition-duration设置动画过渡执行时间transition-duration: 2s;transition-timing-function设置过渡速度类型transition-timing-function:linear; / ease| ease-in | ease-out | ease-in-out | linear; /transition-delay设置过渡延时/1s后，过渡动画开始过渡/transition-delay: 1s;连写：/ 属性 执行时间 延时时间 过渡类型*/transition: all 2s 1s linear;示例代码：<style type=“text/css”> .box { width: 250px; height: 250px; background-color: pink; margin: 100px auto; transition: all 2s 1s linear; } .box:hover { width: 200px; height: 200px; border-radius:50%; background-color: rgb(25, 221, 247); }</style><div class=“box”></div>效果图：我们可以看到，触发hover事件的时候延迟1s后开始执行动画。示例代码：过渡的实际应用<style type=“text/css”> html,body { margin: 0; padding: 0; width: 100%; height: 100%; } .box { width: 100%; height: 100%; background-color: #eee; } .l_box { float: left; width: 234px; height: 300px; margin: 100px 50px; cursor: pointer; transition: all 0.5s linear; } .l_box:hover { box-shadow: -2px -2px 20px #777; margin-top: 90px; } .r_box { width: 234px; height: 300px; float: left; margin: 100px 0px; background-color: #fff; text-align: center; position: relative; } .cover { position: absolute; bottom: 0; height: 0px; width: 234px; background-color: orange; transition: all 1s linear; } .r_box:hover .cover { height: 100px; }</style><div class=“box”> <div class=“l_box”> <img src=“img/1.jpg” alt=""> </div> <div class=“r_box”> <img src=“img/2.jpg” alt=""> <div class=“cover”></div> </div></div>效果图：9. 2D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。9.1 位移CSS3中，通过translate属性对元素进行位移。移动translate(x, y)可以改变元素的位置，x、y可为负值；a、移动位置相当于自身原来位置b、y轴正方向朝下c、除了可以像素值，也可以是百分比，相对于自身的宽度或高度transform: translate(100px, 30px);示例代码<style type=“text/css”> .line { height: 200px; background-color: pink; } .box { width: 100px; height: 100px; background-color: rgb(30, 230, 245); transition: all 1s linear; } .line:hover .box { /* 位移 / transform: translate(100px, 30px); }</style><div class=“line”> <div class=“box”></div></div>效果图：我们可以看到，鼠标移上去之后，蓝色盒子，分别向左和向下移动了一段距离。9.2 缩放缩放scale(x, y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；/宽和高都放大1倍/transform: scale(1.5);示例代码：<style type=“text/css”> .box { width: 200px; height: 200px; background-color: pink; margin: 50px auto; transition: all 2s linear; } .box:hover { / 缩放 / transform: scale(0.5); }</style><div class=“box”></div>效果图：9.3 旋转旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；a、当元素旋转以后，坐标轴也跟着发生的转变b、调整顺序可以解决，把旋转放到最后/ 顺时针旋转 90度 /transform: rotate(90deg);示例代码：<style type=“text/css”> .box { width: 200px; height: 200px; background-color: #0df3cd; margin: 100px auto; transition: all 2s linear; } .box:hover { transform: rotate(-90deg); }</style><div class=“box”></div>效果图：旋转原点：默认情况下，旋转是按照元素的中心点旋转的，但是我们可以手动设置元素旋转的中心点。transform-origin: 30px 40px;示例代码：<style type=“text/css”> .box { width: 150px; height: 150px; background-color: cyan; margin: 100px auto; transition: all 1s linear; / 设置旋转原点位置 / / transform-origin: left top; / transform-origin: 30px 40px; } .box:hover { transform: rotate(90deg); }</style><div class=“box”></div>效果图：示例代码：扑克牌<style type=“text/css”> * { margin: 0; padding: 0; } .box { width: 310px; height: 438px; border: 1px solid #ccc; margin: 50px auto; position: relative; } .box img { position: absolute; transform-origin:bottom; transition: all 2s linear; } .box:hover img:nth-child(1) { transform: rotate(10deg); } .box:hover img:nth-child(2) { transform: rotate(20deg); } .box:hover img:nth-child(3) { transform: rotate(30deg); } .box:hover img:nth-child(4) { transform: rotate(40deg); } .box:hover img:nth-child(5) { transform: rotate(50deg); } .box:hover img:nth-child(6) { transform: rotate(60deg); }</style><div class=“box”> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""></div>效果图：9.4 倾斜倾斜skew(deg, deg)可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。transform: skew(30deg,30deg);示例代码：<style type=“text/css”> .box { width: 150px; height: 150px; background-color: cyan; margin: 100px auto; transition: all 2s linear; } .box:hover { / 倾斜 / transform: skew(30deg, 30deg); }</style><div class=“box”></div>效果图：9.5 矩阵矩阵matrix()把所有的2D转换组合到一起，需要6个参数。transform-origin可以调整元素转换的原点，但是对于transform: translate(x，y)没有影响。我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，其顺序会影转换的效果。详细可参见10. 3D 转换10.1 3D 坐标轴用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图：网格状的正方形，可以想象成是我们的电脑桌面2D平面。在 3D 转换中，前面 2D 转换的属性在这都可以使用：位移transform:translate(100px,100px,100px);旋转transform:rotate(30deg,30deg,30deg);缩放transform:scale(2,0.5,0.5);倾斜transform:skew(30deg,30deg,30deg);在3D转换中，一定要加上一个透视属性，才能在电脑2D平面中显示出3D的效果，透视属性请看下章。10.2 透视（perspective）电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。perspective通过透视产生的3D效果，只是视觉呈现而已，并不是真正的3d立体的盒子；就是近大远小的效果。透视的概念其实很简单，就是“近大远小”。举个例子：在2D转换的时候，我们知道一个translate属性，他分别可以设置向左向右或者向上向下平移，但是却不能向里面或外面平移。<style> .box{ width: 550px; height: 150px; margin: 100px auto; padding: 6px; border: 1px dashed #ccc; } .box li{ float: left; width: 150px; height: 150px; padding: 0; list-style: none; margin-right: 50px; transition: all 0.5s linear; } .box li:first-child{ background: salmon; } .box li:nth-child(2){ background: deepskyblue; } .box li:last-child{ background: khaki; margin-right: 0px; } / 第一个盒子向X轴的负方向移动100px / .box li:first-child:hover{ transform: translateX(-100px); } / 第二个盒子向Y轴的正方向移动100px / .box li:nth-child(2):hover{ transform: translateY(100px); } / 第三个盒子Z轴的负方向移动100px / .box li:last-child:hover{ transform: translateZ(-100px); }</style><ul class=“box”> <li></li> <li></li> <li></li></ul>效果图：没有加透视属性的时候，因为z轴是垂直电脑平面射出来的，translateZ是看不出效果的。如何设置透视属性？给当前元素的直接父元素添加perspective: 800px;透视属性，注意这个值可以是随意的，但是最佳展现距离是600px~1000px。<style> .box{ width: 550px; height: 150px; margin: 100px auto; padding: 6px; border: 1px dashed #ccc; / 给变换的 li 的直接父元素 ul 添加透视属性 perspective / perspective: 800px; } .box li{ float: left; width: 150px; height: 150px; padding: 0; list-style: none; margin-right: 50px; transition: all 0.5s linear; } .box li:first-child{ background: salmon; } .box li:nth-child(2){ background: deepskyblue; } .box li:last-child{ background: khaki; margin-right: 0px; } / 第一个盒子向X轴的负方向移动100px / .box li:first-child:hover{ transform: translateX(-100px); } / 第二个盒子向Y轴的正方向移动100px / .box li:nth-child(2):hover{ transform: translateY(100px); } / 第三个盒子Z轴的负方向移动100px / .box li:last-child:hover{ transform: translateZ(-100px); }</style><ul class=“box”> <li></li> <li></li> <li></li></ul>效果图：如图所示，在ul加上透视属性后，第三个盒子向着z轴的负方向移动了100px。透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）并非任何情况下都需要透视效果。10.3 3D呈现（transform-style）什么是3D呈现呢？不要与前面的透视搞混，透视只能使一个物体呈现近大远小的状态，不能呈现出一个立体感的东西，比如我在页面上用六个面组成一个正方形，通过透视你可能只能改变他的远近距离，并不能让他看起来像个立体的盒子，所以这里需要用到另一个属性：transform-style。transform-style: preserve-3d | flatflat：所有子元素在2D平面呈现preserve-3d：保留3D空间必须设置在父元素身上并且父元素有转换（就是有变形）并且子元素也得有转换（变形）才能看得到效果。1、示例代码：正方体<style type=“text/css”> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; margin: 150px auto; position: relative; / 透视 / / perspective: 1000px; / / 转为立方体 / transform-style: preserve-3d; transform: rotateY(45deg) rotateX(30deg); } .box>div { position: absolute; width: 100%; height: 100%; } .left { background-color: pink; transform: rotateY(-90deg) translateZ(150px); } .right { background-color: green; transform: rotateY(90deg) translateZ(150px); } .top { background-color: orange; transform: rotateX(90deg) translateZ(150px); } .bottom { background-color: blue; transform: rotateX(-90deg) translateZ(150px); } .before { background-color: red; transform: translateZ(150px); } .back { background-color: greenyellow; transform: translateZ(-150px); }</style><div class=“box”> <div class=“left”></div> <div class=“right”></div> <div class=“top”></div> <div class=“bottom”></div> <div class=“before”></div> <div class=“back”></div></div>效果图：2、示例代码：3D 导航<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } nav { width: 600px; height: 60px; line-height: 60px; margin: 200px auto; } li { height: 60px; width: 150px; float: left; position: relative; transform-style: preserve-3d; transition: all 0.5s ease-in; } span { position: absolute; width: 150px; height: 60px; display: block; color: #fff; text-align: center; } span:first-child{ background-color: #ff287a; transform: rotateX(90deg) translateZ(30px); } span:last-child{ transform: translateZ(30px); background-color: #00bdab; } li:hover { transform: rotateX(-90deg); }</style><nav> <ul> <li> <span>Home</span> <span>主页</span> </li> <li> <span>Menu</span> <span>菜单</span> </li> <li> <span>Admin</span> <span>管理</span> </li> <li> <span>About</span> <span>关于我们</span> </li> </ul></nav>效果图：10.4 3D呈现案例：3D轮播图1、普通版 3D 轮播图实现思路：通过CSS3中transform-style: preserve-3d的概念，将视图设置成3D展示模式；四张图片，分别设置其绕着X轴旋转的角度，分别对应四个立体面；将旋转好的图片沿着Z轴平移盒子宽度的一半；定义一个全局变量num，用来记录按钮点击的次数，当当按动按钮的时候，让ul旋转num90°；示例代码：<style> * { padding: 0; margin: 0; list-style-type: none; } .box { width: 960px; height: 540px; /* border: 5px solid #999; / margin: 150px auto; } .box ul { width: 960px; height: 540px; position: relative; transform-style: preserve-3d; transition: transform .6s; } .box ul li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } img { width: 100%; height: 100%; } .box ul li:nth-child(1) { transform: rotateX(90deg) translateZ(270px); } .box ul li:nth-child(2) { transform: rotateX(-90deg) translateZ(270px); } .box ul li:nth-child(3) { transform: rotateX(180deg) translateZ(270px); } .box ul li:nth-child(4) { transform: translateZ(270px); } .btn { width: 1080px; margin: 0 auto; position: relative; height: 0px; top: -470px; } .btn button { width: 40px; height: 80px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: none; outline: none; font: 900 24px/80px ‘宋体’; color: #fff; } .btn button:frist-child { float: left; } .btn button:last-child { / border-radius: 0 10px 10px 0; / float: right; }</style><div class=“box”> <ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li> </ul></div><div class=“btn”> <button><</button> <button>></button></div><script type=“text/javascript”> var btn = document.querySelectorAll(‘button’); var box = document.querySelector(’.box’); var _ul = box.querySelector(‘ul’); var num = 0; // btn 获取到的是一个伪数组 btn[1].onclick = function () { num++; _ul.style.transform = ‘rotateX(’ + num * 90 + ‘deg)’ } btn[0].onclick = function () { num–; _ul.style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; }</script>效果图：2、切割版 3D 轮播图实现思路：结构上将之前定义好的ul重复四次；设定延时，整个动画执行时间是0.8s，设定每一个ul延迟执行0.2s，即第一个延时0s，第二个延时0.2s，第三个延时0.4s，第四个延时0.6s；其余步骤同上，着重强调的是，相对于上面的案例，本案例给按钮加了限制，监听第一次所有的ul旋转结束之后，按钮才能再一次被点击。示例代码：<style> * { padding: 0; margin: 0; list-style-type: none; } .box { width: 960px; height: 540px; margin: 150px auto; display: flex; } .box ul { width: 960px; height: 540px; position: relative; transform-style: preserve-3d; transition: transform .8s; } .box ul li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } img { width: 960px; height: 540px; } / 设定延时 / .box ul:nth-child(1) { transition-delay:0s; } .box ul:nth-child(2) { transition-delay:.2s; } .box ul:nth-child(3) { transition-delay:.4s; } .box ul:nth-child(4) { transition-delay:.6s; } / 拼凑图片 / .box ul:nth-child(2) img { margin-left: -240px; } .box ul:nth-child(3) img { margin-left: -480px; } .box ul:nth-child(4) img { margin-left: -720px; } .box ul li:nth-child(1) { transform: rotateX(90deg) translateZ(270px); } .box ul li:nth-child(2) { transform: rotateX(-90deg) translateZ(270px); } .box ul li:nth-child(3) { transform: rotateX(180deg) translateZ(270px); } .box ul li:nth-child(4) { transform: translateZ(270px); } .btn { width: 1080px; margin: 0 auto; position: relative; height: 0px; top: -470px; } .btn button { width: 40px; height: 80px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: none; outline: none; font: 900 24px/80px ‘宋体’; color: #fff; } .btn button:frist-child { float: left; } .btn button:last-child { / border-radius: 0 10px 10px 0; */ float: right; }</style><div class=“box”><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul></div><div class=“btn”><button><</button><button>></button></div><script type=“text/javascript”> var btn = document.querySelectorAll(‘button’); var box = document.querySelector(’.box’); var _ul = box.querySelectorAll(‘ul’); var num = 0; var flag = true; // btn 获取到的是一个伪数组 btn[1].onclick = function () { if (flag) { flag = false; num++; for (var i = 0; i < _ul.length; i++) { _ul[i].style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; } // 监听最后一个transition事件结束的时候 将flag 置为 true 防止重复点击 _ul[_ul.length - 1].addEventListener(’transitionend’, function () { flag = true; }) } } btn[0].onclick = function () { if (flag) { flag = false; num–; for (var i = 0; i < _ul.length; i++) { _ul[i].style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; } _ul[_ul.length - 1].addEventListener(’transitionend’, function () { flag = true; }) } }</script>效果图：10.5 backface-visibilitybackface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。有两个属性：1、visible背面是可见的2、hidden背面是不可见的 ...