第五章 CSS盒模型

5.1 盒模型的定义
CSS盒模型（Box Model）是CSS布局的核心，它定义了HTML元素在页面上如何显示。盒模型包括以下几个部分：

内容区域（Content Area）：这是盒子的主要内容区域，包括文本、图片或其他媒体内容。

内边距（Padding）：内容区域周围的空间，可以是透明的或有颜色的。内边距是可选的，并且不会影响盒子的最终尺寸。

边框（Border）：围绕内边距和内容区域的边缘。边框可以有不同的样式（实线、虚线、点线等），宽度和颜色。

外边距（Margin）：边框外的空间，用于在盒子之间创建距离。外边距总是透明的，并且垂直外边距可以发生折叠。

盒阴影（Box Shadow）：可选的阴影效果，可以为盒子添加视觉效果。

轮廓（Outline）：围绕盒子的边框，但不会影响盒子的布局。轮廓通常用于高亮显示或聚焦。

盒模型的尺寸计算
总宽度 和 总高度：包括内容区域、内边距、边框和外边距。
CSS属性
width 和 height：定义内容区域的宽度和高度。
padding：定义内边距的大小。
border：定义边框的样式、宽度和颜色。
margin：定义外边距的大小。
box-shadow：定义盒子的阴影效果。
outline：定义盒子的轮廓。

CSS盒模型的两种模式
标准盒模型（Standard Box Model）：

总宽度 = width + padding + border + margin
总高度 = height + padding + border + margin
IE盒模型（IE Box Model）：

总宽度 = width + margin
总高度 = height + margin
padding 和 border 被包含在 width 和 height 内。
CSS代码示例

盒模型的 box-sizing 属性

• content-box：这是默认值，总宽度和高度包括内容区域，但不包括内边距、边框和外边距。
• border-box：总宽度和高度包括内容区域、内边距和边框，但不包括外边距。

CSS代码示例

通过理解盒模型，你可以更好地控制元素在页面上的布局和外观。

5.2 CSS元素的高度和宽度
在CSS中，元素的高度和宽度可以通过多种方式进行控制。这些属性允许你精确地设置元素的尺寸，以适应不同的布局需求。以下是一些关键点和技巧：

1. 基本属性
width: 设置元素的宽度。
height: 设置元素的高度。
2. 单位
像素（px）：固定大小，无论屏幕分辨率如何，像素值总是相同的。
百分比（%）：相对于父元素的宽度或高度。
em：相对于元素的字体大小。
rem：相对于根元素的字体大小。
vw/vh：视口宽度和高度的百分比（1vw = 1%的视口宽度，1vh = 1%的视口高度）。
fr：用于CSS网格布局，表示可用空间的一个分数。
3. 盒模型类型
content-box（默认）：宽度和高度只包括内容区域。
border-box：宽度和高度包括内容区域、内边距和边框。
4. 最小和最大尺寸
min-width/min-height：设置元素的最小尺寸。

max-width/max-height：设置元素的最大尺寸。
5. 视口单位
使用视口单位可以创建响应式设计，使元素的尺寸基于视口的大小。

6. 百分比尺寸
使用百分比可以创建相对于父元素尺寸的元素。

7. 响应式设计
在媒体查询中使用不同的宽度和高度值，以适应不同屏幕尺寸。

8. 盒模型的计算
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
CSS代码示例

注意事项

当使用百分比单位时，确保父元素有明确的宽度和高度，否则百分比值可能不会按预期工作。
使用 box-sizing: border-box; 可以简化盒模型的计算，使元素的总尺寸包括内容、内边距和边框。
在响应式设计中，合理使用媒体查询和相对单位可以提高布局的灵活性。
通过这些方法，你可以精确控制元素的尺寸，创建出既美观又功能性强的网页布局。

盒模型示例 
当然，这里是一个内嵌CSS的简单示例，它将创建一个具有明确尺寸、内边距、边框和外边距的盒子：运行图片 

解释

宽度和高度：width: 200px; 和 height: 100px; 设置了内容区域的尺寸。
内边距：padding: 20px; 在内容区域周围添加了20像素的空间。
边框：border: 5px solid #333; 添加了一个5像素宽的实心黑色边框。
外边距：margin: 30px; 在盒子周围添加了30像素的空间，使盒子与其他元素保持距离。
背景颜色：background-color: #fff; 设置了盒子的背景颜色为白色。
盒阴影：box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 为盒子添加了阴影效果，使其在页面上更加突出。
5.3 边距和边框设置 

下面是边框和样式的属性值

5.3.1 外边距设置

外边距（Margin）在CSS中用于控制元素之间的空间。它是一个透明的区域，位于元素的边框之外。外边距可以是正数，也可以是负数，这使得元素可以重叠或者有更多的空间。

