CSS盒模型详解：内容、内边距、边框、外边距

翻滚的胖子
2023-05-30 09:49:55
前端技术
HTML CSS

CSS盒模型详解：内容、内边距、边框、外边距

什么是CSS盒模型？

CSS盒模型是指在网页中，每个元素都被看作是一个矩形的盒子，包含内容、内边距、边框和外边距四个部分。这四个部分的大小和样式可以通过CSS控制，从而实现网页的布局。

内容

内容是盒子中实际显示的内容，如文字、图片等。我们可以通过CSS的width和height属性来控制内容的大小。

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

内边距

内边距是内容与边框之间的空白区域，我们可以通过CSS的padding属性来控制内边距的大小。

div {
  padding: 20px;
}

边框

边框是盒子的边界，我们可以通过CSS的border属性来控制边框的大小、样式和颜色。

div {
  border: 1px solid #000;
}

外边距

外边距是盒子与其它元素之间的空白区域，我们可以通过CSS的margin属性来控制外边距的大小。

div {
  margin: 20px;
}

如何应用CSS盒模型来实现布局？

在网页布局中，CSS盒模型是非常重要的概念。通过控制盒子内的内容、内边距、边框和外边距，我们可以实现各种复杂的布局效果。下面是一个简单的例子，通过CSS盒模型实现了一个两列布局。

<div class="container">
  <div class="left">
    <p>左边栏</p>
  </div>
  <div class="right">
    <p>右边栏</p>
  </div>
</div>

<style>
.container {
  width: 800px;
  margin: 0 auto;
}
.left {
  width: 200px;
  float: left;
  background-color: #f0f0f0;
  padding: 20px;
}
.right {
  width: 600px;
  float: left;
  background-color: #d0d0d0;
  padding: 20px;
}
</style>

通过设置容器的宽度和居中显示，左边栏的宽度和浮动方向，以及左、右边栏的背景色和内边距，我们就实现了一个简单的两列布局。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com