CSS：元素高度与宽度的讨论 系列文章(四)

前言

在之前的文章主要讨论了下面几种元素宽度与高度的计算:

1. 块级非置换元素(例:div)

2. Inline,非置换元素(例:span)

3. Inline,置换元素(例:表单元素)
   这篇文章将继续讨论下列几种元素的宽度与高度的在不同情况下的高度与宽度的计算

• Inline-block,非置换元素在文档流中(例:div设置为inline-block)

• Inline-block,置换元素在文档流中

Inline-block,非置换元素在文档流中

如果元素不设置宽度，则元素宽度等于内容宽度。

Inline-block,置换元素

与Inline,置换元素的规律一样。

总结

1. 置换元素的高宽度计算规律都一样。

2. 非置换元素:

   • 块级非置换元素:如<div>，具体计算见前面的文章

   • Inline,非置换元素:如<span></<span>，宽度与高度的设置对他不起作用

   • Inline-block,非置换元素:元素不设宽度，则元素宽度等于内容宽度