3.3 CSS盒子模型

Last updated 5 years ago

我们已经具备一些基本的HTML和CSS知识，知道一个网页大概长什么样子。现在我们深入讨论盒子模型，看看HTML元素到底如何在浏览器中展示的。

根据，网页文档中所有的元素都是矩形的盒子（rectangular box），有宽度（width）、高度（height）、内边距（padding）、边框（border）、外边距（margin）。

重要的事情说三遍： 网页中的每个元素都是矩形的盒子。 网页中的每个元素都是矩形的盒子。 网页中的每个元素都是矩形的盒子。

Advice for tutor

  div {
    width: 267px;
    height: 24px;
    padding: 6px;
    border: 0px;
    margin: 0px;
  }

Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的：

盒子大小

计算方法

Width

width + padding-left + padding-right + border-left + border-right

Height

height + padding-top + padding-bottom + border-top + border-bottom

Last updated 5 years ago