块状元素与内联元素的高度与宽度

转自：http://blog.sina.com.cn/s/blog_bfde109e0102w3a1.html，觉得总结的挺实用的，解决了我在搭建静态页面中的一些问题，转给大家。

内联与块状元素的基本属性

1、首先块状元素的高度包括内容高度+内补白+边距+外间隔

                 

2、内联元素的高度与块状一致

3、块状元素的默认宽度为100%，即占满整行，内联元素的宽度根据里面内容的宽度来确定

几种开发过程中div的高度与宽度问题

1、 外层div的高度取决于内部元素的的内容，当我们不设置div的高度时，它的高度将为auto，会根据内容的多少显示不同的高度。注：当元素设置float属性时，将会转为块状元素，且脱离文档流，这时候他的高度不再影响外层元素，因为已经不在外层元素内了。

2、外层div设置float不会影响内部div的float属性，此时外层div的高度取决于内存div，而宽度就不会是默认宽度的100%，而是取决于内容宽度。

3、外层不设置float而内存设置float时，内存脱离外层div，外层div为默认div，高度为0，宽度为100%。内存设置float高度与宽度取决于内容。

动态写入内容对高度的影响

     实际开发过程中很多时候div的内容都是动态写入的，经过测试发现，外层使用float时，内层div的内容动态写入，外层高度取决于内层div的内容。

     如果内层div用了float而外层没有用时，因为内部脱离外层div，所以外层div会出现高度问题，建议外层使用float或者display:inline-block。