CSS | 箱型

CSS中箱型模型是指一个元素在Web页面中所占据的空间。每一个页面元素都是一个矩形框，其中包括元素的内容区域、内边距（padding）、边框（border）和外边距（margin）。这些矩形框被称为元素的“box”。

箱型模型的类型

CSS中有两种不同的箱型模型：W3C标准模型（content-box）和IE传统模型（border-box）。

content-box

content-box模型是默认的盒模型。在content-box模型中，元素的宽度和高度分别指的是元素内容区域的宽度和高度，而不包括元素内边距、边框和外边距的大小。

{
  box-sizing: content-box; /* 默认值 */
}

border-box

border-box模型是IE传统盒模型。在这个模型中，元素的宽度和高度指的是元素包括内边距和边框在内的整个盒子的宽度和高度。这使得CSS相对布局更加容易，因为你不必考虑内边距和边框的大小。

{
  box-sizing: border-box;
}

CSS中的盒子模型属性

width、height

width和height属性用于设置元素的宽度和高度。

{
  width: 100px;
  height: 50px;
}

padding

padding属性用于设置元素的内边距。内边距在元素的内容区域和边框之间。

{
  padding: 10px;
}

也可以对各个方向单独设置内边距：

{
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

border

border属性用于设置元素的边框。

{
  border: 1px solid #000;
}

border包括宽度、样式和颜色。也可以对各个方向单独设置边框：

{
  border-top: 1px solid #000;
  border-right: 2px solid #000;
  border-bottom: 3px solid #000;
  border-left: 4px solid #000;
}

margin

margin属性用于设置元素的外边距。外边距在元素的边框和相邻元素之间。

{
  margin: 10px;
}

同样也可以对各个方向单独设置外边距：

{
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

盒子模型布局

了解盒子模型后，我们就可以开始使用它来进行布局了。

横向布局

横向布局可以使用浮动布局(floating layout)和flexbox布局来完成。浮动布局基于浮动一侧紧贴着另一侧的原理，可以使用clear属性来清除浮动。而flexbox布局则是通过设置容器的display属性为flex来实现，在容器内部使用flex项目来设置横向布局。

/*浮动布局*/
.container
{
  overflow: auto;/*清除浮动*/
}

.box
{
  float: left;
}

/*flexbox布局*/
.container
{
  display: flex;
}

.box
{
  flex-grow: 1;/*自动伸缩，按比例*/
  flex-basis: 0;/*元素的初始长度为0*/
  flex-shrink: 1;/*缩小时元素的伸缩比例*/
}

纵向布局

纵向布局可以使用盒型模型中的margin属性和line-height属性来完成。我们可以使用设置父元素的height属性来限定高度，然后在子元素中设置top和bottom两个方向的margin为auto，然后设置line-height属性等于父元素的height属性。

.container
{
  height: 300px;
}

.box
{
  margin: auto 0;
  line-height: 300px; /* 等于父元素的高度 */
}

总结

盒子模型是CSS布局中的基础概念，理解和掌握盒型模型的使用可以让我们更好地进行页面布局和排版，以及更好地进行Web开发。