/ stylesheet

CSS INLINE 的一些特点以及需要注意的点

支持样式:
这里仅仅讨论不会改变元素类型的属性

content : 内容的高度

  • font : 支持

  • line-height : 多行有效,但是上下会缺,用js获取元素高度会比显示少一点,也就是第一行文字的上面和最后一行文字的下边不计算在元素大小内,但显示上算进去了。

  • margin/padding : 显示上仅在左右有效,上下设置多少都没用,但用js获取或是设置背景时会包括 padding

  • background : 会包括padding(这点应该是正常现象),但显示上由于 padding 的特殊性显示上感觉异常

  • border : 和background同理在padding外显示

  • (min-/max-)height/(min-/max-)width : 无效

  • overflow : 无效

  • box-sizing : 无效

  • text-align : 由于 width 无效所以不存在有多余空间,也就没有对其方式

  • vertical-align : 对自己不会有影响,对其他的行内元素会有影响

  • text-indent : 无效

  • transform : 无效

总的来说,inline 能够设置的样式极其的有限,但是也不应该作为 inline 设置除字体样式颜色以外的样式。
需要注意的是 inline 在设置 margin/padding 和 line-height 对元素产生的影响。
所以不应该为 inline 元素单独设置行高,在它的父级非 inline 元素上设置即可。

在测试过程中还出现这一种情况:
在 inline 元素中嵌套了一个 inline-block 时虽然显示没多大问题,但 inline 元素被截断了,用 getBoundingClientRect 获取 inline 元素时也仅仅获取了被截断的那部分的宽度。所以在布局时应当注意规则 block > inline-block > inline 。