第五章 CSS盒子模型

5.1盒模型的定义

盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：

1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。

2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。

3. 边框（Border）： 包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。

4. 外边距（Margin）： 元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。

盒模型的总宽度和高度计算公式为：

 总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

 总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距

理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

• width 属性指定内容区域的宽度。

• 如果使用了 box-sizing: border-box;，那么设置的宽度会包含边框和内边距，即总宽度为设定值。

• 如果使用默认的 box-sizing: content-box;，则总宽度需要加上边框和内边距的大小。

5.1.2 盒模型的高度

• height 属性指定内容区域的高度。

• 类似于宽度，如果设置了 box-sizing: border-box;，高度将包括边框和内边距。

• 对于块级元素，如果没有明确设置高度，它会根据内容自动扩展。

5.3 边距设置和边框设置

5.3.1 外边距设置

• margin-top, margin-right, margin-bottom, margin-left 分别设置四边的外边距。

• margin 简写属性可同时设置四个方向的外边距，例如 margin: 10px 20px 10px 20px; 表示上10px, 右20px, 下10px, 左20px。

• 如果只提供一个值，则所有方向都采用该值；两个值时，第一个值应用于上下，第二个值应用于左右；三个值时，依次为上、左右、下。

边距的取值

 固定值（px, em, rem等）：例如 margin: 10px;，指定边距为固定像素。

 百分比（%）：边距值是父元素宽度的百分比。例如，margin: 5%; 表示边距为父元素宽度的 5%。

 自动（auto）：通常用于水平居中。元素的左右 margin 设置为 auto 时，它会自动分配空间，保证元素水平居中。

5.3.2 外边距的合并

外边距合并（Margin Collapsing）是指在CSS布局中，当两个或多个垂直方向上的外边距相遇时，它们会合并成一个单一的外边距。这种现象主要发生在块级元素之间，以及包含关系中的父元素和子元素之间。了解外边距合并对于正确地控制页面布局至关重要。

5.3.2.1 行级元素外边距合并

行级元素的外边距合并行为不同于块级元素。通常情况下，行级元素之间的垂直外边距不会合并。然而，如果将 display: inline-block; 应用到行级元素上，那么这些元素的上下外边距可能会发生合并。例如，相邻的 inline-block 元素如果有垂直外边距，它们之间只会显示较大的那个外边距值

5.3.2.2 块级元素外边距合并

块级元素的外边距合并是更为常见的情况。以下是一些具体的场景：

• 相邻兄弟元素：当两个垂直排列的块级元素有相邻的外边距时，比如第一个元素的 margin-bottom 和第二个元素的 margin-top，这两个外边距会合并为两者中较大的一个。例如，如果第一个元素的 margin-bottom 是 20px，而第二个元素的 margin-top 是 30px，那么最终这两个元素间的距离将是 30px，而不是 50px

• 父子元素：当一个块级元素内部包含另一个块级元素，并且没有内边距、边框或者浮动来分隔它们时，父元素的 margin-top 与子元素的 margin-top 会发生合并。同样的情况也适用于 margin-bottom。在这种情况下，合并后的外边距取较大者

  例如，父元素有一个 40px 的 margin-top，而其子元素有一个 60px 的 margin-top，那么实际呈现出来的顶部外边距将会是 60px 而不是 100px。

• 空元素：即使是一个空的块级元素，只要它设置了上下外边距，这些外边距也会发生合并。这意味着一个空的 <div> 如果同时设置了 margin-top 和 margin-bottom，它们将合并成一个外边距，高度为两者中的较大值

   如何避免外边距合并

  由于外边距合并可能导致布局问题，有时需要采取措施防止这种情况发生。以下是一些常用的方     法来解决外边距合并的问题：

• 设置父元素的边框或内边距：给父元素添加任何非零的边框（如 border: 1px solid transparent;）或内边距（如 padding: 1px;），这样就可以阻止父元素与其子元素之间的外边距合并

• 使用 overflow 属性：将父元素的 overflow 设置为 hidden 或其他值（如 auto 或 scroll），可以创建一个新的块格式化上下文（BFC），从而阻止外边距合并。

