CSS Box Model 盒子模型 #73

PolluxLee · 2018-07-29T14:57:14Z

# 标准盒模型

实际宽度不包括 padding 和 border

width = content
height = content

# 怪异盒子

IE6 及以下在怪异模式下，会把盒子解析为怪异盒子，实际宽度包括 padding 和 border

width = content + padding + border
height= content + padding + border

# CSS3 box-sizing 属性

可以随意切换 box-sizing 来告诉浏览器如何解析盒子，该属性有三个值

content-box： width (或 height) = content 标准盒模型
padding-box： width (或 height) = content + padding
border-box： width (或 height) = content + padding + border 怪异盒模型

IE 7 及以下完全不支持 box-sizing 属性，需要 Polyfill

# 在 ResetCSS 中设置 border-box

用继承根元素属性的方式设置 border-box 使得对于单独设置 content-box 或 padding-box 变得无比方便，因为设置其他类型的盒模型之后，其子盒子都继承此属性
当今主流的浏览器都支持 box-sizing 属性，但如果需要支持旧版本的浏览器， Safari (< 5.1), Chrome (< 10), and Firefox (< 29)，就需要添加 -webkit 和 -moz

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