颜色取值

属性名

• 文字颜色：color
• 背景颜色：background-color

属性值

• 关键词
  • 预定义的颜色名
    • red、green、yellow
• rgb表示法
  • 红绿蓝三原色。每项取值范围：0-255
    • rgb(0,0,0)、rgb(255,255,255)
• rgba表示法
  • 红绿蓝三原色+a表示透明度，取值范围是0-1（0表示完全透明，1表示完全不透明）
    • rgb(255,255,255,0.5) 简写rgb(255,255,255,.5)
• 十六进制表示法
  • #开头，将数字转换成十六进制表示
    • #000000、#ff0000 简写#000、#f00

选择器进阶

复合选择器

后代选择器：空格

• 作为：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

• 选择器语法：选择器1 选择器2 {CSS}

• 结果：

  • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置演示

• 注意点：

  • 后代包括：儿子、孙子、重孙子…
  • 后代选择器中，选择器与选择器之间通过空格隔开

具体的说：后代选择器用于选择某个元素的所有后代元素（包括直接子元素和非直接子元素）。后代选择器使用空格（ ）来分隔祖先元素和后代元素。例如：

div p {
  color: red;
}

在这个例子中，所有<div>元素内部的<p>元素，无论是直接还是间接子元素，都将应用红色字体。

子代选择器

• 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元

• 选择器语法：选择器1 > 选择器2 { css }

• 结果：

  • 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

• 注意点：

  • 子代只包括：儿子
  • 子代选择器中，选择器与选择器之前通过 > 隔

具体的说：子代选择器只能选择某个元素的直接子元素。子代选择器使用大于号（>）来分隔父元素和子元素。例如：

div > p {
  color: blue;
}

在这个例子中，只有<div>元素的直接子元素<p>才会应用蓝色字体，而<div>的间接子元素（即<p>嵌套在其他元素内部的情况）将不会受到影响。

---

总结一下：

• 后代选择器（descendant selector）是用空格（ ）分隔的，它选择指定元素的所有后代元素。
• 子代选择器（child selector）是用大于号（>）分隔的，它仅选择指定元素的直接子元素。

---

并集选择器（union selector）

• 作用：选择页面中同时满足多个选择器的标签

• 选择器语法：选择器1，选择器2 { css }

• 结果：

  • （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式

• 注意点：

  1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
  2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

h1, h2, p {
  color: green;
}

在这个例子中，我们选择了<h1>、<h2>和<p>元素，并将它们的字体颜色设置为绿色。并集选择器实际上表示“或”的关系，即选择器 A 或选择器 B 或选择器 C，等等。

交集选择器（intersection selector）

• 作用：选中页面中 同时满足 多个选择器的标
• 选择器语法：选择器1选择器2 { css }
• 结果：
  • （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
• 注意点：
  1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
  2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

具体的说：

交集选择器用于选择同时满足多个条件的元素。交集选择器通过将多个选择器紧密相连而不使用空格或其他符号来实现。例如：

p.highlight {
  color: orange;
}

在这个例子中，我们选择了同时具有<p>标签和highlight类的元素，并将它们的字体颜色设置为橙色。交集选择器实际上表示“且”的关系，即选择器 A 且选择器 B。

emmet语法

作用：通过简写语法，快速生成代码

1. 标签名：直接输入标签名，如 div、p、ul 等。
2. 类选择器：使用.表示类名。例如，.container 会生成 <div class="container"></div>。
3. ID 选择器：使用#表示 ID。例如，#header 会生成 <div id="header"></div>。
4. 交集选择器：将标签名、类名和/或 ID 选择器紧密相连。例如，p.highlight 会生成 <p class="highlight"></p>。
5. 子代选择器：使用>表示父子关系。例如，div>p 会生成：

<div>
  <p></p>
</div>

6. 内部文本：使用{}包裹文本。例如，p{Hello, world!} 会生成 <p>Hello, world!</p>。

7. 创建多个标签：使用*表示重复次数。例如，li*3 会生成：

<li></li>
<li></li>
<li></li>

hover伪类选择器

:hover 伪类选择器是 CSS 中一种常用的伪类选择器，它用于选择鼠标悬停在元素上时的元素样式。当用户将鼠标悬停在元素上时，:hover 选择器会应用指定的样式，当鼠标离开时，样式恢复为原始状态。:hover 伪类选择器常用于为链接、按钮和其他交互元素添加悬停效果。