• 浮动或绝对定位：通过将元素设置为浮动（float: left; 或 float: right;）或将 position 设置为 absolute 或 fixed，可以让该元素脱离正常文档流，这样就不会参与外边距合并了。

• 改变 display 属性：将块级元素的 display 属性更改为 inline-block 或 flex 也可以避免外边距合并。

• 使用伪元素：在父元素上使用 ::before 或 ::after 伪元素并设置适当的样式，如 content: ''; display: table;，同样可以创建新的BFC来防止外边距合并。

5.3.3 内边距设置

内边距（Padding）是CSS盒模型中的一个重要属性，它定义了元素内容与边框之间的空白区域。通过调整内边距，可以控制内容在元素内的布局，并且有助于提高可读性和美观性。内边距可以通过四个方向来单独设置，也可以使用简写形式一次性设置所有方向的内边距。

单独设置内边距

• padding-top：设置元素顶部的内边距。

• padding-right：设置元素右侧的内边距。

• padding-bottom：设置元素底部的内边距。

• padding-left：设置元素左侧的内边距。

例如：

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

为了简化代码，CSS提供了 padding 简写属性，可以在一个声明中设置所有四个方向的内边距。简写属性的值按照顺时针顺序排列，即上、右、下、左。

• 一个值：如果只提供一个值，则该值将应用于所有四个方向。

div {
  padding: 20px; /* 上、右、下、左均为20px */
}

两个值：如果提供两个值，第一个值应用于上下方向，第二个值应用于左右方向。

div {
  padding: 20px 10px; /* 上下20px，左右10px */
}

三个值：如果提供三个值，第一个值应用于上方向，第二个值应用于左右方向，第三个值应用于下方向。

div {
  padding: 20px 10px 30px; /* 上20px，左右10px，下30px */
}

四个值：如果提供四个值，它们分别对应上、右、下、左四个方向。

div {
  padding: 20px 10px 30px 15px; /* 上20px，右10px，下30px，左15px */
}

内边距和元素尺寸

默认情况下，当为元素设置了宽度或高度时，添加的内边距会增加到元素的总尺寸中。例如，如果一个元素的宽度设置为300px，并且左右内边距各为25px，那么这个元素的实际宽度将是350px。

为了避免这种情况，可以使用 box-sizing 属性。当 box-sizing 设置为 border-box 时，元素的宽度和高度包括了内边距和边框，这样即使增加了内边距，元素的总尺寸也不会改变。这对于响应式设计非常有用。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box; /* 保持宽度为300px */
}

百分比值

内边距还可以使用百分比值来设置，这时百分比是相对于包含块的宽度计算的。这使得内边距能够随着容器宽度的变化而自适应地调整。

div {
  padding: 5%; /* 左右内边距为父元素宽度的5% */
}

注意事项

• 内边距不允许使用负值。
• 使用百分比作为内边距单位时，它是基于父元素的宽度而不是高度。
• 在处理复杂的布局时，合理利用内边距可以帮助创建更清晰、更具吸引力的设计。

5.3.4 边框设置

边框（Border）是CSS中一个非常强大的属性，它允许开发者为HTML元素添加装饰性边框。边框不仅可以增加视觉上的吸引力，还可以帮助定义页面的结构和层次。CSS提供了多种方式来定制边框，包括设置边框的宽度、样式、颜色以及圆角等特性。

基本概念

在CSS中，border 属性是一个简写属性，可以用来一次性设置边框的宽度、样式和颜色。每个方向的边框也可以单独设置，如 border-top、border-right、border-bottom 和 border-left。这些属性各自接受三个值：宽度（border-width）、样式（border-style）和颜色（border-color）。

设置边框的宽度

• 关键字：可以使用 thin、medium 和 thick 关键字来指定边框宽度。需要注意的是，这些关键字的具体数值并没有被CSS标准所定义，因此不同浏览器可能会有轻微差异。
• 具体数值：更常见的是直接指定具体的长度值，比如 2px 或者 0.1em 等，单位可以是像素、点、厘米、相对单位等。

div {
  border: 5px solid black; /* 宽度5像素，实线，黑色 */
}

设置边框的样式

• none：无边框。
• dotted：点状线。
• dashed：虚线。
• solid：实线。
• double：双线。
• groove：3D沟槽效果。
• ridge：3D脊状效果。
• inset：内嵌效果。
• outset：外凸效果。

