目录
盒模型
在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、内边距（padding）、边框区（border）、外边界区（margin）四部分组成
标准盒模型 （非IE浏览器）
box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 （IE浏览器）
box-sizing:border-box；一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
js的盒模型
| 元素.offsetParent |
获取的是带有定位的最近的父元素 |
| 元素.offsetLeft |
相对于父元素左边的距离 |
| 元素.offsetWidth |
获取元素本身所占据的宽度，包括内容、边框和padding |
| 元素.offsetHeight |
获取元素本身所占据的高度，包括内容、边框和paddind |
| 元素.clientTop |
获取的是元素上边框的大小 |
| 元素.clientLeft |
获取的是元素左边框的大小 |
| 元素.clientWidth |
获取的元素包含padding、内容的宽度，不含边框 |
| 元素.clientHeight |
获取的元素包含padding、内容的高度，不含边框 |
| window.innerWidth | 获取浏览器可使区域的宽度与高度 |
怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
var obj = document.getElementById("box");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // 非IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
BFC
什么是BFC
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。BFC是一种css的布局方式
如何触发BFC
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flexBFC的应用
1 可以用来自适应布局
利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。
给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响
2 可以清除浮动
一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
3 解决垂直外边距重叠
中间添加一个空元素，设置该元素overflow:hidden
清除浮动
为什么要清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动的方法
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}二、 父级添加overflow方法：
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}三、使用after伪元素清除浮动：
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}四、使用before和after双伪元素清除浮动：用法同上
position定位的六个方式
| static | 没有定位 ，可以用来取消之前的定位 |
| relative | 相对定位，相对于自身对位，元素不脱标，依然占位 |
| absolute | 绝对定位，子绝父相，根据有定位的父元素定位，父元素没有，向上级找，直到body 脱标不占位 |
| fixed | 固定定位，始终针对body定位，脱标不占位 |
| inherit | 继承父元素的定位 |
| sticky | 粘性定位 ，吸顶效果 ，接触到头部时自动黏在上面，不接触头部定位无效 |
元素上下左右居中的方法
1 子绝父相，子元素设置top与left为50%，然后可以使用merge-top/left各自身的 -50%，也可以使用transfrom位移自身x与y轴各 -50%
2 使用flex弹性布局
3 子绝父相后，设置子元素top/left/bottom/right 的偏移量都为0，然后设置margin为auto
flex布局
flex基本概念
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
设为 Flex 布局以后，子元素的float、clear,position和vertical-align属性将失效
开启flex布局
display:flexflex容器属性
| flex-direction |
属性决定主轴的方向（即项目的排列方向
|
| flex-wrap |
设置项目是否换行
|
| flex-flow |
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content |
定义了项目在主轴上的对齐方式
|
| align-items |
定义项目在侧轴上如何对齐 一根侧轴的情况下
|
| align-content |
定义了多根侧轴线的对齐方式。
|
flex项目的属性
| order | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 |
| flex-shrink | 定义了项目的缩小比例 默认为1，即如果空间不足，该项目将缩小 设置为0，项目不会缩小 |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间 |
| flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto |
两栏。圣杯，双飞翼布局
两栏布局
- 左边浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素影响
三栏布局
- 圣杯布局和双飞翼布局两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
圣杯布局来源于文章In Search of the Holy Grail，
而双飞翼布局来源于淘宝UED。
虽然两者的实现方法略有差异，
不过都遵循了以下要点：
* 两侧宽度固定，中间宽度自适应
* 中间部分在DOM结构上优先，以便先行渲染
* 允许三列中的任意一列成为最高列
* 只需要使用一个额外的<div >外层 标签
圣杯布局
1 主体部分是由主体container包裹的center,left,right三列，其中center定义在最前面
2 主体设置 padding-left: 200px; padding-right: 150px; 为左右两列预留出相应的空间
3 随后分别为三列设置宽度与浮动，同时对footer设置清除浮动
4 使用负外边距，将left放置到之前预留出的位置上
5 使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置
6 右侧同样
优点：
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载
1 双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2 将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间
3 将right通过margin-left放置到预留位置
4 左侧同样
总结
圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构
而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小
常见的块级、行级、空元素
- 行内元素有：span a b i select strong
- 块级元素有：div p h1-h6 ul table from ul ol li dl dt dd…
- 空元素(没有内容)： <br> <hr> <img> <input> <link> <meta>
css Hack
在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。用来兼容IE
条件Hack
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->只有在IE可以被解析，其他浏览器都是当做注释
属性Hack
*color:#f00; / * For IE7 * /
_color:#ff0; /* For IE6 */ }IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线”
选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */比如IE6能识别 *html .class{}
IE7能识别*+html .class{}
写CSS hack需要遵循以下三条原则：
- 有效： 能够通过 Web 标准的验证
- 只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
- 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉
滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。
src与href的区别
href 是指向网络资源所在位置，建立和当前元素之间的链接，用于超链接。
src是指向外部资源的位置
在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内
link与@import区别
页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：
- link是 标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
- link方式的样式的权重 高于@import的权重；
HTML5与CSS3的新特性
css3
| 常规选择器 | :last-child 选择元素最后一个孩子 :first-child 选择元素第一个孩子 :nth-child(1) 按照第几个孩子给它设置样式 :disabled 属性选择器 选择每个禁用的dom元素 |
| 伪类选择器 | a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上 |
| 伪元素选择器 | ::before {} 选择器在被选元素的前面插入内容和定义css ::after {} 选择器在被选元素的后面插入内容和定义css :first-letter 选择该元素内容的首字母 :first-line 选择该元素内容的首行 |
| 背景 | background-size：规定背景图片的尺寸 background-origin：规定背景图片的定位区域 |
| 边框 | border-radius： 圆角 box-shadow / text-shadow： 阴影 border-image： 边框图片 |
| 文本效果 | text-shadow 向文本添加阴影 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 |
| 渐变效果 | background-image: linear-gradient(线性渐变) background-image: radial-gradient(径向渐变 |
| 变形 | transform:rotate 旋转 transform:scale 缩放 transform:translate 位移 |
| 过渡 | transition : 过度的地方(color/width等) ，时间(1s/.5s) , 状态( linear / ease 等) |
| 动画 | @keyframes 定义动画名称及动画的行为 animation 设置动画相关值 animation-name: fadeIn 调用动画 |
HTML5
| 语义化标签 |
header 定义了文档的头部区域 footer 定义了文档的尾部区域 nav 定义文档的导航 section 定义文档中的结构标签 article 定义页面独立的内容区域 aside 定义页面的侧边栏内容 |
| 表单类型增强 |
color 主要用于选取颜色 date 从一个日期选择器选择一个日期 email 包含 e-mail 地址的输入域 month 选择一个月份 search 用于搜索域 url URL 地址的输入域 |
| 新增的表单属性 |
placehoder 简短的提示信息 min 和 max 设置元素最小值与最大值 required 是一个 boolean 属性。要求填写的输入域不能为空 |
| html5 新事件 |
onresize 当调整窗口大小时触发 ondrag 当拖动元素时触发 onscroll 当滚动元素滚动元素的滚动条时触发 onerror 当错误发生时触发 onmousewheel 当转动鼠标滚轮时触发 |
| 音频视频标签 |
audio 音频标签 video 视频标签 |
| 本地存储 | localStorage 永久存储，除非手动删除或代码删除 sessionStorage 关闭当前会话删除 |
浏览器兼容
不同的浏览器，浏览器的内核是不同的，所以各个浏览器对网页的解析存在一定的差异
浏览器的内核分为两种，渲染引擎，js引擎，所以，兼容问题一般是指css兼容 js兼容
css的兼容
问题： 不同浏览器的标签默认的margin和padding不同
解决方案：
1 通配符 * 设置内外边距为0
2 全局引入一个官方的样式重置表
问题：css3的新属性不兼容
解决方案：加浏览器的前缀来解决低版本浏览器不兼容问题
| -moz- | 火狐浏览器 |
| -webkit- | 谷歌浏览器 / 苹果浏览器等使用Webkit引擎的浏览器 |
| -o- | 欧朋浏览器 |
| -ms- | IE浏览器 |
都有什么css3不兼容
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
问题：块属性标签flot后，又有横行的margin情况下，IE 浏览器margin加倍的问题
解决方案：使用 display:inline 将这个块转换为行内元素
问题：. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度
解决方案：
- 给超出高度的标签设置overflow:hidden;
- 或者设置行高line-height 小于你设置的高度。
问题：IE浏览器div最小宽度和高度的问题
解决方案：
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
问题：超链接访问过后hover样式就不出现的问题
解决方案：将四个伪类选择器按照固定的顺序排列使用
a:link {} // 未访问前
a:visited {} // 访问之后
a:hover {} // 鼠标划过
a:active {} // 点击不松开的时候问题：图片默认有间距，使用通配符也无法清除
解决方案：
1 给所有图片设置flot-left
2 因为是写代码时不在一行，默认羽有个文字间距，用一个div包裹，设置 font-size：0 即可
浏览器css兼容的常用方法：css Hack
JS的兼容
问题：事件绑定的不同
IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){ },false);
解决方案：使用 if 判断当前浏览器或者 try catch
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器，ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
或
var x = document.getElementById("myBtn");
try {
x.addEventListener("click", myFunction);
} catch(x.attachEvent){
x.attachEvent("onclick", myFunction)
}问题：event事件对象问题
火狐不支持不传递形参，直接接受event为事件对象
解决方案：在事件里做一个 || 来兼容
document.onclick=function(ev){ //谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
}
document.onclick=function(){ //谷歌和IE支持，火狐不支持；
var e=event;
}
document.onclick=function(ev){ //兼容写法；
var e=ev||window.event;
}
问题：event.target (事件源对象)问题
IE： event.srcElement
标准浏览器: event.target
解决方案：通过 if 或 try 或三元表达式判断当前浏览器
event = event.srcElement?event.srcElement:event.target;问题：获取元素的非行间样式值不同 即没有设置宽高被自动撑开的盒子的宽高度
IE: dom.currentStyle[‘width’]
标准浏览器： window.getComputedStyle(obj, null)['width']
解决方案：通过 if 或 try 判断当前浏览器
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
return obj.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(obj, null)[attr];
}
}
问题：阻止事件冒泡和默认行为
w3c 阻止冒泡 e.stopPropagation() 阻止默认行为 e.preventDefault()
IE 阻止冒泡 e.cancelBubble=true 阻止默认行为 e.returnValue=false
解决方案：通过 if 或 try 判断当前浏览器
//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
问题：ajax的兼容
IE： ActiveXObject
其他： xmlHttpReuest
解决方案：通过 if 或 try 判断当前浏览器
var oAjax = null;
if(window.XMLHttpRequest){
// 标准浏览器
oAjax = new XMLHttpRequest();
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}