以下是一个简单的使用 :hover 伪类选择器的例子：

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

在这个例子中，我们为所有的 <a> 元素定义了默认样式（蓝色文本，无下划线）。当用户将鼠标悬停在 <a> 元素上时，文本颜色会变为红色，并显示下划线。当鼠标离开时，样式将恢复为原始状态。

:hover 伪类选择器不仅可以应用于 <a> 元素，还可以应用于任何其他 HTML 元素，如 <div>、<button> 或 <li> 等。

背景相关

背景颜色

属性名：background-color（bgc）

属性值：

• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

注意点：

• 背景颜色默认值是透明： rgba(0,0,0,0)，transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

div {
  background-color: rgba(255, 153, 0, 0.5); /* 半透明橙色 */
}

背景图片

属性名：background-image（bgi）

注意点：

• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

div {
  background-image: url("example.jpg");
}

背景平铺

background-repeat 属性用于控制背景图片的平铺方式。可选值有：

• repeat：默认值，水平和垂直方向都平铺。
• repeat-x：仅在水平方向平铺。
• repeat-y：仅在垂直方向平铺。
• no-repeat：不平铺。

div {
  background-image: url("example.jpg");
  background-repeat: no-repeat;
}

图片位置

background-position（bgp）

background-position 属性可以让您更精确地控制背景图片的位置。例如，如果您希望将图片定位在元素的右上角，可以使用以下设置：