外边距的基本语法：

外边距的属性：
margin-top: 设置元素的上边距。
margin-right: 设置元素的右边距。
margin-bottom: 设置元素的下边距。
margin-left: 设置元素的左边距。
margin: 简写属性，可以同时设置所有外边距。
外边距折叠：
当两个或多个垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距值等于这些外边距值中的最大值。

外边距的百分比值：
外边距可以接受百分比值，这使得外边距相对于包含块（而不是视口）的大小进行计算。

外边距的自动值（auto）：
外边距可以设置为auto，这使得浏览器自动计算外边距。这通常用于居中元素。

在这个示例中，.element 类的元素将具有20像素的外边距，并且使用margin: 20px auto;实现水平居中。.element-no-margin 类的元素没有设置外边距，所以它将紧贴在容器的边缘。.container 类的元素有一个背景颜色和内边距，用于演示外边距的效果。

5.3.2 外边距的合并 
外边距合并（Margin Collapsing）是CSS中一个特定的行为，当两个垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距值等于这两个外边距值中的最大值。这通常发生在两个块级元素相邻放置时。

外边距合并的规则：
相邻兄弟元素：当两个兄弟元素的外边距相遇时，会发生外边距合并。

父子元素：如果一个元素是另一个元素的子元素，并且子元素的底部外边距与父元素的底部外边距相遇，也会发生外边距合并。

空的块级元素：如果一个块级元素没有内容（或内容都是内联元素），它的外边距可能会与相邻元素的外边距合并。

避免外边距合并：
添加内边距：给子元素添加内边距可以阻止外边距合并。
边框：给元素添加边框可以阻止外边距合并。
行内块元素：将子元素设置为display: inline-block;可以阻止外边距合并。
空内容：确保元素内有内容，即使是一个空的<div>也可以阻止外边距合并。
示例：运行图片

在这个示例中：

第一个.child元素的底部外边距会与第二个.child元素的顶部外边距合并，因为它们是相邻的兄弟元素。
第二个.child元素的底部外边距不会与父元素的底部外边距合并，因为第二个.child元素有一个内边距，这阻止了外边距合并。
通过理解外边距合并的行为，你可以更好地控制元素在页面上的布局。

5.3.3 内边距设置
内边距（Padding）在CSS中用于在元素的内容与其边框之间创建空间。内边距是元素盒模型的一部分，它向内推内容，向外推边框。

内边距的基本语法：

内边距的属性：
padding-top: 设置元素的顶部内边距。
padding-right: 设置元素的右侧内边距。
padding-bottom: 设置元素的底部内边距。
padding-left: 设置元素的左侧内边距。
padding: 简写属性，可以同时设置所有内边距。
内边距的百分比值：
内边距可以接受百分比值，这使得内边距相对于包含块（而不是视口）的大小进行计算。

运行图片

在这个示例中：

.container 类的元素有一个背景颜色和内边距，用于演示内边距的效果。
.element 类的元素有20像素的内边距和2像素的实心黑色边框。这将使内容区域更靠近边框，而内边距则在内容和边框之间创建了空间。
通过设置内边距，你可以控制元素内容与边框之间的距离，以及元素与其他元素之间的空间。内边距是影响元素布局和设计的重要属性之一。

5.3.4 边框设置 
边框（Border）是CSS盒模型中位于内边距和外边距之间的部分。边框可以控制元素的边缘外观，包括样式、宽度、颜色等。

边框的基本语法：

边框的属性：
border-width: 设置边框的宽度。
border-style: 设置边框的样式（如实线solid、虚线dashed、点线dotted等）。
border-color: 设置边框的颜色。
border: 简写属性，可以同时设置边框的宽度、样式和颜色。
边框的样式：
none: 没有边框。
hidden: 与none相同，但用于表格时会隐藏边框。
dotted: 点状边框。
dashed: 虚线边框。
solid: 实线边框。
double: 双线边框。
groove: 3D凹槽边框。
ridge: 3D凸起边框。
inset: 3D凹入边框。
outset: 3D凸出边框。
边框的圆角：
边框还可以是圆角的，使用border-radius属性来设置。

示例：运行图片

在这个示例中：

.element 类的元素有5像素宽的实心黑色边框。
border-radius 属性给边框添加了圆角效果。
边框内的元素通过text-align和line-height属性垂直和水平居中。
通过设置边框，你可以控制元素的外观，包括边框的宽度、样式、颜色和圆角等。边框是影响元素视觉表现的重要属性之一。

 5.3.5 新增边框属性
CSS边框属性允许你为元素定义边框的外观，包括边框的宽度、样式和颜色。以下是一些常用的边框属性：

