学习CSS时曾听说行内元素和块级元素的区别之一在于
行内元素无法设置宽高,也无法设置margin,padding.
从w3的官方文档看,其实还需要对行内元素进行再分类讨论.
简单提下就是在计算top/bottom/height/margin-top/margin-bottom时针对8种不同的盒子(boxes)展开了讨论
其中对于行内元素又分成了2类讨论：
对于inline,non-replaced elements,
若top/bottom/margin-top/margin-bottom的计算值为auto,则按0计算.
width和height属性不起作用(doesn't
apply),此时盒子的高度取决于line-height.(而不是所有的内联元素width都不起作用)
参考:
https://www.w3.org/TR/REC-CSS2/visudet.html#q15 (参考10.6 computing heights and margins. )
对于inline,replaced elements,
如果margin-left和margin-right的计算值为auto,则按0计算;
如height/width计算值为auto,且元素有自己的width(intrinsic width),那么 intrinsic width 就被用作width值;
如height/width计算值为auto,但元素没有自己的width(intrinsic width),,但有intrinsic height和intrinsic
ratio;
或当width的计算值为auto,而height有其他的计算值,且元素有一个intrinsicratio;这两种情况下width的值=高度*比例(used height) * (intrinsic ratio)
按CSS 2.1.的标准, 如height/width计算值为auto,元素拥有intrinsic ratio但没有intrinsic height/width,此时width的used value为未定义.
如果height/width的computed value都为auto,元素有ratio,但没有宽高intrinsic height or width, 在CSS2.1标准中宽度的used value 为未定义.
参考：
https://www.w3.org/TR/CSS21/visudet.html#inline-width
关于computed value
computed value是啥? 暂时称为计算值吧.大概就是浏览器在开发者指定值的基础上的再计算结果.
CSS 2.0的定义看,其实就是最终效果的值.
计算值通常是浏览器在考虑继承值,初始值的基础上得到的结果.
还有比如需要将相对单位(relative
values)如em,百分比转换成绝对值( absolute values)。
比如, 我们为某个元素指定font-size: 16px和padding-top: 2em.那么ofpadding-top其实就是32px,这个值其实就是浏览器再计算的结果,而不是开发者一开始就指定的值(specified value).
再比如对于一些使用百分比的属性,如width,margin-right,text-indent, andtop.它们可能会受其他元素的影响,这时
开发者指定的百分比值(percentage specified values)则会被转换成percentage computed values.百分比计算值
此外,对于line-height来说,如果数值后面没有单位(unitless
numbers),该属性也变成计算值
一旦used value被确定下来了(is
determined.),那么相对单位也就可以被转换成计算单位,最终确认下来become absolute.
percentage specified values turn into percentage computed values
咬文嚼字下 https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value
参考:
https://www.w3.org/TR/CSS21/visudet.html#inline-width
https://www.w3.org/TR/REC-CSS2/visudet.html#q15 (参考10.6 computing heights and margins. )
non-replaced-inline-element是指什么
http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element
行内元素的padding和margin仅对左右生效.
http://maxdesign.com.au/articles/inline/
网友评论