盒模型概要

2019-01-21 15:25 更新

前置知识:	HTML 基础(学习 HTML介绍),，明白CSS是如何工作的 (学习 CSS介绍.)
目的:	重述CSS盒模型的基础并掌握更多相关细节知识。

盒的属性

我们都知道，文档中每一个元素在页面布局结构中均呈现为一个矩形的盒子，我们简化为下面这个模型:

:967px;">

width 和height 设置了内容盒子的宽/高
padding 属性设置了盒子的内边距的宽度(具体属性比如 padding-bottom ，这样你就可以一次只设置一个边的内边距).
border 属性设置了盒子边框的宽度、样式和颜色(设置边框具体属性的参数还有很多)。
margin 属性设置了盒子与周围区域距离的大小，这个属性可以让其他的盒子与当前盒子产生距离(当然，这里一样有很多具体属性可用比如 margin-bottom )。

还有一些值得记住的地方:

Box heights don't observe percentage lengths; box height always adopts the height of the box content, unless a specific absolute height is set (e.g. pixels or ems.) This is more convenient than the height of every box on your page defaulting to 100% of the viewport height.
Borders ignore percentage width settings too.
Margins have a specific behavior called margin collapsing: When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.

注意:请参阅框模型文章的框属性部分一个更完整的概述和一个例子。

Overflow (溢出)

当您使用绝对值(例如固定像素宽度/高度)设置框的大小时，内容可能不适合允许的大小，在这种情况下，内容会溢出框。要控制在这种情况下发生的情况，我们可以使用 overflow 属性。它需要几个可能的值，但最常见的是:

auto: If there is too much content, the overflowing content is hidden and scroll bars are shown to let the user scroll to see all the content.
hidden: If there is too much content, the overflowing content is hidden.
visible: If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)

注意:请参阅框模型文章的溢出部分更完整的概述和一个例子。

Background clip (背景重叠)

框背景由颜色和图像组成，堆叠在一起( background-color a>， background-image 。)它们应用于一个框，并绘制在框。默认情况下，背景延伸到边框的外边缘。这通常很好，但在某些情况下，它可能是恼人的(如果你有一个平铺的背景图像，你只想延伸到内容的边缘)。这个行为可以通过设置 zh-CN / docs / Web / CSS / background-clip"> background-clip 属性。

注意:请参见框模型文章背景剪辑部分为例。

大纲

框的 outline 是看起来像边框但不是框的一部分的东西模型。它的行为像边框，但是绘制在框的顶部，而不改变框的大小(具体来说，轮廓绘制在边框外，边缘区域内部。)

注意:使用outline属性时请小心。在某些情况下，出于辅助功能原因，使用它突出显示网页的活动部分，例如用户点击链接时的链接。如果你确实使用了轮廓，确保你不要让他们看起来像链接高亮，因为这可能会混淆用户。

盒的高级属性

现在我们简要回顾一下，让我们来看一些更有用的高级框属性。

设置宽和高的约束

存在允许更灵活地处理内容框大小的其他属性 - 设置大小约束而不是绝对大小。这可以使用属性 min-width ， -CN / docs / Web / CSS / max-width"> max-width ， ="new"> min-height 和 max-height 。

一个明显的用途是，如果你想允许一个布局的宽度是灵活的，通过将其外部容器的宽度设置为一个百分比，但你也不希望它变得太宽或太窄，因为布局会开始看起来不好。这里的一个选择是使用响应式网页设计技术(我们将在后面介绍)，但是更简单的方法可能是给布局一个最大和最小宽度约束:

width: 70%;
max-width: 1280px;
min-width: 480px;

您还可以将此与下面的行，它应用于其父中心容器的中心:

margin: 0 auto;

0使顶部和底部边距为0，而 auto (在这种情况下)共享容器的左右边距之间的可用空间，以此为中心。最终结果是，当容器在最小和最大宽度约束内时，它将填充整个视口宽度。当超过1280像素宽度时，布局将保持在1280像素宽，并开始在可用空间内居中。当宽度低于480像素时，视口将小于容器，您必须滚动才能看到它。

您可以在 "external"> min-max-container.html ( 查看源代码)。

另一个使用 max-width 的好方法是将媒体(例如图片和视频)限制在容器内。回到上面的例子，图像导致一个问题 - 它看起来确定，直到容器变得比图像更窄，但在这一点图像开始溢出容器(因为它是一个固定的宽度)。要将图像排序，我们可以在其上设置以下声明:

