【大喵前端学习笔记】一种巧妙设置box-sizing的方法

• 大家在写代码时一定遇到过这样的情景：好好的页面布局，在调整了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;
  }

        后面想更改哪个容器及其里面的box-sizing就直接写，容器内部元素会继承。