css3相关笔记（四）

1.css3新增的伸缩布局，主轴方向是从左到右，侧轴方向是从上到下： ◆display：flex;，默认从左到右，从上到下 ◆设置主轴排列方向的方式：，flex-direction:row;（默认属性，表示从左至右的排列），flex-direction:row-reverse;（表示从右至左的排列），flex-direction:column;（表示从上到下的排列），flex-direction:column-reverse;（表示从下到的排列），最重要的是横向排列时，当全部子元素的宽小于父容器的宽时，子元素多宽就是多宽，可是若是全部子元素的宽大于父容器了，那么就会自适应父容器的宽，因而子元素原来的宽就无效了，子元素的宽度就变成父容器除以子容器的个数的值了，固然若是有外边距也会加进去用来计算，纵向排列也是如此，可是若是父容器没有设置高，那就不会自适应父容器的高了。 ◆设置主轴对齐的方式：justify-content:flex-start（表示对齐方式是从主轴方向开始的地方对齐），justify-content:flex-end（表示对齐方式是从主轴方向结束的地方对齐），justify-content:center（表示对齐方式是从主轴方向中间的地方对齐），justify-content:space-round（表示对齐方式是从主轴方向空间平分），justify-content:space-between（表示对齐方式是从主轴方向两端对齐中间的居中） ◆侧轴对齐的方式：align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐），align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐），align-items:center（表示对齐方式是从侧轴方向中间的地方对齐），align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start同样），align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸） ◆设置display：flex;后，继续设置每一个子盒子所占父盒子的比例，既伸缩比例，给子盒子设置 flex:number;，若是不参与伸缩比例的设置就不给那个子盒子写flex:number;，当给一个子盒子设置flex:auto时，大小就是原来的大小 + flex:1。 ★这种布局是css3新增的，通常用于移动端的响应式布局，pc端会有兼容性的问题出现，移动端使用的浏览器内核通常都是-webkit-。 ◆在移动端使用box-sizing:border-box;很是的多 ◆meta:vp这个emmte表达式，用于告诉移动端浏览器，要自适应手机大小。 2.开发人员能够为本身的网页指定特殊的字体（web字体、图标字体），无需考虑用户电脑上是否安装了此特殊字体，今后把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。 3.不一样浏览器所支持的字体格式是不同的 ◆TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最多见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+； ◆OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+； ◆Web Open Font Format(.woff)格式 woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+； ◆Embedded Open Type(.eot)格式 .eot字体是IE专用字体，能够从TrueType建立此格式字体，支持这种字体的浏览器有IE4+； ◆SVG(.svg)格式 .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+； 4.当须要为不一样浏览器准备不一样格式的字体时，须要经过字体生成工具来生成各类格式的字体，因而无需在乎字体格式间的区别差别，推荐字体下载的网站http://www.zhaozi.cn/（找字网）、http://www.youziku.com/ （有字库）、http://iconfont.cn/（阿里妈妈）、http://www.iconsvg.com/（SVG素材）、http://fontawesome.dashgame.com/（Font Awesome一套绝佳的图标字体库和CSS框架）。 5.引用特殊字体的语法【 /*  若是要在网页中使用web字体（用户电脑上没有这种字体），*/         /* 声明字体*/         /* 告诉浏览器 去哪找这个字体*/ @font-fack{ font-family: 'webfont';             src: url('font/webfont.eot'); /* IE9*/             src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('font/webfont.woff') format('woff'), /* chrome、firefox */             url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/             url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }  /* 定义一个类名，谁加这类名，就会使用webfont字体*/         .webfont{             font-family: 'webfont';         } //使用 <p class="webfont">谁使用就给谁加上这个类</p> 】,它会先去本地系统里面找这个字体，若是找不到，才会去你声明的字体中写的资源路径中去找，若是是web字体的话，就直接输出相应的字，由于你是根据字来生成字体的，若是是图标字体的话，那么直接输出相依的图标的编码(代码标记)，由于图标字体是经过（编码）代码标记来呈现的，可是图标字体是给伪元素的content属性赋值时，须要去掉前面三个字符改用\替代才可以显示图标字体，不然就会只显示编码。 6.css3查询各类浏览器兼容性问题的网站：https://caniuse.com/，经过http://caniuse.com/ 可查询CSS3各特性的支持程度，通常兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题，须要知道每一个属性，能被那个版本的浏览器支持便可。 7.鼠标滚轮滚动的事件，window.onmousewheel=function(){} 8.jQuery fullPage全屏滚动插件：http://www.dowebok.com/77.html 9.seTimeout(function(),100);表示隔个100毫秒再执行一次，setTimeout只会执行一次，setInterval会循环执行。 10.推荐一款练习javascript代码的游戏：http://codetank.alloyteam.com/（互联网智能坦克机器人（javascript代码练习游戏）） 11.子代选择器只可以针对元素选择器，不可以针对类选择器，后代选择器能够针对元素原则器和类选择器，如【 .section.first.current>.text{}//是无效的，它使用的是 子代选择器； 可是.section.first.current .text{}//是有效的 ，它使用的是后代选择器； .section.first.current .text>img{}//是有效的。 】