内联元素和块级元素
不要将元素等价为块级元素和内联元素，它们只是默认值为block或inline而已。当修改了display之后他们是可以随意变化的。
内联元素
- 内联元素宽度为内容本身，无法修改内联元素的宽度
- 内联元素的高度是由行高间接确定的（还会受字体的影响----行盒）
- 没有内容时默认高度为line-height占一行。
块级元素
- 宽度为auto，并不是100%。
- 块级元素的高度是由文档流元素决定的
- 没有内容时默认高度为0
auto表示为自动能占满一行就占一行不影响其他元素就行.
大部分情况下不要将块级元素写为width:100%
溢出
当块级元素内的文档流高度超过了改元素的高度就会出现溢出的现象。这时只需要设置overflow：auto即可
overflow:auto/scroll/hidden/visible
/*x和y可以分开讨论*/
overflow-x
overflow-y
当出现横向的滚动条的时候，行内内容依然在可视区内，不会横向展开。
脱离文档流
- position:absolute/fixed;
- float:
不算在父容器的高度内
盒模型
边框盒模型
box-sizing:border-box;
内容盒模型
box-sizing:content-box;
查看 效果
margin合并
- block元素存在上下margin合并的效果(这本身是为了迎合开发的结果)。
你如果不想要这种效果可以使用inline-block然后将宽度改为100%。
- block存在子元素和父元素上下margin合并的效果。
如果你不想要这种效果就在父级上加一个border或者padding或overflow:hidden;
