CSS之box-sizing的用處簡單介紹

標籤：box-sizing   盒子模型   css   

前幾天才發現有 box-sizing 這麼個樣式屬性，研究了一番感覺很有意思，

通過指定容器的盒子模型類型，達到不同的展示效果

例如：當一個容器寬度定義為 width:100%;  之後，如果再增加 padding 或者 border 則會溢出父容器，是向外擴張的

如果使用該樣式，指定為 box-sizing: border-box; 則 padding 和 border 就不會再溢出，而是向內收縮的，這個效果感覺非常實用，

特別是 input 和 textarea 等 現在設定 100% 再直接增加內邊距和邊框也不用再進行複雜的計算和適配了