css盒子模型有几种?以及盒模型设置？

css盒子模型有几种?以及盒模型设置？

---

1.CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

2.W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

（1）W3C盒子模型(标准盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin

.box {
  width: 200px;
  height: 200px;
  border: 20px solid black;
  padding: 50px;
  margin: 50px;
  }
  

（2）IE盒子模型(怪异盒模型)

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin

.box {
  width: 200px;
  height: 200px;
  border: 20px solid black;
  padding: 50px;
  margin: 50px;
  }

3.两种模式下如何解决样式的兼容性问题

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

4.设置盒子模型（CSS3指定盒子模型种类）：

语法：

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。