我盆友的学习笔记，记得挺详细的 部分摘自博友
HTML5 CSS3 部分css属性或标签
1、 <!DOCTYPE html> 文档类型声明，告诉浏览器如何渲染html
<html lang="en"> 页面为什么语言
2、html5与html4有什么不同？
头部声明；
语义化标签，更人性化，更生动；header nav section aside article footer address等
3、<meta charset="UTF-8"> 字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>各种IE的兼容性设置 优先使用IE最新版和Chorme
<meta name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maximum-scale=1,user-scalable=no"/> 创建一个虚拟的窗口 窗口宽度为设备宽度 初始缩放比例 最小缩放比例 最大缩放比例 是否允许缩放比例
width=640(微信常见) user-scalable=no,禁止缩放，默认是yes
5、 a,img{
-webkit-touch-callout:none} //禁止长按超链接或图片弹出菜单kk
html,body{
-webkit-user-select:none;
user-select:none;} //禁止选中文本
button,input,optgroup,select,textarea{
-webkit-appearance:none;} //去掉webkit默认的表单样式 如果不去掉在IOS中不会改变样式
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color:rgba(0,0,0,0)};//去掉a,input,和button点击时的蓝色外边框和灰色半透明背景； 浏览器支持IOS
6、 input::-webkit-input-placeholder{
color:yellow;} //修改-webkit placeholder样式
input:focus::-webkit-input-placeholder{
color: #foo} //input:focus 获得焦点时 placeholder样式
input::-webkit-input-speach-button{
display:none;} //隐藏Android的语音输入按钮
7、 body{
-webkit-text-size-adjust: 100% !important}//禁止IOS调整字体大小；
默认就随着终端改变字体，如果body设成全局或者继承就会随着终端改变，不要设成全局或者继承的
-webkit-text-size-adjust:none ; 禁用webkit内核浏览器文字调整大小
8、 audio音频 video视频 canvas画布 svg本地存储地理定位
chrome/360极速版/苹果ios/搜狗浏览器 内核 webkit
火狐内核 MOZ 兼容opera前缀 -o 兼容IE内核 -ms
9、sass/scss 预处理器，用于书写css样式，预编译
继承： extend
使用sass时，继承是一个很不错的减少css重复代码的功能。继承可以让一个选择器继承另一个选择器所有的样式，并联合声明。
方法： @extend 除了包含和群组以外的样式都已用来继承
10、sass
后缀名： scss 和sass 两个功能一样、
输出样式的风格有四种，默认为nested
nested:嵌套缩进的css代码
expanded:展开多行的css代码
compact:简洁格式的css代码
compressed: 压缩后的css代码
变量以$开头 ！default默认值
如果在字符串中引用变量，则需要将变量名字在 #{}中
默认变量只需在变量值后加上 ！default
嵌套中的&表示父元素选择器。
css属性页可以嵌套（用的较少）
混合器：@mixin 调用@include
占位符选择器: %
占位符选择器的优势在于声明后，如果不调用则不会产生类似。
.text的多余css代码，占位选择器通过%标示来定义，也通过@extend来调用
%名字{样式} 调用 @extend %
运算： Sass 中，运算只是其基本特性之一。sass做加法运算是可以不考虑参数带单位，但需要单位同一，加号可以不需要空格隔开;
减法注意空格； 乘法只需一个乘数带单位（否则会出错），em/px/%等多种单位；
做除法,css中“/”已经作为一个符号，不会报错 。做为除法： 函数，变量，表达式的一部分，圆括号包裹，例width： （100px/2）；
做除法时两个都带单位时，得到的值没有单位。
详细案例请参观博客：http://www.cnblogs.com/Medeor/p/4966952.html
数字： 如1,2,13，10px （如果带单位，单位需同一）
字符串拼接（+）：
p::before{
content: "hello" + -world ;
font-family: sans- + "serif"; }
输出结果：
p::before{
content: "hello-world";
font-family: sans-serif;}
颜色： 如： blue #04a3fg（分段计算，红绿蓝rgb） rgba(255, 0,0,0,5);
布尔型：例 true ,false
空值： 例 null
值列表： 用空格或逗号分开 nth-child(index) nth-of-type(index)
循环：
$for $i from <start> through <end>
$for $i from <start> to <end> 区别： to 和 through区别 包含最后一个值？ through包含
用法： $for $i from 1 to 3{
.item-#{$i} {
width: 2em*$i}
}
输出： .item-1{ width: 2em} .item-2{width: 4em} .item-3{width: 6em}
总结 $i 是变换的值 .item-${$i}#{1} 输出 .item-11 .item-21 .item-31 变换十位数
@while循环
用法：
$types: 3 ; $type-width: 20px
@while $types >0{
.while-#{$types}{
width: $type-width + $types; （加号 拼接）
}
$types: $types-1;
}
输出结果:
.while-3{ width: 23px} .while-2{width: 22px} .while-1{width: 21px}
@each 循环
遍历一个列表，从列表中取值；（数组或对象）
循环指令的形式： @each $var in <list>
$list: adam john wynn mason kuroir;//$list 是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png");}
}
}
.author-bio {
@include author-images;}
输出：
.author-bio .photo-adam {
background: url("/images/avatars/adam.png"); }
.author-bio .photo-john {
background: url("/images/avatars/john.png"); }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png"); }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png"); }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png"); }
11、CSS3动画
过渡动画 transition: name duration easing delay
（transition-name transition-duration transition-timing-function transition-delay ）
name 动画的属性或样式（width，color），不写或设置为all ，表示要过渡所有发生了改变的属性；过渡多个属性，属性与属性之间用逗号 隔开；
duration:定义过渡效果执行时间 m/ms
easing: 动画曲线 ease-out 由快到慢 linear:匀速（默认） ease-in-out慢快慢 ease-in:由慢到快
注意： transition 不要出现在hover里伪类
例： -webkit-transition: width 1.5s ease-in 0.5s(延迟执行) 超过两个时用all
animation关键帧动画
animation-interation-count 元素动画的循环次数 默认值1； infinite无限循环
animation-direction: 元素动画播放的方向，（是否允许反向播放）； alternate动画播放在第偶数次向前播放，第奇数次反方向
@keyframes 关键帧，用于引出(创建)一个动画 @keyframes animationname {keyframes-selector {css-styles;}}
@keyframes name1{ from{};to{};} @keyframes name2{0%{}; 50%{}; 100%{}}
css3中的动画框架： animate.css
使用方法： <div class="animate zoomIn">进入放大的动画</div>
常用的动画类型： bounce弹跳； flip 掷； flash闪现； shake震动发抖, swing秋千悬挂, wobble摇摆摇晃； ring环形； fadeIn淡入 fadeout淡出 rotate翻转
transform: translate() /scale() / skew()/ rotate() 主要对元素进行2D转换 translateX() translateY()等 后面几个属性也一样
transform-origin: x y; 定义rotate旋转，skew倾斜和scale缩放中心点；
x，y可以使具体数值/百分比/(left,top,right,bottom);
默认在 元素的中心点上； 中心点的改变 对translate位移没有影响
transform: translate3d() / scale3d() / skew3d() / rotate3d() 3D转换 此时会开启硬件加速
translate()位移,是占位的 scale() 缩放 skew()扭曲 rotate(60deg)旋转 单位 deg
vertical-align: middle 控制文字和图片居中对齐的方法 注意： 一行中文字也有图片用定位做（对齐的基线默认 baseline，图片一般较大，需要下移一下）
手机端要建立一个大盒子，宽度100%，高度 auto
$list : red blue green orange #fff #000; background:nth($list,3)
box-sizing: border-box 盒子的width和height 包含边框（content-box ==border-box）
鼠标状态： cursor: pointer手的状态/ move可移动状态 / wait转圈状态(加载状态)
box-shadow: x偏移 y偏移 模糊度 颜色 inset (内阴影)
相对单位： rem ，em；
区别： rem 相对于根元素html的字体大小。doc默认的是 16px； html{ font-size: 625%;body{font-size: .14rem}} 谷歌不支持小于12px 的字体。 （不继承父元素的大小） 100px==1rem 不继承字体大小，先定义一个全局的
em： 相对于父元素，且字体大小可以继承的。
before 和 after伪类
在选择器前后定义样式或添加新元素
选择器::before{
content:"文字"，
display：table； //其他css样式}
选择器::after{
content:"wenzi",
display: table; //其他css样式 }
字体库： 网址： http://icomoon.io
字体模块 @font-face 把自定义的web字体，嵌入到你的网页中，当用户电脑上没有此种字体时，自动从网上下载。
用法： 字体类型： .woff() .ttf和.otf .eot(IE9only) .ttf(True Type字体)和.otf(OpenType) EOT (Embedded OpenType)
@font-face{
font-family: 字体名称（自定义），
src: url("自定义字体路径，相对/绝对"),
,url('font.eot'); /* IE9 */ //IE9只支持 .eot格式的字体}
注：Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
Internet Explorer 8 及更早IE版本不支持@font-face 规则.
.woff 是web中最佳格式 .eot是IE专用字体 .svg是基于svg字体渲染的一种格式
字体的调用： h1{font-famify: "字体名字"}
14、弹性盒(伸缩盒)
由于老伸缩盒（09年 ），与新伸缩盒差异大，只说新盒子(11年)；
向内挤压： -webkit-box-sizing: border-box
新盒子：：
display: -webkit-flex
flex-direction: row | row-reverse | column | column-reverse 排列方式
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
-webkit-flex-grow: 分配父元素剩余空间扩展比率
flex-sharink: 按比例收缩比率
flex-basis: 伸缩基准率
flex-basis: length | percentage | auto默认 | content内容自动计算宽度
flex-flow：<' flex-direction '> || <' flex-wrap '> 子元素的排列方式 | 是否多行
justify-content: flex-start | flex-end | center | space-between | space-around
space-between:第一个元素靠左边界，第二个元素靠右边界，中间默认是平均分配
space-around: 两两之间的空白空间相等，同时第一个元素的空间以及最后一个元素的空间为其他空白空间 的一半
align-items: flex-start | flex-end | center | baseline | stretch
stretch : 使项目边距盒的尺寸，接近所在行的尺寸，但同时会遵照 min/max- width|height 属性的限制
弹性盒子是否换行：
flex-wrap: nowrap | wrap | wrap-reverse
默认是nowrap容器为单行，该情况下子项可以能会溢出容器
wrap： 定义flex容器为多行，子项内容可能会断行
wrap-reverse: 反转 wrap 排列
说明:该属性控制是单行或是多行，同时横轴的方向决定了新行堆叠的方向
l