border-width: 设置边框的厚度。可以接受具体数值（如2px）、相对单位（如thin、medium、thick）。

border-style: 设置边框的样式。常见的有none、solid、dashed、dotted、double、groove、ridge、inset、outset。

border-color: 设置边框的颜色。可以使用颜色名（如red）、十六进制值（如#ff0000）、RGB值（如rgb(255, 0, 0)）等。

border: 简写属性，可以同时设置宽度、样式和颜色，如border: 2px solid black;。

border-radius: 创建圆角边框，可以接受单个值或多个值来指定每个角的半径，如border-radius: 10px;。

border-image: 使用图像来创建边框，如border-image: url('border.png') 30 round;。

box-sizing: 控制边框和内边距是否包含在元素的宽度和高度内，如box-sizing: border-box;。

outline: 绘制于元素周围的一条线，位于边框边缘的外围，如outline: #00ff00 dotted thick;。

使用这些属性，你可以为网页元素添加丰富的视觉效果和层次感。

阴影边框示例运行图片

图片绘制边框示例 

1. 运行图片

   5.4 CSS元素的定位
   CSS定位机制允许你精确地控制元素在页面上的位置。CSS提供了几种不同的定位方式，包括静态定位、相对定位、绝对定位、固定定位和粘性定位。

   1. 静态定位（Static Positioning）
   静态定位是所有元素的默认定位方式。元素的位置由其在HTML文档流中的位置决定。
   .element {
     position: static;
   }

   2. 相对定位（Relative Positioning）

   相对定位将元素相对于其正常位置进行定位。可以使用top、right、bottom和left属性来调整位置。.element {
     position: relative;
     top: 20px;
     left: 20px;
   }

   3. 绝对定位（Absolute Positioning）
   绝对定位将元素相对于其最近的已定位（非静态定位）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素。

   .element {
     position: absolute;
     top: 20px;
     right: 20px;
   }
   4. 固定定位（Fixed Positioning）
   固定定位将元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在相同的屏幕位置。

   .element {
     position: fixed;
     bottom: 0;
     right: 0;
   }
   5. 粘性定位（Sticky Positioning）
   粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

   .element {
     position: sticky;
     top: 0;
   }
   定位上下文
   当使用绝对定位或固定定位时，元素会形成一个新的定位上下文，这意味着其子元素的定位是相对于它而不是相对于整个文档。

   z-index 属性
   z-index属性决定了元素的堆叠顺序。具有更高z-index值的元素会覆盖具有较低z-index值的元素。

   .element {
     position: relative;
     z-index: 1;
   }
   示例运行图片​​​​​​

   解释
   父盒子：.parent 类的元素被设置为相对定位（position: relative;）。这意味着其子元素的绝对定位将基于它进行定位。

   子元素：.absolute-child 类的元素被设置为绝对定位（position: absolute;）。它的位置相对于其相对定位的父元素 .parent。

   定位：.absolute-child 的 top 和 right 属性分别设置为 20px，这意味着它将从父元素的顶部和右侧开始，距离父元素的边缘20像素。

   通过这种方式，你可以精确地控制子元素的位置，使其在父元素内任意定位，而不受文档流的影响。这种技术在创建复杂的布局和UI组件时非常有用

   5.5 CSS元素的浮动 
   CSS中的浮动（Float）属性是一种布局手段，允许元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会脱离常规文档流，但它还是会占据空间，影响其他元素的布局。

   浮动的基本语法：
   css

   .element {
     float: left; /* 元素向左浮动 */
   }
   .element {
     float: right; /* 元素向右浮动 */
   }
   .element {
     float: none; /* 元素不浮动（默认值） */
   }
   浮动的属性：
   left: 元素向左浮动。
   right: 元素向右浮动。
   none: 元素不浮动。
   inherit: 从父元素继承浮动属性。
   清除浮动（Clearing Floats）
   当一个元素浮动后，它下方的元素也会浮动上来，这可能会导致布局问题。为了解决这个问题，可以使用clear属性来阻止元素周围有浮动。

   clear: left;: 不允许在左侧有浮动元素。
   clear: right;: 不允许在右侧有浮动元素。
   clear: both;: 同时不允许左右两侧有浮动元素。
   示例：

   在这个示例中：

   .float-left 类的元素向左浮动。
   .float-right 类的元素向右浮动。
   两个浮动元素之间通过 margin-right 和 margin-left 属性添加了一些空间。
   .clearfix 类使用了一种称为“clearfix”的技术，它通过添加一个伪元素来清除浮动，确保段落不会被浮动元素所干扰。
   浮动是早期CSS布局中常用的技术，尽管现在更常用的是Flexbox和Grid等现代布局方法，但浮动仍然在某些情况下非常有用。

   综合案例 呢心美食空间