css - box-sizing 属性可以用来干吗呢？

问题描述

问 题

MDN官网中，描述box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。这句可以理解，但说可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。不知道是什么意思？

解决方案

box-sizing: content-box是W3C标准规范的盒子模型，所以在默认情况下浏览器应该按照这个标准去布局页面。但是由于某些历史原因，IE怪异模式下是按照box-sizing: border-box的方式去布局页面的，所以：W3C认为IE怪异模式下的这种行为是不正确支持CSS盒子模型规范的行为，那我在chrome浏览器下怎样模拟这种行为呢？就用这个属性喽box-sizing: border-box。
PS：实际应用中，还是采用box-sizing: border-box这种盒子模型更为普遍和方便，像Bootstrap都是默认采用这种盒子模型的：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这篇关于css - box-sizing 属性可以用来干吗呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！