CSS最基本的几个概念

元素类型，盒子模型，position，float 

元素类型

块级元素（独占一行）

内联元素（行内元素，无法设置width,height）

常见的块级元素：div

常见的内联元素：span,a,img

当然内联元素也可以成块级元素 display:block，相反则是 display:inline；如既想让元素在行内显示又能设置高度 display:inline-block

盒子模型

盒子模型的四部分：margin > border > padding > content

原则上一个元素的宽高只是content，其余的额外算，但是不同的浏览器解释是不一样的

于是W3C解决padding算作额外的宽度提出了border-sizing:border-box，这样border和padding就被包含在宽高之内。

两种特殊情况：绝对定位和浮动的元素均无宽度，在页面上均不占用空间（脱离普通流）

Position

定位有5种情况：

1、static （默认）

2、relative 相对于正常的位置偏移

3、absolute 绝对与最近一级非static的父级

4、fixed 绝对于浏览器

5、inherit 从父级继承position的值

Float

最初只是实现文字环抱的效果。

1、只有左右没有上下

2、不占原有空间，脱离普通流