一 盒子模型
1.1 盒子中的区域
一个盒子中最主要的属性：
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
web中的盒子模型与安卓界面设计中的并不一致。安卓开发中布局真实占有宽高依靠width和height决定，布局不会溢出。而web开发中则是以padding、border、宽度和高度共同参与，并且内部会溢出。
web中的padding描述方向顺序：上 右 下 左
padding: 30px 40px;相当于 上下30 左右40
padding: 20px;
padding-left: 30px;//大小属性要有顺序 小属性不能写在大属性前面。
在安卓中只能padding生效 在web中由于层叠性同时生效。
1.2 border
一个border是由三个小属性综合而成：
border-width border-style border-color。
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blueyellow;
二、标准文档流
宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
我们要看看标准流有哪些微观现象：
1）空白折叠现象：
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><imgsrc="images/1.jpg" /><img src="images/2.jpg" />
2）高矮不齐，底边对齐
3）自动换行，一行写不满，换行写。
4.1 块级元素和行内元素
标准文档流等级森严。标签分为两种等级：
1）块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
●如果不设置宽度，那么宽度将默认变为父亲的100%。
2）行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
4.2 块级元素和行内元素的互相转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
可以通过给标签设置显示模式，改变元素的行内、块级性质
display:显示模式。inline(转为行内元素) block(转为块级元素)
div{
display: inline;
background-color: pink;
width:500px;
height: 500px;
}
标准流中的限制非常多，所以可以通过某些手段脱离标准文档流：
css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位
三、浮动
浮动是css里面布局最常用的属性
3.1 浮动的元素脱标
脱离标准文档流后，一个元素就能够并排且设置宽高了。
3.2 浮动元素的互相贴靠
如果有足够空间 就会紧贴前一个元素，如果没有 则递增寻找更前面的元素。若确实没有足够空间，则元素自身单独成行
3.3 浮动的元素有“字围” 效果
当文字够多时，浮动的元素可以挡住盒子，但是挡不住盒子内部的文字。
关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
3.4 收缩
浮动的元素如果没有width,那么将自动锁紧为内容的宽度。
四、浮动的清除
3.1 清除浮动方法1：给浮动的元素的祖先元素加高度。
有高度的盒子，才能关住浮动。
3.2 清除浮动方法2：clear both
网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，方法1，工作中用的很少。
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题，margin失效了。
3.3 清除浮动方法3：隔墙法
用一个空的盒子自带高度和clear both一起使用 撑起一个高度
内墙法：不仅仅让后面的浮动元素不去追前面的浮动元素了，并且能把第一个盒子的高度撑开。
3.4 清除浮动方法4：overflow:hidden
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了，并且margin生效了。这是一个偏方。
3.5 浏览器兼容问题
1) IE6、7，不支持小于12px的盒子。解决办法：将盒子的字号设置小，比如0px。
浏览器hack，hack就是黑客。就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，只要给css属性之前加上下划线，这个属性就是只有IE6能识别的专属属性。解决微型盒子写法：_font-size:0;
2) IE6不支持用overflow:hidden;清除浮动。
解决方法：追加_zoom:1;
解决兼容问题的这两个属性，称为伴生属性
五、margin
5.1 margin的塌陷现象
标准文档流中，竖直方向的margin不叠加，以最大的为准。不在标准流中是没有塌陷现象的。
5.2 盒子居中margin:0 auto;
margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：
注意：
1）使用margin:0 auto; 的盒子，必须有width，有明确的width
2）只有标准流的盒子，才能使用margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用text-align:center;
5.3 善于使用父亲的padding而不是儿子的margin
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
5.4关于margin的IE6兼容问题
1. IE6双倍margin BUG:
1) 当出现连续浮动的元素，浮动方向和margin方向相同时，队首元素会产生双倍margin。
解决方案：使用浮动方向和margin方向相反的属性。并且这是现在开发的一种习惯。
2) 使用hack(没必要)
单独给队首的元素一个一半的_margin属性。
2.IE6的3px BUG：
IE6中，儿子浮动并且使用margin，结果margin的值会多出3px。
解决办法：不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。