示例代码：

div {
  border: 3px dashed red; /* 宽度3像素，虚线，红色 */
}

设置边框的颜色

边框的颜色可以通过 border-color 属性或者 border 简写属性中的颜色部分来设置。支持的颜色表示法包括颜色名称（如 red）、十六进制颜色（如 #ff0000）、RGB/RGBA 颜色（如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)）以及HSL/HSLA颜色（如 hsl(0, 100%, 50%)）。

示例：

div {
  border: 4px dotted #ccc; /* 宽度4像素，点状线，灰色 */
}

圆角边框

通过 border-radius 属性，可以创建具有圆角或椭圆形角的边框。该属性可以接受单个值，用于设置所有四个角的半径；也可以接受多个值，分别设置左上、右上、右下、左下的圆角半径。

示例：

div {
  border: 5px solid green;
  border-radius: 10px; /* 所有角的半径均为10像素 */
}

或者更复杂的圆角设定：

div {
  border: 5px solid green;
  border-radius: 10px 20px 30px 40px; /* 左上10px，右上20px，右下30px，左下40px */
}

如果想让元素呈现完全的圆形或椭圆形，可以将 border-radius 设置为 50%，前提是元素的宽高相等。

边框图片

对于更复杂的设计需求，CSS还提供了 border-image 属性，允许使用图像作为边框。这使得设计师能够创造出更加丰富和独特的边框效果。

基本语法：

border-image: url('image.png') 30 stretch;

这里的 url('image.png') 指定边框图像的位置，30 是切割区域的大小，stretch 表示如何填充边框区域（其他选项还包括 repeat 和 round）。

总结

通过对 border 及其相关属性的灵活运用，你可以轻松地控制元素边框的各种细节，从而实现丰富多彩的视觉效果。无论是在简单的网页布局还是复杂的设计项目中，边框都是一个不可或缺的工具，它不仅提升了用户体验，也增强了页面的整体美观度。记住，在进行布局时考虑到边框的存在及其对元素尺寸的影响，合理利用 box-sizing: border-box; 来简化计算，可以使你的设计工作变得更加高效和精准。

5.3.5 新增边框属性

阴影效果 - box-shadow

box-shadow 属性不仅能够给整个元素添加阴影，还可以给元素的边框添加阴影效果，从而产生立体感。它可以接受多个参数来控制阴影的方向、模糊程度、扩展距离以及颜色。

基本语法：

.box-shadowed {
  box-shadow: h-offset v-offset blur spread color;
}

• h-offset：水平偏移量，正值向右，负值向左。
• v-offset：垂直偏移量，正值向下，负值向上。
• blur：模糊半径，数值越大阴影越模糊。
• spread：扩散半径，正数使阴影变大，负数使阴影缩小。
• color：阴影的颜色。

例如：

.box-shadowed {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); /* 水平5px, 垂直5px, 模糊10px, 黑色且透明度0.4 */
}

多重阴影

box-shadow 还支持多重阴影效果，只需在声明中通过逗号分隔不同的阴影即可。

示例：

.multiple-shadows {
  box-shadow: 2px 2px 5px #ccc, 5px 5px 10px #999; /* 第一层阴影，第二层阴影 */
}

其他新特性

除了上述属性外，CSS3还增强了对边框颜色的支持，现在可以在一个声明中设置多于一种颜色，比如渐变颜色等。此外，对于某些复杂的布局需求，border-color 和 border-width 也可以被独立地应用到各个方向，提供更细粒度的控制。

总之，CSS3中的这些新增边框属性提供了极大的灵活性和创造性，让网页设计者能够构建出更加丰富和吸引人的用户界面。理解和熟练运用这些属性，可以帮助设计师更好地表达创意并提升用户体验。

5.4 CSS元素的定位

CSS中的元素定位是网页布局的重要组成部分，它允许开发者控制页面上元素的具体位置。CSS提供了多种定位方式，每种方式都有其特定的应用场景和特点。主要的定位方式包括：static（静态）、relative（相对）、absolute（绝对）、fixed（固定）以及sticky（粘性）。下面将详细介绍这些定位方法。

