✊不积跬步，无以至千里；不积小流，无以成江海
之前写过的笔记链接：
CSS布局的分类/使用属性\]([📝 CSS布局 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fwdpfdm "https://www.yuque.com/liwenwang-kfcdf/hqlasb/wdpfdm")) \[文档流和盒模型\]([📝 CSS入门笔记2 - 文档流和盒模型 (yuque.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fliwenwang-kfcdf%2Fhqlasb%2Fofqrp5 "https://www.yuque.com/liwenwang-kfcdf/hqlasb/ofqrp5")) # 布局模式、盒模型、ie盒模型、标准盒模型、box-sizing ## CSS中的布局模式 在 CSS 中，有几种常见的布局模式用于定位和排列元素。每种布局模式都有不同的特性和适用场景。以下是一些常见的 CSS 布局模式： 1. **流动布局（Flow Layout）** ：流动布局是默认的布局模式，也称为文档流。在流动布局中，元素按照其出现在 HTML 文档中的顺序从上到下进行排列。元素会尽可能地占用其父元素的宽度，并在遇到其他元素时自动换行。这种布局模式适用于大多数常规布局需求。 2. **浮动布局（Float Layout）** ：浮动布局通过将元素从正常的文档流中脱离，并向左或向右浮动，使其相邻的元素环绕在其周围。浮动布局常用于创建多列布局和实现图文混排效果。然而，浮动布局在复杂布局中可能会导致问题，需要进行额外的清除浮动操作。 3. **弹性布局（Flexbox Layout）** ：弹性布局是一种强大且灵活的布局模式，用于在一个容器中创建灵活的、自适应的布局。通过使用 `display: flex;` 属性，容器内的子元素可以通过设置灵活的尺寸、对齐方式和顺序来自动调整其位置和大小。弹性布局适用于创建水平或垂直居中、等高列布局等。 4. **栅格布局（Grid Layout）** ：栅格布局是一种二维布局模式，通过将容器划分为网格（行和列）来控制元素的位置和大小。通过使用 `display: grid;` 属性，可以定义容器的网格结构，并使用各种属性来指定元素在网格中的位置、间距和尺寸。栅格布局适用于复杂的网格结构和自适应布局需求。 5. **定位布局（Positioning Layout）** ：定位布局通过使用 `position` 属性和相关的属性值（如 `top`、`right`、`bottom`、`left`）来精确地定位元素。常见的定位值包括相对定位（`position: relative;`）、绝对定位（`position: absolute;`）和固定定位（`position: fixed;`）。定位布局适用于创建重叠元素、悬浮效果和精确的布局需求。 ## CSS中的盒模型、ie盒模型、标准盒模型 CSS 盒模型是用于描述元素在页面中占用的空间和布局的概念。它将每个元素看作一个矩形的盒子，由内容区域、内边距、边框和外边距组成。理解盒模型对于控制元素的尺寸、边距和布局非常重要。 CSS 盒模型由以下几个部分组成： 1. **内容区域（Content）** ：内容区域指的是元素内部实际显示内容的区域，如文本、图像等。内容区域的大小由元素的宽度（width）和高度（height）属性决定。 2. **内边距（Padding）** ：内边距是内容区域与边框之间的空白区域。通过设置 padding 属性，可以控制内边距的大小。内边距的大小会增加元素的尺寸。 3. **边框（Border）** ：边框是包围内容区域和内边距的线条或样式。通过设置 border 属性，可以指定边框的宽度、样式和颜色。边框的大小会增加元素的尺寸。 4. **外边距（Margin）** ：外边距是元素与相邻元素之间的空白区域。通过设置 margin 属性，可以控制外边距的大小。外边距会影响元素与其他元素之间的距离。 CSS 盒模型的计算方式有两种标准：标准盒模型（content-box）和IE 盒模型（border-box）。 * **标准盒模型（content-box）** ：在标准盒模型中，元素的尺寸仅包括内容区域的大小。内边距、边框和外边距都会增加元素的总尺寸。 * **IE 盒模型（border-box）** ：在IE 盒模型中，元素的尺寸包括内容区域、内边距和边框的大小。外边距不会增加元素的总尺寸。 可以使用 CSS 的 `box-sizing` 属性来控制盒模型的计算方式。默认情况下，`box-sizing` 的值为 `content-box`，可以将其设置为 `border-box` 来使用 IE 盒模型。 例如，设置一个元素的宽度为 200px，内边距为 20px，边框为 1px，外边距为 10px，那么在标准盒模型下，元素的总宽度将为 242px（200px + 20px + 1px + 10px + 10px），而在 IE 盒模型下，元素的总宽度将为 200px。 ## box-sizing `box-sizing` 是一个 CSS 属性，用于控制元素的盒模型的计算方式。它可以影响元素的尺寸计算和布局。 CSS 中的 `box-sizing` 属性有两个常用的取值： 1. **content-box**（默认值）：这是标准盒模型。元素的尺寸仅包括内容区域的大小，不包括内边距、边框和外边距。换句话说，设置元素的宽度和高度属性只会应用到内容区域。如果添加了内边距和边框，会增加元素的总尺寸。 示例如下： ```css .box { box-sizing: content-box; width: 200px; padding: 20px; border: 1px solid black; margin: 10px; } ``` 在这个例子中，元素的实际宽度为 242px（200px + 20px + 20px + 1px + 1px）。 2. **border-box**：这是 IE 盒模型。元素的尺寸包括内容区域、内边距和边框的大小，而外边距不会增加元素的总尺寸。换句话说，设置元素的宽度和高度属性会同时应用到内容区域、内边距和边框。 示例如下： ```css .box { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid black; margin: 10px; } ``` 在这个例子中，元素的实际宽度为 200px，不会受到内边距、边框和外边距的影响。 通过设置 `box-sizing` 属性，可以方便地控制元素的盒模型计算方式，使其更符合实际需求。特别是在处理响应式布局和网格系统时，`border-box` 值往往更为常用，因为它允许更方便地控制元素的实际尺寸。 需要注意的是，`box-sizing` 属性会影响元素的宽度和高度的计算方式，但不会影响元素的最小宽度和最小高度。这些仍然受到其他 CSS 盒模型属性和布局规则的限制。 # margin:0 auto; `margin: 0 auto;` 是一种常用的 CSS 规则，通常用于居中元素。 这个规则主要应用于具有块级盒模型（block-level box）和设置了宽度的元素。它的作用是将元素在其包含块（parent container）中水平居中。 具体解释如下： * `margin` 属性用于设置元素的外边距。在这个规则中，`margin: 0 auto;` 表示将上下外边距设置为 0，而左右外边距设置为自动（auto）。 * 当左右外边距设置为自动时，元素的左右外边距会自动平分剩余的可用空间，从而使元素水平居中。 * 为了使 `margin: 0 auto;` 生效，元素必须满足以下条件： 1. 元素必须是块级元素（block-level element），例如 `