Simple Note

box-sizing的属性值

2016.03.01

面试的时候问这玩意有几种属性值,我说有四种=_=! 然而我只记得平时用过两种,另外两种死活想不起来,于是就草草略过了。

查了一下,实际上它的属性值只有两种:

  • content-box:默认值,采用我们最常见的盒模型,元素盒子的宽高只对应内容区,如果元素有边框、内边距、外边距,元素盒子的实际宽度就不等于width属性的值。
  • border-box:采用IE在怪异模式下的盒模型,更加符合人的直觉,元素盒子的宽高会把边框和内边距包括在内,外边距不算。

还可以包含CSS的全局属性值:

  • inherit:从父元素继承对应属性的计算值。
  • initial:规范所规定的属性默认值。
  • unset:若是可继承属性,等同于inherit,不可继承属性等同于initial。

具体哪些属性可继承哪些不可继承?
这个答案不错:Which CSS properties are inherited?
不可继承的属性,貌似大部分都跟元素盒子直接相关,比如内边距、外边距、边框、宽高、绝对定位值。

Comments
Write a Comment