论 div 和 span 的根本区别

在 html 盒子模型中，div 和 span 都是最常用的容器类型，div是块元素(block)，span是行内元素(inline-block)，这些都是很多前端开发者认知的，但有他们之间有个很小的区别，就很少人注意到。

1、边框长度 

     默认情况下：div对应的宽度是随着父容器扩展的(受父容器控制，延长到容器的右边界)，其宽度不会文本宽度影响，而span得宽度取决于包含的文本

     

        
div
        span
    

如果此时有对span设置宽度，则设置的宽度无效。

        
div+div+div+div
        span+span+span+span
    

如果最外层没有父节点，则div的扩展宽度收body影响。

2、容器宽度

对容器内容设置换行，div容器换行后，内容虽不填充满容器，但容器宽度不随内容文本的而变化，仍然保持矩形，但span容器宽度，跟随其中的内容流，仍然遵守上面第一点的性质，div宽度跟随容器，span宽度跟随内容。

div+div+div+div+divdiv+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div
        span+span+span+span+span+span+span+span+span+span+span+span+span+span+span+span+span+span+span

总结，回归到日常开发中，div更适合使用于图像，嵌套盒子。而span更适合容纳文本或者行内元素的使用方法。