5.4.1 static 定位

• 定义：这是所有元素默认的定位方式。使用静态定位的元素按照文档流正常排列，不受top、right、bottom、left等偏移属性的影响。
• 特点：不改变元素在正常文档流中的位置，因此不能通过定位属性来移动元素。
• 应用场景：当不需要对元素进行特殊定位时使用。

示例代码：

.static {
  position: static;
}

5.4.2 relative定位

• 定义：相对定位会相对于元素原本应该出现的位置进行定位。设置相对定位后，可以通过top、right、bottom、left属性来调整元素的位置。
• 特点：元素仍然占据原来的空间，不会影响其他元素的布局。但是，它的视觉位置可以被移动。
• 应用场景：常用于需要轻微调整元素位置但又不想影响整体布局的情况。

示例代码：

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

5.4.3 absolute定位

• 定义：绝对定位的元素会被完全从文档流中移除，然后根据最近的非static定位的祖先元素进行定位；如果没有这样的祖先元素，则基于初始包含块（通常是视口）。
• 特点：绝对定位的元素不再占用文档流中的空间，所以它可以覆盖其他元素。如果设置了宽度和高度，那么元素尺寸会由内容决定。
• 应用场景：适合创建弹出层、工具提示等独立于文档流的元素。

示例代码：

.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
}

5.4.4 fixed定位

• 定义：固定定位的元素与绝对定位类似，但它相对于浏览器窗口而不是最近的已定位祖先元素。无论用户如何滚动页面，固定定位的元素都会保持在屏幕上的同一位置。
• 特点：固定定位同样会使元素脱离文档流，且该元素的位置不受滚动条的影响。
• 应用场景：适用于导航栏、广告横幅等需要始终显示在屏幕上某个位置的元素。

示例代码：

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

5.4.5. 粘性定位 - position: sticky;

• 定义：粘性定位是一种混合了相对定位和固定定位的特性。元素首先按相对定位处理，直到达到某个阈值（如top, bottom, left, right其中之一），之后就像固定定位一样“粘”在指定位置。
• 特点：只有当用户滚动到元素的阈值位置时，它才会变成固定状态。在此之前，它表现得像相对定位一样。
• 应用场景：适用于侧边栏、头部等希望在一定条件下固定的元素。

示例代码：

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

元素层级 - z-index

• 定义：z-index 属性用于控制重叠元素的堆叠顺序。具有较高z-index值的元素将会覆盖较低z-index值的元素。
• 特点：仅适用于定位元素（即position值不是static的元素）。正数或负数都可以用作z-index的值。
• 应用场景：当多个元素重叠时，用来决定哪个元素出现在最上方。

示例代码：

.higher-layer {
  position: relative;
  z-index: 2;
}

.lower-layer {
  position: absolute;
  z-index: 1;
}

5.5 CSS元素的浮动

CSS中的float属性是一个强大的布局工具，它允许块级元素向左或向右移动，并且周围的文本和其他内容会环绕这个浮动的元素。最初，float是为了让文字可以围绕图片而设计的，但后来它被广泛应用于创建复杂的网页布局。

5.5.1 盒子的浮动添加

浮动的基本概念

• 定义：float属性指定一个元素应该沿着其容器的左侧或右侧放置，允许文本和内联元素环绕它。浮动元素从正常的文档流中移除，但仍然保持部分流动性（与绝对定位不同）。
• 特点：浮动元素不会影响前面的内容，但是会影响后面的内容。后面的元素会重新排列以适应浮动元素的位置。
• 应用场景：常用于多列布局、图像环绕文本等场景。

float属性值

• left：元素向左浮动。
• right：元素向右浮动。
• none：默认值，表示元素不浮动。
• inherit：继承父元素的float属性。

示例代码：

.float-left {
  float: left;
}

.float-right {
  float: right;
}

浮动的影响

当一个元素设置了浮动之后，它会被移出正常的文档流，这意味着其他非浮动元素将忽略它的存在并占据它原来的空间。这种特性使得创建多列布局变得容易，但也可能导致一些布局问题，比如父元素的高度塌陷。

5.5.2 盒子的浮动清除

