【CSS】inline、block、inline-block、盒子模型
【inline元素】
默认宽度： 文字或图片的宽度
默认高度： 一般是包裹住文字，如果包裹的内容是图片，高度上并不完全包裹图片，规律未知
不可设置： width、height、margin-top、margin-bottom
可设置： padding、line-height、margin-left、margin-right
是否独占一行：不换行，旁边的内联元素会被呈现在同一行
【block】
默认宽度： 父元素宽度100%
默认高度： 根据内容确定
是否独占一行： 独占一行
【inline-block】
兼具inline和block的特点
默认宽度： 文字或图片的高度
默认高度： 根据内容确定
兼容性：
inline元素设置为inline-block时： 所有浏览器是支持的
block元素设置为inline-block时： IE6及以下的浏览器是不支持的。
解决办法：display：inline; zoom：1（触发layout）
【盒模型】
包含以下部分： content、padding、border、margin
由于历史原因，W3C标准出台前，浏览器的盒模型并未统一，因此很多较老版本的浏览器有一套自己的盒模型，如在设置元素width时，浏览器对盒模型的宽度有两种解释：
BackCompat：怪异模式，设置的 width = padding-width + border-width + content-width
CSS1Compat：标准模式，设置的width = content-width，不包括padding-width、border-width
这样，又涉及到doctype的声明，如果没有声明doctype，浏览器会在怪异模式下工作，声明doctype后，所有浏览器就统一在标准模式下工作。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