display: block;
margin: 0 auto;
max-width: 100%;

前两个使它的行为像块元素，并将其居中在父容器中。但真正的魔力在第三个 - 这限制图像的宽度是与容器最大相同的大小，因此，如果容器试图收缩小于图像宽度，图像将随着它收缩。

您可以在 "external"> min-max-image-container.html ( -recap"class ="external">查看源代码)。

注意:此技术的工作原理早在Internet Explorer 7，因此它是很好的跨浏览器。

完全改变盒子模型

框的总宽度是其 width ， -CN / docs / Web / CSS / padding-right"class ="new"> padding-right ， padding-left"class ="new"> padding-left ， > border-right 和 border-left 属性。在某些情况下，它是恼人的(例如，如果你想有一个框的总宽度为50％，边框和填充以像素表示)。为了避免这样的问题，可以调整框模型的属性 a href ="/ zh-CN / docs / Web / CSS / box-sizing"> box-sizing 。使用值 border-box ，它将框模型更改为新的模型:

:967px;">

让我们看一个实例。我们将设置两个完全相同的 < div> 元素，每个元素的宽度相同，边框和填充。我们还将使用一些JavaScript来打印每个框的宽度的计算值(最终屏幕上的像素值)。唯一的区别是我们已经给出了底部框 box-sizing:border-box ，但是我们已经离开了顶部框及其默认行为。

首先，HTML:

<div class="one"></div>
<div class="two"></div>

现在的CSS:

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

最后，使用一些JavaScript来测量总计算宽度:

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}

outputWH(one);
outputWH(two);

这给我们以下结果:

那么这里发生了什么？第一个框的宽度和高度等于content + padding + border，正如你所期望的。然而，第二个框的宽度和高度等于通过CSS在内容上设置的宽度和高度。填充和边框没有添加到总宽度和高度; 相反，他们已经占据了一些内容的空间，使内容更小，并保持总尺寸相同。

您还可以在 "external"> box-sizing-example.html ( /box-sizing-example.html"class ="external">查看源代码)。

盒dispaly的类型

到目前为止，我们所说的一切都适用于代表块级元素的框。然而，CSS有其他类型的行为不同的框。应用于元素的框的类型由 display 属性指定。

常见的display的类型

display 可以有很多种不同的值, 其中三种常见的值为 block, inline, 和 inline-block.

A block box is defined as a box that's stacked upon other boxes (i.e. content before and after the box appears on a separate line), and can have width and height set on it. The whole box model as described above applies to block boxes.
An inline box is the opposite of a block box: it flows with the document's text (i.e. it will appear on the same line as surrounding text and other inline elements, and its content will break with the flow of the text, like lines of text in a paragraph.) Width and height settings have no effect on inline boxes; any padding, margin and border set on inline boxes will update the position of surrounding text, but will not affect the position of surrounding block boxes.
An inline-block box is something in between the first two: It flows with surrounding text without creating line breaks before and after it like an inline box, but it can be sized using width and height and maintains its block integrity like a block box — it won't be broken across paragraph lines (an inline-block box that overflows a line of text will drop down onto a 2nd line, as there is not enough space for it on the first line, and it won't break across two lines.)

默认情况下，块级别元素在其上设置 display:block; ，内联元素在其上设置 display:inline; 。

注意:有关更完整的概述，请参阅框模型文章的CSS框类型部分，一个例子。

不常见的display类型

display 属性中还有一些不太常用的值，您将在旅行。其中一些已经存在了一段时间，并得到相当好的支持，而其他是较新的，较不支持。这些值通常创建为使创建网页/应用程序布局更容易。最有趣的是:

display: table — allows you to emulate table layouts using non-table elements, without abusing table HTML to do so. To read more about this, See CSS tables.
display: flex — allows you to solve many classic layout problems that have plagued CSS for a long time, such as laying out a series of containers in flexible equal width columns, or vertically centering content. For more information, see Flexbox.
display: grid — gives CSS a native way of easily implementing grid systems, whereas it has traditionally relied on somewhat hack-ish CSS grid frameworks. Our CSS Grids article explains how to use traditional CSS grid frameworks, and gives a sneak peek at native CSS Grids.