由于浮动会导致某些布局上的问题，例如包含浮动元素的父元素高度塌陷，因此需要使用清除浮动的方法来解决这些问题。常见的清除浮动方法包括：

1. 额外标签法：在最后一个浮动元素后添加一个空的HTML元素，并设置clear:both;。
2. 父级添加overflow属性：给包含浮动元素的父元素添加overflow: hidden;或overflow: auto;。
3. 伪类清除：使用:after伪元素配合content, display, clear等属性来实现。
4. BFC (Block Formatting Context)：通过创建一个新的BFC环境来包裹浮动元素，通常可以通过设置overflow: hidden;或其他触发BFC的方式实现。

示例代码 - 使用伪类清除浮动：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在HTML中应用.clearfix类到需要清除浮动的父元素上。

多个浮动元素

当多个元素同时设置为浮动时，它们会尽可能地靠近在一起，直到没有足够的空间为止。如果空间不足，后续的浮动元素将会换行显示。这使得浮动成为创建多列布局的一种有效手段。

示例代码 - 创建三列布局：

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>

<style>
.column {
  float: left;
  width: 33.33%; /* 为了简化，假设每列宽度相等 */
  box-sizing: border-box; /* 确保边框和填充不会增加元素宽度 */
}
</style>

注意事项

• 当使用浮动进行布局时，要确保清理浮动，以避免布局错乱。
• 在现代布局技术如Flexbox和Grid出现后，对于许多情况，浮动已经不是首选的布局方式了。然而，在特定情况下，特别是对于较简单的布局或者需要向后兼容旧浏览器时，浮动仍然是一个有用的工具。

5.6 综合案例——昵心美食空间
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昵心美食空间</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            background-color: #fff999;
        }
        a {
            color: red;
            text-decoration: none;
        }
        .all {
            width: 700px;
            height: 650px;
            margin: 10px auto;
            padding: 5px;
            background-image: url('4465CAF7A217F1A5103C23623BE7CD18.jpg');
            background-size: cover;
        }
        .banner, .menu, .bottom {
            width: 100%;
            height: 70px;
        }
        .menu {
            height: 40px;
        }
        .main {
            width: 700px;
            height: 450px;
            margin: 5px 0;
            position: relative;
            overflow: hidden;
        }
        .left, .right {
            width: 150px;
            height: 440px;
            border: 1px solid #999;
            float: left;
            overflow: hidden;
        }
        .middle {
            width: 384px;
            height: 450px;
            margin: 0 5px;
            float: left;
            font-size: 20px;
            font-family: "楷体";
            font-weight: 700;
            color: #0000ff;
        }
        .one {
            width: 380px;
            height: 155px;
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
        }
        .two {
            width: 255px;
            height: 100px;
            border: 1px solid #999;
            margin: 20px 0;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .three {
            width: 380px;
            height: 135px;
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
        }
        .bottom {
            width: 700px;
            height: 70px;
            text-align: center;
            font-family: "楷体";
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="banner">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="700" height="70" alt="Banner"/>
        </div>
        <div class="menu">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="690" height="40" alt="Menu"/>
        </div>
        <div class="main">
            <div class="left">
                <marquee direction="up">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="150" height="140" alt="Image"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="150" height="140" alt="Image"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="150" height="140" alt="Image"/>
                </marquee>
            </div>
            <div class="middle">
                <div class="one">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="25" height="25" alt="Icon"/> 为您推荐
                    <br/><br/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="80" height="40" alt="Recommendation"/>
                </div>
                <div class="two">
                    <h1>昵心美食空间</h1>
                </div>
                <div class="three">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="25" height="25" alt="Icon"/>
                    <br/>
                    <a href="#">1. 火锅团购</a><br/>
                    <a href="#">2. 烧烤团购</a><br/>
                    <a href="#">3. 自助餐团购</a><br/>
                    <a href="#">4. 新春特惠</a><br/>
                </div>
            </div>
            <div class="right">
                <marquee direction="up">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="150" height="140" alt="Image"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="148" height="140" alt="Image"/>
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="148" height="140" alt="Image"/>
                </marquee>
            </div>
        </div>
        <div class="bottom">
            <hr color="#0000ff">
            版权所有&copy;昵心美食空间<br/>
            地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999
        </div>
    </div>
</body>
</html>