关于css

资料

Advanced html css

讲了布局等内容 http://learn.shayhowe.com/advanced-html-css/

Center

估计是关于居中最全的了吧 https://css-tricks.com/centering-css-complete-guide/

居中作弊工具

http://howtocenterincss.com/

css tricks

https://css-tricks.com/

css的基础知识点

盒子模型

W3C标准的盒子模型

IE的盒子模型

CSS的居中问题（水平and垂直)

水平居中

非块状

设置父亲节点text-align: center;
####块状非浮动
设置子节点 margin: 0 auto;

垂直居中

设置子节点为
position: absolute
top:50%;
margin-left:高度的一半
父亲节点为static （这种方法适用于水平居中）

浮动的塌陷问题

这篇有讲细节
http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

额外加一个div标签

在子节点加一个额外标签，然后clear:both;
缺点：增加了无用的标签，不利于语义化

父亲overflow:hidden

这种方式是因为父节点会计算子节点的高度

clearfix

利用伪类
这种方式可以写成css样式，直接引用就行了
bootstrap也是自带的 http://v3.bootcss.com/css/#helper-classes-clearfix

position的四种方式

static

也就是原来的文档流，默认定位

relative

根据static的文档流，改变定位,top,right,left,bottom四个属性来改变定位

absolute

两种定位方式，如果父亲节点是relative的话，那么针对父亲节点定位，不然是针对整个页面定位，也是四个方式,top之类的

fixed

针对浏览器的窗口定位，也是四个方向，top之类的

display的三种

block

块状，一行一个，有高度和宽度 例子 div

inline

内联，一行好多个，没有高度和宽度，例子 span

inline-block

内联块状，一行好多个，有高度和宽度，例如 img