HTML&CSS
1.盒子模型
盒子模型都包含 content(内容)，padding(内边距/内填充)，margin(外边距/外填充)，border(边框)
标准盒子模型(content-box)
标准盒子模型是w3c盒子模型，从上图可以看出width/height的计算规则是只包含content部分
IE盒子模型(border-box)
从上图可以看出IE盒子模型的width/height计算包含border，padding和content
只要在HTML文件顶部有doctype声明，浏览器就会使用w3c的标准盒子模型；如果没有声明，则不同浏览器会使用不同的盒子模型去加载，如IE使用IE盒子模型，Chrome和Firefox会使用w3c标准盒子模型
在CSS3中，我们可以自己定义盒子模型(box-sizing)
box-sizing 有两个值，一个是content-box(默认标准模型)，另一个是border-box(IE盒子模型，也加边框模型)
2.行内元素和块级元素
行内元素和块级元素的区别：
1.行内元素会在一条直线上排列，而块级元素占据一行，在垂直方向上排列。
2.一般情况下(HTML5之前)，行内元素只能包含文本和其他行内元素，而块级元素可以包含行内元素和块级元素
按照新的HTML规范，已经不按inline和block来区分元素类型了
替换元素与非替换元素
从元素本身特点来讲，元素分为替换元素和非替换元素
- 替换元素：浏览器根据元素属性来决定元素具体显示的内容。比如说浏览器会根据 img 标签的src来读取图片信息，根据 input 标签的type来决定是输入框还是按钮等。HTML中的 img ，input ， select ， textarea 等都是替换元素，因为这些元素没有实际内容，浏览器根据标签类型或属性来显示这些元素
- 非替换元素：HTML中多数元素都是不可替换元素，其内容直接显示在浏览器上。
接下来就是重点了：
1.块级元素width/height/margin/padding的设置都有效
2.行内替换元素width/height/margin/padding的设置都有效
3.行内非替换元素width/height的设置无效，一般用line-height控制行高(大部分行内元素都是行内非替换元素，如span,a,i,label等)；margin的左右设置有效，上下设置无效；padding的上下左右设置我认为其实都有效，但是由于行高没有发生变化，元素的位置只相对于左右变化，而上下没有变化。
3.定位(position)
static: 静态定位，默认(没有定位)
relative: 绝对定位，相对元素本身定位，也就是相对于它本该存在的位置(正常位置)定位，位置通过 left / right / top / bottom 确定
absolute: 相对定位，相对该元素第一个不是static定位的父元素定位，位置通过 left / right / top / bottom 确定
fixed: 固定定位，相对浏览器窗口定位，位置通过 left / right / top / bottom 确定
inherit: 继承，从父元素继承position定位
定位会脱离文档流，父元素计算高度的时候不会将其计算进去
4.浮动(float)
浮动的特点
浮动元素不会遮住其它元素内容，但是会遮住非浮动元素的布局
浮动元素的父元素在对内容进行排版展示时会忽略浮动子元素的存在(脱离文档流)
浮动元素会自动变成块级元素
清除浮动的方法
父元素设置overflow:hidden
父元素设置height
父元素定义伪类 :after
父元素结尾处加一个空标签：clear both
父元素也设置浮动，但是需要设置宽度…
