box-sizing最佳实践

/* apply a natural box layout model to all elements, but allowing components to change */
html{
    box-sizing:border-box;
}
*, 
*:before, 
*:after{
    box-sizing:inherit;
}

组件需要重置时,只需在组件容器上重置即可:

.component {
    /* designed to work in default box-sizing */
    /* in your page, you could reset it to normal */
    box-sizing: content-box;
}

参考资料

  1. * { Box-sizing: Border-box } FTW
  2. Inheriting box-sizing Probably Slightly Better Best-Practice

发表评论