css3基础知识02-来自深入解析CSS

盒模型

盒模型的默认行为: 当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距，边框，外边距都是追加在宽度上的

1. 计算所占用的宽度或者高度的时候,要借用计算函数calc
2. 调整盒模型box-sizing
   1. box-sizing的默认值为content-box, 即任何指定的宽或高都是设置内容盒子的大小, 将box-sizing设置为border-box后, height和width属性会设置内容, 内边距以及边框大小的总和
   2. 全局设置border-box

   <!-- 给页面上所有元素和伪元素设置border-box -->
      *,
      ::before,
      ::after {
        box-sizing: border-box
      }
   

3. 设置全局的border-box会破坏第三方组件内部的布局方式， 因为设置全局的border-box会影响第三方组件内的每一个元素， 最终我们还是需要在另外对组件内的元素恢复到content-box
4. 有一种简单的方法, 就是利用继承修改盒模型的方式, 让全局修改盒模型border-box更稳健

      :root {
       box-sizing: border-box;
      }
      *,
       ::before,
       ::after {
       box-sizing:inherit
       }
       .third-party-component {
           box-sizing: content-box
       }
   
   

   • 盒模型不会被继承, 使用inherit可以强制继承，可以设置第三方组件的顶级元素设置为content-box; 这样组件内部会被继承盒模型