关于行盒和块盒的小总结

1.行盒子不换行，但是用行盒子就是盒子排列是不合适的，比如代码

    <div>
        <span>Lorem.</span>
        <span>Maiores!</span>
        <span>Doloremque!</span>
        <span>Placeat?</span>
        <span>Saepe!</span>
    </div>
代码span元素是行盒，但是会有空白折叠，盒子和盒子之间有一个空格距离。
所以想要依次排列，可以选择左浮动。这样就没有了空白折叠问题。注意如果左浮动，所有的span元素display属性都会变为block，所以浮动后，所有元素都会是快盒。定位也是，变为了块盒。但是相对定位特殊，display属性不会变，如果是行盒依然是行盒。

关于定位1.所有非常规流盒子(除了相对定位)，块盒不需要撑满整行。除了定位，行盒以及行块盒都不需要撑满整行。

行盒：不独占一行，也无需撑满整行，盒子设置宽高以及上下margin无效，盒子大小和字体大小尺寸相关。(注意img等元素（通过属性展示内容的元素，都是行盒）但是虽然行盒，但可以设置宽高，此类元素默认变为行快盒。
和文本相关的元素也都是行盒，但是此类元素不可以设置快高。
行快盒：不独占一行，也无需撑满整行，其他属性设置和块盒相同。

快盒margin合并

1.常规流盒子 如果子父元素上下边相邻，就会margin合并，所谓合并就是父子的边一起移动margin距离但是边还是相邻的，但是margin值不一样。解决合并问题主要是解决相邻问题。可以用padding ，也可以用border隔开，也可以变成定位，浮动等元素

2.常规流兄弟元素margin合并 主要以2个盒子相邻上下margin最大值为主，为2个盒子之间的距离，也称为所谓的合并，一般情况下不需要处理，看具体情况

3.常规流左右margin不存在合并

4.浮动，定位（除了ralative）弹性盒模型，等不存在margin合并，并且只有常规流元素才有行盒，其他浮动，定位（除了ralative），弹性盒模型等不存在行盒，都会变成块盒。

5.所谓的布局，就是指在其包含快中的排列方式。

6.盒子包含（内容盒，填充盒，边框盒）都是盒子，主要看有没有填充，和边框。外边距，是这些盒子的外面距离，有的时候可以理解为与其他盒子距离，但不准确，只有盒子挨着的时候才可以这么理解。