常规流中块元素和行内元素的区别

CSS布局分为常规流，浮动流，和绝对定位。这篇文章是对在常规流中块元素和行内元素的区别所做的一个简单总结。

块元素：
块元素盒模型有margin box（left/right/top/bottom） ,padding box(left/right/top/bottom)， content box(width/height)组成。块元素单独占一行，在文档流中垂直排列。会与垂直方向的兄弟节点的margin发生重叠， 如果和它的后代元素之间不存在pading,border的情况的下，那么块元素垂直方向的margin也会和它的后代元素发生重叠。

行内元素：
行内元素在一行内水平排列，当内容超出它的包含块时会被折行，在被断开的地方没有mrgin，paidng,border。对于非替换的行内元素它的尺寸由它里面的内容决定，width,height属性对行内元素无效，垂直方向的margin无效。行内元素的border和pading不会 影响它的line-height； 设置他们可能会使元素与其它行发生重叠。line-height不会影响行内元素的border box;可以设置pading来指定行内元素内容与border box的距离