盒模型
1.概念：盒模型就是把一个元素表示成一个矩形盒子，包括content（内容），padding（内边距），border（边框），margin（外边距）
- 两种盒模型：标准盒子模型和IE盒模型的区别
标准盒模型的内容大小就是content
IE盒模型的大小是content+padding+border - 切换盒模型
通过设置box-sizing属性。标准盒模设置为content-box（默认）IE盒模型设置为border-box
BFC
1.概念： BFC就是一个特殊的块，内部元素和外部元素不会相互影响。
2.应用场景：
- 清除浮动（计算BFC高度的时候，内部浮动元素高度也会计算在内）
- 防止外边距重叠
- 自适应布局，消除文字环绕
原理：BFC不与浮动元素重叠
3.创建BFC
float属性（不为none）、overflow属性（不为visible）、position属性（absolute，fixed）、display属性（inline-block，table-cell，table-caption，flex，inline-flex）
margin重叠/高度塌陷
1.概念：
相邻多个块状元素，如果设置的外边距，在垂直方向上，margin会产生重叠，以绝对值大的为准显示
2.防止margin重叠：
创建BFC元素
3.margin重叠应用：
多个段落垂直排列，第一段与上边距离显示一个大小，剩下的段落之间距离显示另一个大小
position属性
规定元素定位类型
1.脱离文档流：元素显示位置与代码排版不一致
2.属性值
- static默认值，无定位
- relative 不脱离文档流，相对自身位置定位
- absolute脱离文档流，相对父级第一个有定位属性的元素定位
- fix相对浏览器定位
- inhert继承腹肌元素的定位方式
3.z-index属性：
使用了relative、absolute、fixed三种定位后，控制元素显示的优先级，其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，（*该属性只对使用了定位的元素有效）
display属性
规定元素应该生成的框的类型
1.常用属性值
- none 不显示
- block显示为块级元素
- inline-block行内块元素，元素按行内排列，内容按块显示
- inline显示为内联元素(默认值)
- list-item：元素像块元素一样显示，并添加样式列表标记。
- table：元素会作为块级表格来显示。
- table-caption：元素会作为一个表格标题显示。
- inherit：从父元素继承display属性。
2.display:inline-block元素显示间隙
消除方法：
- 移除标签间空格
- 父级元素font-size设置为0
伪类/伪元素
1.伪类：为已经存在的元素，在某个状态时候，添加样式
2.伪元素：建不存在于DOM树中的元素，并添加样式
页面导入样式link和@import区别
- link属于XHTML标签，除了加载CSS外，还能用于定义RSS，@import是css提供的，只能加载css
- 页面加载时，link会同时加载，而@import要等到页面加载完才加载
- link兼容上好，@import兼容IE5以上
- link引入的样式支持js修改，@import不支持
overfow属性
定义元素溢出时的显示状态
属性值；
- visible 默认值 内容不修剪，显示在元素框之外
- hidden 内容被修剪，超出部分不显示
- scroll 内容被修剪，滚动条可查看剩余内容
- auto 如果超出，滚动条查看剩余内容
- inhert 继承父元素的overfow属性
href和src的区别
（1）href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的连接，用于超链接
（2）src是执行外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置
为什么将CSS样式放在头部，将JS脚本放在底部
- 为了更好的用户体验,尽快在网页显示内容，将css放在头部引入，与html渲染同步进行
- js具有阻塞性，当执行到script标签是，会先暂停html的解析
script标签的async和defer属性
- async：解析到script标签，与HTML解析并行下载js文件，下载完成，暂停HTML解析，执行脚本
- derfer： 解析到script标签，与HTML解析并行下载js文件，直到解析完html，再执行脚本
常用的浏览器及内核
- IE：Trident内核
- firefox火狐：Gecko内核
- Oprera欧朋：Presto
- webkit:国产大部分双核浏览器其中一核）Safari（苹果），Chrome
DOCTYPE作用？严格模式与混杂模式
1.<!DOCTYPE>声明位于HTML文档中的第一行，处于标签之前，告知浏览器的解析器用什么文档标准解析这个文档。
2.严格模式下，排版和JS以浏览器支持的最高标准运行；混杂模式下，页面以宽松向后兼容的方式显示
3.如何触发混杂模式：DOCTYPE不存在或格式不正确，会导致文档以混合模式呈现
优雅降级和渐进增强
1.渐进增强（progressive enhancement）：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2.优雅降级（graceful degradation）：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
cookie、localStorage、sessionStorage的区别
- cookie每次会在同源请求中携带，webStorage只保存的客户端本地
- cookie存储量只有4kb，webStorage能达到5mb
- cookie在设置的过期时间内有效，lcoalStorage长期存储在客户端，除非人为清除，sessionStorage在浏览器窗口关闭前有效
对标签语义化的理解
- 用正确的标签做正确的事
- HTML语义化让页面内容结构化，便于浏览器，搜索引擎解析
- 没有CSS样式也能以一种文档格式显示
- 阅读源码更方便，便于理解
- 利于SEO优化
清除浮动的方式
1.父级元素给固定高度height
2.父级元素创建BFC(float属性不为none、overflow属性不为visible)
3.浮动元素结尾添加空div，设置属性clear：both
4.父级元素定义伪类
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
重排和重绘
重排：元素几何变化，元素增减，操作DOM，导致渲染树需要重新计算
重绘：单纯外观变化，如背景，颜色变化
避免重排的方式：
尽量减少DOM操作
RGB和opacity
区别：RBG属性设置透明的时候只对元素本身生效，opacity会继承到子元素
RGB对IE6~8的兼容：
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);
opacity对IE6~8的兼容；
filter:alpha(opacity=50); /*对应于opacity:0.5;*/
