HTML5

标准盒模型：width=200px     padding=10      boder=5 marging=10

标准盒模型宽度算法.

　　自身宽 w+p+b=230   占页面.w+p+b+m=250

IE盒模型 

　　自身宽 200px

　　占页面 w+m=220

标准盒模型转IE   

box-sizing：border-box

 

 

 用定位移动的话原位置会保留位置

可以在父级用相对定位 子级使用绝对定位推文档流就不会占用原位置

 

 

兼容

w3help网站上面有很多关于兼容的问题

IE的内核Trident

火狐、：gecko

苹果：webkit

欧朋以前使用的内核：presto

 

在HTML中  docutype有两个目的

1.对文档进行有效性的验证，加载页面时不会下载dtd并检查合法性

2.决定浏览器的呈现模式

 

如果没写doctype/ 编写错误 古老的     或出现怪异模式/混杂模式

<!–- 默认先调用css.css样式表 -–>
<link rel="stylesheet" type="text/css" href="global.css" />
<!–-[if IE 7]>
<!–- 如果IE浏览器版是7,调用ie7.css样式表 -–>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–->
<!–-[if lte IE 6]>
<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-–>

* lte:它是less than or equal to 的简写，意思是 小于等于
* lt:less than, 小于
* gte:greater than or equal to, 大于等于
* gt: greater than，大于
* !: 不等于

渐进增强： 针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效果交互改进，追加功能。
优雅降级： 一开始就构建完整的功能，再针对低版本浏览器进行兼容。

 

LESS  下面可以直接引用命名  不用在赋值

用@声明变量

@命名：值；

混入 定义一个基本类型

.命名{

　　margin

　　padding

　　border:1px dashed  red

}

用的时候直接.命名就行

混入带参数的用法 在元素中带入到参数

.命名（@can）{

　　borde-radius：@canshu；

}

border-radius调圆角

直接.命名（）  括号里面写值

 

 

怎么使用蒙版

简述：

在同一个父级里面

一张图片 一个div 给父级绝对定位 div绝对定位 div跑进img里面 之后选择用top或left定位div在里面的位置

给div用transition设置渐变

用hower选中div移动的方向