css必须要知道的盒子模型重点是什么「整理分享」

1. 盒子模型概述

在前端开发中，盒子模型是一个非常常用的概念。盒子模型指的是，每个HTML元素都可以看成一个矩形的盒子，包括内容区域、内边距、边框、外边距四个部分。这四个部分可以用CSS中的width、height、padding、border以及margin来控制。

在CSS中，有两种盒子模型: W3C盒子模型和IE盒子模型。W3C盒子模型中，width和height指的是内容区域的大小，而IE盒子模型中，width和height指的是内容区域、内边距和边框的大小之和。

实际上，大部分浏览器都采用了W3C盒子模型。但是在某些情况下，可能会出现IE盒子模型，这就需要通过CSS的box-sizing属性进行控制。

/* 使用W3C盒子模型 */
div {
  box-sizing: content-box;
}
/* 使用IE盒子模型 */
div {
  box-sizing: border-box;
}

2. 盒子模型属性

2.1 width和height

width和height属性分别用于控制盒子的宽度和高度，可以使用像素、百分比、em等单位。

div {
  width: 200px;
  height: 100px;
}

2.2 padding

padding属性用于控制盒子的内边距，即元素内容与边框之间的距离。可以使用像素、百分比、em等单位。padding属性可以设置四个值（分别对应上右下左）或两个值（分别对应上下和左右）。如果不使用缩写，必须按照顺序设置四个值。

div {
  padding: 10px 20px 30px 40px;  /* 上右下左 */
}
div {
  padding: 10px 20px;  /* 上下 左右 */
}
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

2.3 border

border属性用于控制盒子的边框。border属性可以设置三个值（分别对应宽度、样式和颜色）或者缩写为一个值。如果要设置四个边框的值，可以按照顺序设置四个值，或者每个值分别指定。

div {
  border: 1px solid #000;
}
div {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}
div {
  border-top: 1px solid #000;
  border-right: 2px dashed #ccc;
  border-bottom: 3px dotted #aaa;
  border-left: 4px double #888;
}

2.4 margin

margin属性用于控制盒子的外边距，即盒子与周围元素之间的距离。margin属性可以设置四个值（分别对应上右下左）或两个值（分别对应上下和左右）。如果不使用缩写，必须按照顺序设置四个值。和padding一样，margin也可以使用像素、百分比、em等单位。

div {
  margin: 10px 20px 30px 40px;  /* 上右下左 */
}
div {
  margin: 10px 20px;  /* 上下 左右 */
}
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

3. 盒子模型小结

盒子模型是CSS中的一个非常重要的概念，它涉及到元素的布局和样式。如果能够熟练掌握width、height、padding、border和margin这些属性，并且理解W3C盒子模型和IE盒子模型的区别，那么就可以轻松地进行前端开发工作。