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{}//是有效的。
】