CSS历史

CSS 2.1：流行度最广
CSS 3：2011年
Tip:前端开发从IE 8开始兼容：低于IE 8的，不看、不管、不测试

CSS周边工具

1.LESS CSS:一种简化、功能更多的CSS语言
2.SASS：一种简化、功能更多的CSS语言
3.PortCSS：一种CSS处理语言（修正）

笔记

1. 将块级元素整合到一行:
   子元素float:left
   父元素加上clearfix 属性

2. 居中：
   内联元素：在父元素上加text-align:center
   宽度固定的块级元素：

3.文档流：文档内元素的流动方向。
内联元素：从左往右流动，如果遇到阻碍就重起一行继续从左往右流。（流动过程中文会拆开换行，英文默认不分开，需要的话要设置属性 word-break:break- all; ）
块级元素：从上往下流动，每个块级元素另起一行。

4. 块级元素的高度由其内部文档流元素的高度总和决定。
   （举个栗子，div 高度由其内部文档流元素的高度总和决定。）

5. font-size:字体中最高一点和最低一点之间的大小，span的高度就是默认建议行高，不是字体高度。
   <科普>：字体是基线对齐，每种字体都有一个建议行高，而且行高在不同机器上可能不同。所以如果要锁定行高的话，可以把line-height定一下。line-height 可以确定内联元素高度。
   字体垂直居中的方法：

6. div元素不要轻易加height,极其容易出BUG,即不要定死height,width

7.max-width>width:自适应

8.span不接受宽高
除非变成inline-block元素：span{display:inline-block; width:70px; height:29px; line-height:29px;}

9.span[display:block]=div

10.CSS布局分成横向和纵向

TIPS:
1、当selector 表示过于简单时，容易影响别人。所以采用 .xxx>.xxx>.xxx 是常用做法。
2、两个span元素之间会有空格，是因为代码中<span>和<span>之间有回车键。
3、CSS调试大法之一：加border

内联元素
宽度：不受width的限制，由文字内容决定的，padding 和 margin 可以改变宽度。
高度：不受height的限制，padding 和margin 不能影响高度。由行高line-height决定，默认为文字的建议行高。

块级元素
宽度：1、可以自行设置width的值；2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。3、需要注意的是如果宽度写了100%，应该是元素内容的宽度（content）等于父元素的宽度，元素的宽度应该等于这个宽度加自身的border，会凸出来一部分。
高度：1、可以自行设置height的值（不推荐定死height，自适应更好）；2、默认值为0；3、由内部文档流的高度总和决定（还包括padding，margin，有可能有margin合并的情况），当元素脱离文档流时，不能用于父元素高度的计算；

布局

CSS布局.png