標准盒模型、怪異盒模型


CSS中Box model是分為兩種: W3C標准(標准盒模型) 和 IE標准盒子模型(怪異盒模型)。大多數瀏覽器采用W3C標准模型,而IE中則采用Microsoft自己的標准。

重要的一個屬性是box-sizing:content-box || border-box || inherit(默認是content-box)

  • box-sizing:content-box:采用標准盒模型
    Element width = width + border + padding + margin,padding、border、margin不被包含在定義的width和height之內,對象的實際寬度等於設置的width值和border、padding、margin之和,改變padding、border、margin值的話width會跟着變化。
  • box-sizing:border-box:采用怪異盒模型
    Element width = width,padding、margin和border被包含在定義的width和height之內。對象的實際寬度就等於設置的width值,即使定義有border和padding也不會改變對象的實際寬度。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com