CSS-Box-sizing屬性

使用情境

在預設的情況box-sizing: content-box，padding的寬高，會被計算到元素的長寬中;
如果希望元素的內距(padding)和外框(margin)不會增加元素本身的寬高，則可以使用box-sizing: content-box

before

瀏覽器預設值，box-sizing屬性，其值為content-box

• ==content-box：元素的實際寬高會再加上padding 和 border==

  定義box1的寬為300px，高為50px，可是右方用瀏覽器查看元素時，發現尺寸變成330*80，是因為預設的情況，瀏覽將padding與border也算進元素中
  

after

定義所有元素的box-sizing屬性，其值為border-box

*{
    box-sizing: border-box;
}

• ==border-box：元素的實際寬高不受padding 和 border影響==

  padding不會被增加到元素中，而border則算在元素之內，所以元素實際寬高仍保持為300*50