盒子模型

块级元素

默认情况下，块级元素会另起一行，并尽可能的充满整个容器。块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构

行内元素

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，

只能包含数据和其他行内元素

块级元素和行内元素的区别

块级元素：

1.会另起一行，

2.可以设置width，height，margin，padding，border属性

3.默认宽度是容器的100%

行内元素：

1.和其他元素在同一行内

2.高度和宽度就是内容的高度和宽度

3.可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性

4.border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加

子元素margin影响父元素的问题：

css2.1的盒模型中规定的内容--Collapsing margins:

所有毗邻的两个或更多盒元素的margin将合并为一个margin共享之。

毗邻的定义为：同级或嵌套的盒元素，并且他们之间没有非空内容、padding或border分隔

解决办法：

给父元素加上padding/border/overflow:hidden(IE要添加zoom:1)，

或者给父元素/子元素设置为float/position:absolute.(CSS2.1规定浮动元素和绝对定位元素不参与margin折叠)。