div {
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

此外，background-position 属性还支持使用两个关键字（如 left 20px top 10px）或两个百分比值（如 25% 75%）来设置背景图片的位置。

• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

背景相关连写

书写顺序：

• 推荐：background：color image repeat position

省略问题：

• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

例如，创建一个具有半透明颜色、线性渐变背景、不重复显示且位于右上角的背景样式：

div {
  background: rgba(255, 153, 0, 0.5) linear-gradient(to bottom right, red, yellow, green) no-repeat right top;
}

img标签与背景图片的区别

这两者之间的主要区别在于用途和样式控制：

1. 用途：

标签：用于插入内容图片，即图片作为网页内容的一部分，具有实际意义。

背景图片：用于设置页面的装饰和设计元素，作为页面布局和样式的一部分，不具有实际意义。

2. 样式控制：

标签：可以通过 HTML 和 CSS 控制其尺寸、位置和其他样式，但某些特性（如裁剪、平铺等）可能需要额外的方法。

背景图片：通过 CSS 设置，提供了更丰富的控制和样式选项（如位置、平铺方式、大小等），更易于实现设计效果。

---

总之，根据图片的实际用途，可以选择使用 <img> 标签或背景图片。如果图片是页面内容的一部分，具有实际意义，建议使用 <img> 标签；如果图片仅作为页面的装饰元素，可以使用背景图片。

元素显示模式

块级元素

属性值：display: block

块级元素在页面上独占一行，宽度默认填充其父容器，高度由内容决定。常见的块级元素有：<div>、<h1>～<h6>、<p>、<ul>、<li> 等。块级元素具有以下特点：

• 自动换行，每个块级元素占据新的一行。
• 默认宽度为父容器的100%。
• 可以设置宽度和高度。
• 可以应用外边距（margin）和内边距（padding）。

行内元素

属性：display：inline

行内元素不会独占一行，宽度和高度由内容决定。常见的行内元素有：<span>、<a>、<em>、<strong> 等。行内元素具有以下特点：

• 不换行，多个行内元素在同一行显示，直到排列空间不足时自动换行。
• 不能设置宽度和高度，宽度和高度由内容撑开。
• 上下外边距（margin）不生效，左右外边距生效。
• 上下内边距（padding）不会影响其他元素的位置。

行内块元素

属性：display：inline-block

行内块元素是块级元素和行内元素的结合体。它可以在同一行内显示，同时保留块级元素的特性（如设置宽度和高度）。常见的行内块元素有：<img>、<button> 、input、textarea等。行内块元素具有以下特点：

• 不换行，多个行内块元素在同一行显示，直到排列空间不足时自动换行。
• 可以设置宽度和高度。
• 可以应用外边距（margin）和内边距（padding）。

元素显示模式转换

在CSS中，可以通过display属性来改变元素的显示模式。这使得我们可以根据需要调整元素的布局和样式表现。

1. 将行内元素（inline）转换为块级元素（block）：

span {
  display: block;
}

这会使<span>元素具有块级元素的特性，如独占一行，可以设置宽度和高度等。

2. 将块级元素（block）转换为行内元素（inline）：

div {
  display: inline;
}

这会使<div>元素具有行内元素的特性，如不换行，宽度和高度由内容决定等。

3. 将行内元素（inline）或块级元素（block）转换为行内块元素（inline-block）：

span {
  display: inline-block;
}

这会使<span>元素具有行内块元素的特性，如不换行，可以设置宽度和高度等。

居中方法总结

1. 文本居中（水平居中）：适用于文本元素（如<p>、<h1>至<h6>、<span>等）及文本容器（如<div>、<section>等）。

.text-center {
  text-align: center;
}

2. 块级元素水平居中（使用外边距）：适用于块级元素（如<div>、<section>、<article>等）。

.block-center {
  margin-left: auto;
  margin-right: auto;
}

3. 行内元素和行内块元素水平居中（使用文本对齐）：适用于行内元素（如<span>、<a>、<img>等）和行内块元素（如<button>）。

.parent {
  text-align: center;
}

4. 使用Flexbox布局实现水平和垂直居中：适用于任何类型的子元素，例如<div>、<p>、<img>等。需要注意的是，要将display: flex;应用于父元素，而不是需要居中的子元素。

.flex-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

5. 使用Grid布局实现水平和垂直居中：适用于任何类型的子元素，例如<div>、<p>、<img>等。需要注意的是，要将display: grid;应用于父元素，而不是需要居中的子元素。

.grid-center {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

6. 使用绝对定位和transform实现水平和垂直居中：适用于任何类型的元素，例如<div>、<p>、<img>等。需要注意的是，要将position: relative;应用于父元素，而将position: absolute;和transform: translate(-50%, -50%);应用于需要居中的子元素。

.relative-parent {
  position: relative;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS三大特性

1. 继承性： 继承性是指子元素可以继承父元素的某些样式属性。这种特性可以减少代码的冗余，使得样式表更加简洁。但并非所有CSS属性都具有继承性，例如border、margin和padding等。具有继承性的属性主要包括文本相关的属性，如font-family、color、font-size等。

2. 层叠性： 层叠性是指当多个CSS样式规则应用于同一个元素时，它们会按照一定的优先级进行叠加，最终生成一个综合样式。层叠性可以让我们更灵活地定义和组合样式规则。CSS中的“层叠”一词源于英文"Cascading"，因此称为“层叠样式表”。

3. 优先级： 优先级是指在CSS中，不同的选择器和样式规则具有不同的权重。当一个元素同时受到多个规则的影响时，优先级较高的规则会覆盖优先级较低的规则。优先级主要由以下因素决定：

• 内联样式（在HTML元素上使用style属性）优先级最高。
• 选择器权重：ID选择器（如#id） > 类选择器（如.class）、属性选择器（如[type="text"]）和伪类（如:hover） > 标签选择器（如div）和伪元素（如::before）。
• 当权重相同时，后声明的样式会覆盖先声明的样式。
• 使用!important声明的样式具有最高优先级，但应谨慎使用，以免导致维护困难。

继承失败的特殊情况：

1. 优先级高的特定样式：当为一个元素设置了具有更高优先级的特定样式时，该样式将覆盖继承而来的样式。例如，如果为一个子元素显式设置了color属性，那么该元素将使用指定的颜色，而不是从父元素继承的颜色。

2. 不可继承的属性：并非所有CSS属性都具有继承性。例如，margin、padding、background、border等属性不会被子元素继承。对于这些属性，如果需要应用相同的样式，需要显式地为相应的子元素设置样式。

3. 初始值和继承：对于某些属性，如果没有显式设置值，则会使用默认的初始值，而不是继承父元素的值。例如，border属性的初始值是none。因此，如果没有为一个元素设置border属性，它将不会显示任何边框，即使其父元素有边框。

4. 表单元素：某些表单元素（如<input>、<select>和<button>）可能不会按照预期继承样式。这是因为这些元素的渲染受到操作系统和浏览器的影响。为了确保这些元素的样式与其他页面元素保持一致，需要显式地为它们设置样式。

5. 伪元素：伪元素（如::before和::after）不会继承大部分父元素的样式。需要为伪元素单独设置样式，以实现预期的效果。

权重叠加计算

CSS权重叠加计算是用于确定哪些样式规则应用于特定的HTML元素的方法。当多个CSS规则与同一个元素匹配时，权重叠加计算用于解决这些规则之间的冲突。CSS权重叠加遵循以下规则：

1. 重要性（!important）：标记为!important的声明具有更高的优先级。如果一个声明被标记为!important，它将优先于其他未标记的声明。
2. 选择器的特异性：特异性是一个表示选择器优先级的四元组(a, b, c, d)，其中：
   • a: 内联样式的数量
   • b: ID选择器的数量
   • c: 类选择器、属性选择器和伪类的数量
   • d: 元素选择器和伪元素的数量 选择器的特异性按以下顺序进行比较：a > b > c > d。值较高的选择器具有更高的优先级。
3. 源代码中的顺序：如果两个规则的重要性和特异性相同，那么在源代码中后出现的规则具有更高的优先级。

/* 特异性 (0, 1, 0, 0) */
#myid {
  color: green;
}

/* 特异性 (0, 0, 1, 0) */
.class1 {
  color: blue !important;
}

/* 特异性 (0, 0, 1, 0) */
.class2 {
  color: red;
}

如果一个HTML元素同时具有myid、class1和class2的ID和类属性，那么权重叠加计算将按以下顺序应用样式规则：

1. .class1的!important声明（最高优先级）
2. #myid的ID选择器（特异性较高）
3. .class2的类选择器（较低优先级）

因此，最终该元素的颜色将是蓝色。

当CSS权重叠加（即优先级）完全相同时，浏览器会根据源代码中规则的顺序来决定显示哪个样式。在源代码中后出现的规则将具有更高的优先级，因此会覆盖之前的规则。

盒子模型

盒子模型（Box Model）是CSS布局的基本概念，它描述了元素在页面上如何布局和渲染。在CSS中，每个元素都被视为一个矩形盒子，这个盒子由以下四个部分组成：

1. 内容（Content）：这是元素的实际内容，如文本、图片等。内容区域的尺寸可以通过width和height属性来设置。
2. 内边距（Padding）：这是内容区域周围的空白区域，位于内容和边框之间。内边距是透明的，可以通过padding属性（或其相关属性padding-top、padding-right、padding-bottom、padding-left）来设置。
3. 边框（Border）：这是围绕内边距和内容的线条，可以设置其样式、宽度和颜色。边框的样式可以通过border属性（或其相关属性border-width、border-style、border-color）来设置。
4. 外边距（Margin）：这是元素盒子外部的空白区域，用于与其他元素之间保持距离。外边距是透明的，可以通过margin属性（或其相关属性margin-top、margin-right、margin-bottom、margin-left）来设置。

总的来说，盒子模型定义了一个元素在页面上所占用的空间，包括内容、内边距、边框和外边距。了解盒子模型对于实现精确的布局和对齐是至关重要的。需要注意的是，有两种盒子模型计算方法：

1. 标准盒子模型（box-sizing: content-box）：元素的width和height仅包括内容区域，不包括内边距、边框和外边距。
2. 怪异盒子模型（box-sizing: border-box）：元素的width和height包括内容区域、内边距和边框，但不包括外边距。

在实际应用中，box-sizing: border-box更为常用，因为它使得布局和尺寸计算更加直观。要设置所有元素的盒子模型为border-box，可以使用以下全局CSS规则：

* {
  box-sizing: border-box;
}

border 相关属性

border属性在CSS中用于设置元素的边框。边框位于元素的内容和内边距之外，可以设置其样式、宽度和颜色。以下是与border相关的一些属性及其用法：

1. **border-width：**用于设置边框的宽度。可以为一个值（如1px）、两个值（例如2px 4px，分别表示上下边框和左右边框的宽度）、三个值（例如2px 4px 6px，分别表示上边框、左右边框和下边框的宽度）或四个值（例如1px 2px 3px 4px，分别表示上、右、下、左边框的宽度）。

2. **border-style：**用于设置边框的样式。可选值包括：none（无边框）、solid（实线边框）、dotted（点状边框）、dashed（虚线边框）、double（双线边框）、groove（凹槽边框）、ridge（脊状边框）、inset（内嵌边框）和outset（外凸边框）。与border-width类似，你可以设置一个值（应用于四个边）、两个值（上下边框和左右边框）、三个值（上边框、左右边框和下边框）或四个值（上、右、下、左边框）。

3. **border-color：**用于设置边框的颜色。可以使用颜色名称（如red）、十六进制（如#FF0000）、RGB（如rgb(255, 0, 0)）或HSL（如hsl(0, 100%, 50%)）等表示法。与border-width和border-style类似，你可以设置一个值（应用于四个边）、两个值（上下边框和左右边框）、三个值（上边框、左右边框和下边框）或四个值（上、右、下、左边框）。

4. border：这是一个简写属性，用于同时设置border-width、border-style和border-color。这个属性的值按以下顺序书写：宽度、样式、颜色。

5. 分别设置每个边框：你还可以使用border-top、border-right、border-bottom和border-left属性分别设置每个边框的宽度、样式和颜色。这些属性也是简写属性，它们的值顺序为：宽度、样式、颜色。

border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double purple;

此外，你还可以使用以下属性来分别设置每个边框的宽度、样式和颜色：

• border-top-width、border-right-width、border-bottom-width和border-left-width
• border-top-style、border-right-style、border-bottom-style和border-left-style
• border-top-color、border-right-color、border-bottom-color和border-left-color

padding

padding是CSS中的一个属性，它用于设置元素内边距，即元素内容与边框之间的空白区域。padding可以为元素提供一定的空间，使得内容与边框、其他元素之间保持一定的距离。

1. 设置单个方向的内边距：可以分别设置元素四个方向（上、右、下、左）的内边距，使用以下属性：

   • padding-top: 设置元素上方的内边距
   • padding-right: 设置元素右侧的内边距
   • padding-bottom: 设置元素下方的内边距
   • padding-left: 设置元素左侧的内边距

2. 使用简写属性：padding属性是一个简写属性，可以一次性设置元素所有方向的内边距。有以下几种用法：

• 设置所有方向相同的内边距：

padding: 10px;

• 设置上下和左右方向相同的内边距：

padding: 10px 20px;

• 分别设置上、右、下、左四个方向的内边距：

padding: 10px 20px 15px 25px;

内边距不会影响元素之间的距离，而是用于控制元素内部的空间。注意，当使用标准盒子模型（box-sizing: content-box）时，内边距会增加元素的总尺寸。而使用怪异盒子模型（box-sizing: border-box）时，内边距不会影响元素的总尺寸。

盒子实际大小计算公式

标准盒子模型（box-sizing: content-box）：在这种盒子模型中，元素的实际大小由内容区域、内边距（padding）和边框（border）共同决定。外边距（margin）不包括在内，因为它不影响元素本身的尺寸，而是影响元素与其他元素之间的距离。

计算公式如下：

• 实际宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度

• 实际高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度

新浪导航案例

Ø 布局顺序： 1. 从外往内，从上往下

Ø 每一个盒子的样式：

1. 宽高
2. 辅助的背景颜色
3. 盒子模型的部分：border、padding、margin
4. 其他样式：color、font-、text-、……

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      height: 40px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
    }

    .box a {
      display: inline-block;
      /* width: 80px; */
      height: 40px;
      /* 通过内边距设置边框与内容的间距 */
      padding: 0 20px;
      color: #4c4c4c;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
      font-size: 12px;
    }

    .box a:hover {
      background-color: #edeef0;
      color: #ff8400;
    }
  </style>
</head>
<body>
  <div class="box">
    <a href="#">新浪导航</a><a href="#">新浪导航新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
  </div>
</body>
</html>

CSS3盒模型（自动内减）——怪异盒模型

CSS3盒模型中的box-sizing属性用于控制盒子的计算方式。默认的盒模型是content-box，也就是标准盒模型。在这个模型下，**元素的宽度和高度只包括内容区域，而内边距（padding）和边框（border）会叠加到元素的总尺寸上。**这可能会导致布局问题，尤其是当你需要设置固定宽度或高度的容器时。

为了解决这个问题，CSS3引入了另一种盒模型：**border-box，即怪异盒模型或自动内减盒模型。**在这个模型下，元素的宽度和高度包括内容区域、内边距（padding）和边框（border）。当你增加内边距或边框时，内容区域的大小会自动调整以适应设定的宽度和高度，而元素的总尺寸保持不变。

margin

margin 是 CSS 中用于设置元素的外边距的属性。外边距是元素与相邻元素之间的空白区域，用于控制元素之间的间距。margin 可以为元素提供一定的间距，使得页面布局更加美观和整洁。

1. 设置单个方向的外边距：可以分别设置元素四个方向（上、右、下、左）的外边距，使用以下属性：

   • margin-top: 设置元素上方的外边距
   • margin-right: 设置元素右侧的外边距
   • margin-bottom: 设置元素下方的外边距
   • margin-left: 设置元素左侧的外边距

   

2. 简写属性和border padding一样

3. 外边距合并：当两个垂直相邻的元素的上下外边距相遇时，它们会合并为一个外边距，这个外边距的大小是两者中较大的那个。这被称为外边距合并（margin collapsing）。需要注意的是，外边距合并仅在垂直方向上发生，水平方向上的外边距不会合并。

4. 使用外边距实现居中：如果要将一个块级元素在水平方向上居中，可以使用 margin: 0 auto;。这将左右外边距设置为自动（auto），浏览器会自动计算左右外边距以使元素居中。需要注意的是，这种方法只适用于具有明确宽度的块级元素。示例如下：

.centered {
  width: 50%;
  margin: 0 auto;
}

清除内外边距

两种方法：

1. 通配符选择器：使用通配符选择器 * 可以选取所有元素，并将它们的内边距（padding）和外边距（margin）设置为 0。

/* 重置内外边距 */
* {
  margin: 0;
  padding: 0;
}

2. 如下图：

外边距的折叠现象

外边距折叠（Margin collapsing）是 CSS 中一个特殊的现象，**当两个垂直相邻的元素的外边距接触时，它们会合并为一个外边距。**这个合并后的外边距的大小是两者中较大的那个外边距。需要注意的是，外边距折叠仅发生在垂直方向（上下）上，水平方向（左右）上的外边距不会折叠。

以下是一些外边距折叠的典型情况：

1. 相邻兄弟元素：当两个兄弟元素垂直排列时，它们之间的外边距会发生折叠。例如，一个元素的下外边距与其下方相邻兄弟元素的上外边距接触时，这两个外边距会折叠。
2. 父子元素：当一个元素的上外边距与其父元素的上外边距接触时（例如，父元素没有上边框、上内边距和其他内容），这两个外边距会折叠。类似地，当一个元素的下外边距与其父元素的下外边距接触时（例如，父元素没有下边框、下内边距和其他内容），这两个外边距也会折叠。
3. 空块级元素：如果一个块级元素没有内容、内边距和边框，那么它的上外边距和下外边距会发生折叠。

外边距折叠是 CSS 中的一种预期行为，通常不会对布局造成问题。然而，在某些情况下，如果不希望外边距折叠，可以采取以下方法：

1. 添加内边距或边框：给父元素添加一个非零的内边距或边框可以防止父子元素之间的外边距折叠。
2. 使用浮动或绝对定位：浮动元素（float: left 或 float: right）和绝对定位元素（position: absolute）的外边距不会发生折叠。
3. 添加透明边框：如果不想更改布局，可以给元素添加一个透明的边框来防止外边距折叠。

了解外边距折叠现象及其规则对于掌握 CSS 布局和间距控制非常重要。

行内元素的margin和padding无效情况

对于行内元素，垂直方向的 margin 和 padding 不会影响元素周围的其他行内元素的位置。尽管垂直方向的 margin 和 padding 可能会影响元素本身的背景和边框的大小，但它们不会导致周围的行内元素向上或向下移动，也不会影响行高。

这是因为行内元素的布局遵循特定的规则，它们是基于基线（baseline）对齐的。行内元素的上下外边距和内边距不会影响基线的位置，从而导致它们在垂直方向上的影响有限。

如果你需要在行内元素上使用垂直方向的 margin 和 padding，可以将其 display 属性更改为 inline-block。inline-block 元素在水平方向上像行内元素一样排列，但在垂直方向上表现为块级元素。因此，将元素的 display 属性设置为 inline-block 可以使垂直方向的 margin 和 padding 生效。

解释说明：

预期行为

“预期行为” 是指外边距折叠（Margin collapsing）是 CSS 设计者故意加入的特性，而不是一个错误或意外行为。换句话说，CSS 的开发者已经考虑到了这种情况，并且认为它是一个有用的特性。

因此，当我们说外边距折叠是 CSS 中的一种预期行为时，意味着这种行为是符合 CSS 规范的，并在开发者设计和实现 CSS 时就已经预见到了这种现象。所以，当你在使用 CSS 布局时遇到外边距折叠现象，你应该知道这是一种正常且符合设计目的的现象，而不是一个错误。