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

举个例子，代码如下
<div id="box">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>
给box设置宽度1000px，高度自动。a、b、c这个三个div宽度300px，高度300px。
a、b、c这三个div的宽度加起来比box的宽度还小，然后这三个div块级元素给个都会单独占据一行，不管这一行剩余的空间还能不能容纳其他内容，这一行归我了你们都去下面就是这么霸道，，如图
然后行内元素只会占据本身位置多余的位置不管，我只要我自己的其余的都给你们了，只要父级宽度允许会一直横着排下去，当内容超出时才到下一行，如下图
这是一个最直观的区别，另外还有两个区别就是
行内元素宽高无效及width和height，然后margin和padding的top值和bottom值无效只有left值和right值有效；
最后一个就是块级元素可以包含块级元素和行内元素(内嵌)，但是行内元素不能包含块级元素(内嵌)；
纯手打，望采纳，谢谢！