现在我们已经熟悉了HTML和CSS。学习了它的基础知识。现在让我们更深入地了解页面上元素的呈现和大小。在本课中，我们将讨论什么是盒子模型及其工作原理。我们还将在课程中学习一些新的CSS属性，并介绍三个长度单位。元素是如何显示的在了解盒子模型之前，我们先来了解一下元素是如何显示的。在第二课中，我们学习了块元素和行内元素的区别。快速回顾一下，块元素从一个新行开始并占据所有可用宽度，无论它们是否有内容。另一方面，内联元素是并排显示的，它们的宽度会随着内容的变化而变化。块元素通常用于大块内容，例如标题、结构元素。内联元素用于小块内容，例如加粗或斜体一些句子。display属性显示元素（例如块元素、行内元素和其他元素）如何由display属性display确定。每个元素都有一个默认的显示属性值。与其他属性值一样，可以覆盖此属性值。显示值有很多，最常用的有block、inline、line-block和none。我们可以使用CSS选择一个元素，然后更改并重新声明该元素的显示属性的值。如果值为block，则该元素可以显示为块元素。p{display:block;}将值设置为inline以将元素转换为行内元素。p{display:inline;}inline-block比较有意思，它可以让元素的所有块元素的属性生效。但是，元素显示为内联元素，不会另起一行。p{display:inline-block;}两个内联块元素之间的间隙。inline-blockinline-block元素有一个很重要的点，就是它们不是首尾相接的。两个行内块元素之间有一个小间隙。这种差距虽然令人讨厌，但却是正常的。我们将讨论为什么存在这个差距以及如何消除它。最后是none属性值，它会完全隐藏该元素，在页面渲染时将其视为不存在。任何包含在该属性值元素中的元素都将被隐藏。div{display:none;}了解元素如何显示以及如何修改display属性非常重要，因为它会影响盒模型的渲染效果。在讨论盒模型时，我们就会知道它们之间的区别、意义和影响。什么是盒子模型？根据盒子模型的概念，页面上的每个元素都是一个矩形盒子，有宽度、高度、padding、border和margin。页面上的每一个元素都符合盒模型的定义，因此非常重要。让我们使用一些新的CSS属性来熟悉它。使用盒子模型，每个元素都是一个矩形盒子，有几个属性可以决定盒子的大小。盒子的核心属性是元素的宽度和高度。这两个值可能是由元素的display属性，元素的内容，或者具体的width和height属性值产生的。填充和边框扩展了元素的高度和宽度。最后是我们在边框外定义的边距。盒模型对应的CSS属性有：width、height、padding、border、margin。让我们看一个例子：div{border:6pxsolid#949599;高度：100px；边距：20px；填充：20px；width:400px;}根据盒模型，元素总宽度计算如下：margin-right+border-right+padding-right+width+padding-left+border-left+margin-left使用上面公式，可以算出高宽值例子中Width:492px=20px+6px+20px+400px+20px+6px+20pxHeight:192px=20px+6px+20px+100px+20px+6px+20px毫无疑问盒子模型是HTML和CSS中最令人困惑的部分之一。我们将width的值设置为400像素，但元素的实际宽度为492像素。默认情况下，框模型是可加的。所以要确定盒子的实际尺寸，我们需要考虑四个边的内边距、边框和外边距。width不仅仅是width属性的值，还有左右两边的padding、borders、margin。到目前为止，上述属性似乎没有多大意义。因为这只是为了阐明构成盒子模型的所有属性：宽度、高度、填充、边框和边距。宽度和高度每个元素都有默认的高度和宽度。虽然宽度和高度都可能为0像素，但默认情况下浏览器会以该大小呈现每个元素。元素的默认宽度和高度取决于元素的显示方式。如果该元素是页面布局的关键元素。然后需要设置具体的宽度和高度属性值。在这种情况下，只能为非行内元素指定属性值。width元素的默认宽度取决于其display属性的值。块元素的默认宽度为100%，占据整行。内联元素和内联块元素的宽度都会随着元素内容的变化而变化。内联元素没有固定的尺寸，所以width和height属性只对非内联元素有效。下面是一个为非行内元素设置宽度的例子：div{width:400px;}Height元素的默认高度取决于它的内容。元素根据内容的需要垂直扩展或收缩。我们可以使用height属性为非行内元素设置高度：div{height:100px;}调整行内元素请记住，行内元素不支持width和height属性及其关联值。块元素和内联块元素支持width和height属性及其对应的值。边距和填充浏览器根据元素设置它们的默认边距和填充，使其更易读。让我们使用基于文本的元素来看一下这种现象。默认边距和填充可能因浏览器和元素而异。我们在第1课中谈到了CSS重置，以将这些差异缩小或归零。这样我们就可以从头开始定义我们需要的样式。margin属性设置元素周围的空间量。边距在元素的边界之外并且是完全透明的。边距帮助我们将元素定位在页面的特定位置，并使它们远离其他元素。例子如下：div{margin:20px;}margin有一个特殊的现象，即垂直边距margin-top和margin-bottom在内联元素中无效，但在块元素和内联块元素中有效。padding属性类似于margin属性，只是它在边框内部，padding为元素提供内部空间。一个例子如下：div{padding:20px;}padding属性和margin属性不一致的地方是垂直padding在inline元素中也是有效的；尽管垂直填充出现在元素基线的上方或下方，但它确实存在。行内元素的边距和边距行内元素的padding和margin的实现不同于块元素和行内块元素。只有水平margin-left和margin-right对外边距有效。padding对内联元素完全有效，但是垂直的padding-top和padding-bottom显示在元素基线的上方或下方（译者注：在内联元素中添加垂直padding后，内容部分在视觉上没有偏移）。块元素和行内块元素的边距和填充显示正常。如何声明边距和边距在CSS中，很多属性都有多种声明方式。常见的写法是一个属性一个值一一列出。但是我们也可以使用速记，一个属性包含多个值。并不是所有的属性都有简写形式，所以我们必须确保写出的属性和值的结构正确。margin和padding的写法有两种：normal和abbreviated。当元素的所有边都设置了相同的边距时，可以使用margin属性，只指定一个值：div{margin:20px;}如果上下边距的值相同，则取值的左右边距是一样的，我们可以输入两个值。设置前面的顶部和底部边距的值。下面的例子设置上下边距为10像素，设置左右边距为20像素：div{margin:10px20px;}如果四个值不一致，那么我们在上、右、下、左的顺序。比如我们设置一个上外边距为10px，右外边距为20px，下外边距为0px，左外边距为15px的div：div{margin:10px20px015px;}如果我们要设置多个值,margin和padding优先。但是我们也可以用普通的写法输入属性和值的一一对应关系。每个属性名称（本例中的边距和填充）后跟一个破折号-以及要设置值的框的方向：顶部、底部、右侧和左侧。例如，padding-left属性只接受一个值，它设置元素的左内边距；margin-top只接受一个值，它设置元素的顶部外边距。div{margin-top:10px;padding-left:6px;}当我们只想在一侧设置margin和padding值时，这种常见的写法是最好的选择。保持代码精确可以防止混淆。例如，我们是否只希望元素的上、右、左、左外边距为0，是否只希望下外边距为10像素？用通俗易懂的语言输入属性和值可以使目标更加具体。在处理三个或更多值时，缩写更有帮助。outermargin和innermargin的colormargin和padding属性是完全透明的，不能设置颜色。但是因为它是透明的，所以它通过相关元素的背景颜色显示。在元素的边距中看到的颜色是其父元素的背景色。在元素的填充部分看到的颜色是元素的背景色。边框边框在填充和边距之间绘制元素的轮廓。border属性需要三个值：宽度、样式和颜色。border属性简写值的顺序是：width、style、color。在正常的书写中，边框的三个属性分别命名为：border-width、border-style和border-color。普通表示法更容易修改和重写，因为它是单个值。边框的宽度和颜色可以分别使用第三课讨论的长度单位和颜色值。边框有许多不同的样式。最常用的样式值是solid、dashed、dotted和none，但您可以在列表中看到许多其他样式值。下面是设置边框的例子：div{border:6pxsolid#949599;}单边边框与margin和padding属性相同，一次只能在元素的一个方向设置边框.使用属性名称：border-top、border-right、border-bottom和border-left。它们的属性值与边框的属性值相同：宽度、样式和颜色。如下图：div{border-bottom:6pxsolid#949599;}此外，单边边框的样式还可以细分，如下图：div{border-bottom-width:12px;}这些高度细分的边框属性名都是用连字符隔开的，以border这个词开头，接着是border的方向：top,right,bottom,left，最后是要设置的样式：width,style,color。border-radiusborder-radius使元素的角变圆。border-radius接受各种长度单位，例如百分比和像素，以确定元素角的圆角半径。单个值表示四个角的弧度。两个值分别代表top-left/bottom-right和top-right/bottom-left。输入四个值依次表示：top-left、top-right、bottom-right和bottom-left。在考虑多个border-radius值（包括margin和padding）的顺序时，请记住它们是从左上角开始顺时针排序的（margin和padding从顶部开始）。div{border-radius:5px;}border-radius属性也允许我们用正常的方式写单个属性值。这些常用属性以单词边框开头，然后是角的垂直位置（顶部或底部），然后是角的水平位置（左或右），最后是半径。例如，要设置