- 大家在写代码时一定遇到过这样的情景:好好的页面布局,在调整了border宽度后,一下就乱了。为了避免这种情况,我们可以在css代码开头添加下面这段代码。
* {
box-sizing: border-box;
}
- 你以为这就万事大吉了?当你写着写着突然想更改某个块元素及其内部的box-sizing时 ,我猜你会在下面增加这样一段代码:
* {
box-sizing: border-box;
}
div.a1 {
box-sizing: content-box;
}
- 哈哈。。。也不是不行,但你写着写着会发现,新增的代码只改了a1这个div的box-sizing,并没有改变其内部元素的。因为box-sizing这个属性默认不继承!!!!
下面告诉大家一个小妙招哈!
- 只需在css开头加上下面这段代码:
-
* { box-sizing: inherit; } html { box-sizing: border-box; }