前端之css第三天-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端之css第三天。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS的盒子模型是用来描述HTML元素在页面中的布局和排列方式的一种模型。每个HTML元素都可以被看作是一个矩形的盒子，这个盒子由四个可调整大小的部分组成：内容区域、内边距区域、边框区域和外边距区域。

内容区域（content area）：此区域存放元素的实际内容，例如文本、图像或其他嵌套元素。
内边距区域（padding area）：此区域是位于内容区域之外的空白区域，可以用于添加元素的内边距（padding）以增加内容与边框之间的距离。
边框区域（border area）：此区域是位于内边距区域之外的边界，用于显示元素的边框（border）。
外边距区域（margin area）：此区域是位于边框区域之外的空白区域，用于控制元素与其周围元素之间的距离。

这些区域的大小可以通过CSS的属性进行调整，例如设置元素的宽度、高度、内边距和外边距等。通过调整这些属性，可以实现不同的布局效果和样式。

除了这些基本的盒子模型属性外，CSS还提供了一些扩展属性，例如盒子的阴影效果、圆角边框、盒子的背景图片等，可以进一步丰富和定制盒子的样式。

1.CSS层叠性

CSS层叠性是指当多个CSS规则应用于同一个元素时，浏览器会根据一定的优先级规则来决定哪个规则生效。下面是一个例子：

HTML代码：


<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: red;
  }
.blue {
  color: blue;
}
</style>
</head>
<body>
  <p class="blue">这段文字是红色还是蓝色？</p>
</body>
</html>

在这个例子中，我们有一个<p>标签，它同时被两个CSS规则影响：一个是全局的p选择器，另一个是类名为.blue的选择器。根据CSS层叠性的规则，具有更高优先级的选择器会覆盖较低优先级的选择器。在这个例子中，.blue选择器的优先级高于p选择器，因此最终的文字颜色将是蓝色。

2.CSS继承性

CSS继承性是指子元素可以继承父元素的样式。下面是一个例子：

HTML代码：


<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    color: blue;
  }
</style>
</head>
<body>
  <div>
    <p>这段文字的字体是Arial，颜色是蓝色。</p>
  </div>
</body>
</html>

在这个例子中，我们有一个<p>标签，它被包含在一个<div>标签内。我们为<body>标签设置了字体和颜色样式。由于CSS继承性的特性，<p>标签会继承<body>标签的字体和颜色样式，因此最终的文字字体是Arial，颜色是蓝色。

3.行高的继承

行高的继承是指子元素可以继承父元素的行高。下面是一个例子：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 设置段落元素p的行高为1.5，这意味着每一行文本的高度是字体大小的1.5倍 */
  p {
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div>
    <p>这段文字的行高是1.5。</p>
  </div>
</body>
</html>

在这个例子中，我们有一个<p>标签，它被包含在一个<div>标签内。我们为<p>标签设置了行高样式。由于行高的继承性，<p>标签会继承<div>标签的行高样式，因此最终的文字行高是1.5。

4.CSS优先级

CSS优先级是指当多个CSS规则应用于同一个元素时，浏览器会根据一定的优先级规则来决定哪个规则生效。下面是一个例子：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    line-height: 1.5;
  }
</style>
</head>
<body>
  <div>
    <p>这段文字的行高是1.5。</p>
  </div>
</body>
</html>

CSS代码：

.blue {
  color: blue;
}

在这个例子中，我们有一个<p>标签，它同时被两个CSS规则影响：一个是全局的p选择器，另一个是类名为.blue的选择器。根据CSS优先级的规则，具有更高优先级的选择器会覆盖较低优先级的选择器。在这个例子中，.blue选择器的优先级高于p选择器，因此最终的文字颜色将是蓝色。

5.CSS权重注意点

在CSS中，权重是用于确定样式的优先级的规则。以下是一些关于CSS权重的注意点：

1. 标签选择器的权重最低：使用标签选择器（如div、p等）作为样式选择器时，它的权重最低，因此它的样式会被其他更具体的选择器所覆盖。

2. 类选择器和属性选择器的权重相同：使用类选择器（如.class）和属性选择器（如[type="text"]）时，它们的权重是相同的，因此它们的样式会互相覆盖。

3. ID选择器的权重最高：使用ID选择器（如#id）时，它的权重最高，因此它的样式会覆盖其他选择器的样式。

4. 内联样式的权重最高：使用内联样式（即在HTML元素中直接写样式）时，它的权重是最高的，因此它的样式会覆盖其他选择器的样式。

5. 选择器的具体性决定权重：如果多个选择器具有相同的权重，那么选择器的具体性将决定哪个样式将被应用。例如，类选择器的权重高于标签选择器，因此具有相同权重的类选择器将覆盖标签选择器的样式。

6. 选择器的嵌套不会增加权重：选择器的嵌套不会增加权重。例如，div p和p选择器具有相同的权重，因此它们的样式会互相覆盖。

7. !important声明具有最高的权重：使用!important声明可以将样式的权重提高到最高，它会覆盖其他所有选择器的样式。然而，滥用!important声明可能导致样式难以维护和调试，应谨慎使用。

8. 继承的样式权重较低：继承来的样式权重较低，因此它们容易被其他选择器的样式所覆盖。如果需要提高继承样式的权重，可以使用!important声明。

请注意，以上仅是一些基本的CSS权重注意点，实际应用中可能存在更复杂的情况，因此在编写样式时，应仔细考虑权重，并确保样式按预期生效。

下面是一个例子：

html:

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
  <p class="blue">这段文字是红色还是蓝色？</p>
</body>
</html>

css:

.blue {
  color: blue;
}

在这个例子中，我们有一个<p>标签，它同时被两个CSS规则影响：一个是全局的p选择器，另一个是类名为.blue的选择器。根据CSS权重的规则，具有更高优先级的选择器会覆盖较低优先级的选择器。在这个例子中，.blue选择器的优先级高于p选择器，因此最终的文字颜色将是蓝色。需要注意的是，CSS权重不仅仅取决于选择器的优先级，还受到其他因素的影响，例如内联样式、ID选择器等。

6.权重的叠加

权重的叠加是指当多个CSS规则应用于同一个元素时，浏览器会根据一定的优先级规则来决定哪个规则生效。下面是一个例子：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: red;
    font-size: 16px;
  }
</style>
</head>
<body>
  <p class="blue">这段文字是红色还是蓝色？字体大小是多少？</p>
</body>
</html>

CSS代码：

.blue {
  color: blue;
}

p {
  font-size: 20px;
}

在这个例子中，我们有一个<p>标签，它同时被三个CSS规则影响：一个是全局的p选择器，另一个是类名为.blue的选择器，还有一个是内联样式。根据CSS权重的规则，具有更高优先级的选择器会覆盖较低优先级的选择器。在这个例子中，.blue选择器的优先级高于p选择器，但是低于内联样式。因此最终的文字颜色将是蓝色，字体大小将是20像素。需要注意的是，CSS权重不仅仅取决于选择器的优先级，还受到其他因素的影响，例如内联样式、ID选择器等。

7.css权重练习1

HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: red;
    font-size: 16px;
  }
</style>
</head>
<body>
  <p class="blue">这段文字是红色还是蓝色？字体大小是多少？</p>
</body>
</html>

CSS代码：

.blue {
  color: blue;
}

p {
  font-size: 20px;
}

8.css权重练习2

CSS权重的计算涉及到选择器的不同类型及其组合。下面是一个复杂一点的例子，用来说明不同选择器组合时权重的计算：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  /* 权重: (0,1,1) class 选择器和标签选择器组合 */
  .class1 span {
    color: blue;
  }

  /* 权重: (0,2,1) 两个 class 选择器和一个标签选择器组合 */
  .class2.class3 p {
    color: green;
  }

  /* 权重: (1,0,0) ID 选择器 */
  #id1 {
    color: red;
  }

  /* 权重: (0,0,2) 两个标签选择器 */
  div p {
    color: yellow;
  }

  /* 权重: (1,0,1) ID 选择器和一个标签选择器 */
  #id2 span {
    color: purple;
  }
</style>
</head>
<body>
  <div id="id1" class="class1">
    <p>这段文本应该显示为红色，因为ID选择器权重更高。</p>
    <span>这个span应该是紫色，因为#id2 span的选择器权重高于其他针对span的选择器。</span>
  </div>

  <div class="class2 class3">
    <p>这段文本应该显示为绿色，因为虽然它有多个类选择器但没有ID选择器，且类选择器的数量多于单一类选择器的情况。</p>
  </div>

  <div>
    <p>这段文本在所有例子中权重最低，所以如果没有任何元素影响它，则默认颜色显示（黑色或浏览器默认设置的颜色）；如果有多个规则同时匹配且权重相同，则按照样式定义的顺序，后面的样式会覆盖前面的样式。</p>
    <span>这个span如果没有被更具体的选择器选中，则可能受到权重为(0,1,1)的选择器影响，显示为蓝色。</span>
  </div>
</body>
</html>

在这个示例中，我们看到不同的选择器组合如何影响样式的优先级。当计算权重时，ID选择器的权重最高，然后是类选择器、属性选择器、伪类等，最后是标签选择器。如果权重相同，则后定义的样式会覆盖前一个定义的样式。而在实际应用中，!important 规则可以进一步提升某个声明的优先级，即使其权重较低也会生效。

9.盒子模型之边框

CSS盒子模型中，边框（border）是围绕元素内容和内填充的一个区域。以下是一个关于边框的简单例子：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    /* 定义一个类名为.example-box的样式 */
    .example-box {
      /* 设置盒子宽度为200像素 */
      width: 200px;
      
      /* 设置盒子高度为100像素 */
      height: 100px;
      
      /* 设置盒子背景颜色为浅灰色 (#f0f0f0) */
      background-color: #f0f0f0; 

      /* 设置边框整体样式，统一设置四边边框宽度、样式和颜色 */
      /* border-width: 5px; 边框宽度为5像素 */
      /* border-style: solid; 边框样式为实线 */
      /* border-color: #333; 边框颜色为深灰色 (#333) */
      
      /* 或者可以使用简写属性一次性设置所有边框样式 */
      /* border: 5px solid #333; */

      /* 对于单独设置每一边的边框 */
      /* 设置上边框宽度为3像素 */
      border-top-width: 3px;
      
      /* 设置右边框样式为虚线 */
      border-right-style: dashed;
      
      /* 设置下边框颜色为红色 */
      border-bottom-color: red;
      
      /* 设置左边框样式，包括宽度（2像素）、样式（点状）和颜色（蓝色） */
      border-left: 2px dotted blue;
    }
  </style>
</head>
<body>
  <div class="example-box">
    这是一个具有自定义边框样式的盒子。
  </div>
</body>
</html>
```

在这个例子中，.example-box 类应用于一个 <div> 元素，并设置了不同的边框属性以展示如何控制盒子四周的边框样式。通过分别设置 border-width、border-style 和 border-color 属性，或者使用简写的 border 属性来统一设置四边，以及针对单个边进行特殊样式定制，我们可以创建出各种各样的边框效果。

10.边框的复合写法

CSS边框的复合写法允许你使用一个简短的声明来同时设置四个边框的宽度、样式和颜色，或者分别设置每个单独的边框。以下是一个复合写法的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .example-box {
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;

      /* 边框复合写法（所有边） */
      border: 3px solid #333; /* 这一行设置了四边边框宽度为3像素，样式为实线，颜色为深灰色 */

      /* 或者也可以分开对每个边进行设置 */
      border-top: 1px dotted red; /* 上边框：宽度1像素，样式为点状，颜色为红色 */
      border-right: thick double #ffcc00; /* 右边框：使用关键字“thick”表示较宽，样式为双线，颜色为黄色 */
      border-bottom: 2px dashed blue; /* 下边框：宽度2像素，样式为虚线，颜色为蓝色 */
      border-left: 4px groove green; /* 左边框：宽度4像素，样式为沟槽效果，颜色为绿色 */
    }
  </style>
</head>
<body>
  <div class="example-box">
    这个盒子展示了边框的不同复合写法。
  </div>
</body>
</html>

在这个例子中，.example-box 类通过 border 属性的一次性设置展示了如何快速定义所有边框样式。随后又通过分别为每个边单独设置样式来展示更详细的控制能力。复合写法可以用于快速统一风格，而个别边的独立设置则可实现复杂且定制化的边框效果。

11.课堂练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框的练习</title>
    <style>
        /* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
            /* border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue; */
            /* border包含四条边 */
            border: 1px solid blue;
            /* 层叠性 只是层叠了 上边框啊 */
            border-top: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

12.细线表格今日小说排行榜案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }
        th {
            height: 35px;
        }
        table,
        td, th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table align="center" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

13.边框会影响盒子的实际大小

在CSS中，默认的盒子模型（也称为W3C盒子模型）下，边框（border）的确会增加元素的实际大小。这里有一个例子来说明这一点：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 100px; /* 设置宽度为100像素 */
    height: 100px; /* 设置高度为100像素 */
    background-color: yellow; /* 内容区域背景色为黄色 */
    
    /* 添加边框样式，边框宽度为20像素 */
    border: 20px solid black;
  }
</style>
</head>
<body>

<div class="box">
  盒子内容
</div>

</body>
</html>

在这个例子中，.box 类设置了宽度和高度均为100像素。当给这个元素添加了20像素宽的黑色实线边框后，实际占据的空间将会是：

内容区域：100px × 100px
左右边框各加20px：40px (20px + 20px)
上下边框各加20px：40px (20px + 20px)

所以，最终盒子在页面上显示时所占据的总宽度将是 100px + 40px = 140px，总高度将是 100px + 40px = 140px。

如果你想让边框不改变盒子内容区域的实际大小，可以使用 box-sizing: border-box; 属性来更改盒子模型的行为方式。在 border-box 模型下，设置的宽度和高度将包含内填充（padding）和边框（border），而不会超出指定的尺寸。

14.盒子模型之内边距padding

CSS盒子模型中，内边距（padding）是指元素内容区域与边框之间的空间。下面是一个关于padding属性的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .example-box {
    width: 300px; /* 设置盒子宽度为300像素 */
    height: 200px; /* 设置盒子高度为200像素 */
    background-color: #f0f0f0; /* 设置背景色为浅灰色 */
    
    /* 设置内边距：上下左右分别为40像素、30像素、20像素、10像素 */
    padding: 40px 30px 20px 10px;
    
    /* 或者可以分别设置每个方向的内边距 */
    /* padding-top: 40px; */
    /* padding-right: 30px; */
    /* padding-bottom: 20px; */
    /* padding-left: 10px; */
  }
  
  .content {
    background-color: #fff; /* 内容区域背景颜色为白色 */
  }
</style>
</head>
<body>

<div class="example-box">
  <div class="content">
    这是盒子的内容区域，在内容和边框之间有不同大小的内边距。
  </div>
</div>

</body>
</html>

在这个例子中，.example-box 类设置了宽度和高度，并且使用了 padding 属性来增加其内容与边框之间的距离。四个数值按照上右下左的顺序指定内边距值。如果只给 padding 一个值，则该值会被应用到所有方向；如果是两个值，则第一个值用于上下，第二个值用于左右；如果是三个值，则依次为上、左右、下；如果是四个值，则按顺序分别应用于上、右、下、左。

在实际效果中，由于设置了内边距，".content" 的实际可见区域会距离盒子的边框有一定间距。

15.盒子模型之内边距复合写法

CSS盒子模型中，内边距（padding）的复合写法允许你通过一个简短的声明来设置元素四周的内边距。下面是一个关于padding复合写法的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .example-box {
    width: 300px; /* 设置盒子宽度 */
    height: 200px; /* 设置盒子高度 */
    background-color: #f0f0f0; /* 设置背景颜色 */

    /* 内边距复合写法例子：
       - 当提供两个值时，第一个值用于上下内边距，第二个值用于左右内边距
       - 在本例中，上和下内边距为20像素，左和右内边距为40像素 */
    padding: 20px 40px;
    
    /* 或者，可以使用简写属性分别指定所有四个方向的内边距：
       padding: 上内边距 右内边距 下内边距 左内边距 */
    /* padding: 10px 20px 30px 40px; */
  }
  
  .content {
    background-color: #fff; /* 内容区域背景颜色 */
  }
</style>
</head>
<body>

<div class="example-box">
  <div class="content">
    这是盒子的内容区域，在内容与边框之间有不同大小的内边距。
  </div>
</div>

</body>
</html>

在这个示例中，.example-box 类的 padding 属性设置了复合写法，将上下的内边距设为20像素，左右的内边距设为40像素。这样做的结果是，内容区域与盒子边框之间的空间在顶部和底部是20像素宽，在左侧和右侧是40像素宽。

16.内边距会影响盒子实际大小

CSS中，内边距（padding）确实会增加盒子的实际大小。默认的盒模型（W3C盒模型）中，元素的总宽度和总高度由内容区域、内边距、边框和外边距共同组成。

下面是一个具体的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 100px; /* 设置内容区域宽度为100像素 */
    height: 100px; /* 设置内容区域高度为100像素 */
    background-color: yellow; /* 内容区域背景颜色为黄色 */
    
    padding: 20px; /* 在内容区域四周添加20像素的内边距 */
    
    border: 1px solid black; /* 边框样式仅为展示，不影响实际大小的说明 */
  }
</style>
</head>
<body>

<div class="box">
  盒子内容
</div>

</body>
</html>

在这个示例中，.box 类设置了内容区域的宽度和高度均为100像素，并且给它添加了20像素的内边距。因此，在这个情况下，盒子的实际宽度将变成 100px + 20px (左内边距) + 20px (右内边距) = 140px，而实际高度将变为 100px + 20px (上内边距) + 20px (下内边距) = 140px。

这意味着虽然内容区域的尺寸是固定的100px × 100px，但加上内边距后，整个盒子在页面上占据的空间会更大。如果需要让内边距不改变盒子在布局中的大小，可以使用 box-sizing: border-box; 来更改盒模型的行为方式，使得设置的宽度和高度包括了内边距和边框。

17.padding应用-新浪导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素 此时必须要转换 行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>
</html>

18.小米侧边栏修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单版小米侧边栏</title>
    <style>
        /* 1. 把a转换为块级元素 */
        a {
            display: block;
            width: 200px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            line-height: 40px;
        }

        /* 2 鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>

    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

19.padding不会影响盒子大小情况

在CSS中，如果希望内边距（padding）不增加盒子的实际大小，可以使用 box-sizing 属性，并将其值设置为 border-box。在 border-box 模式下，元素的总宽度和总高度将包含内容区域、内边距和边框，而不会超出你所设置的宽度和高度。

下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    background-color: yellow; /* 内容区域背景色 */
    
    box-sizing: border-box; /* 更改盒模型为 border-box */
    
    padding: 20px; /* 添加内边距，但不会影响盒子实际尺寸 */
    
    border: 1px solid black; /* 边框样式仅为展示，不影响实际大小的说明 */
  }
</style>
</head>
<body>

<div class="box">
  盒子内容
</div>

</body>
</html>

在这个示例中，.box 类设置了宽度和高度均为100像素，并且给它添加了20像素的内边距。由于设置了 box-sizing: border-box;，即使增加了内边距，盒子的总体尺寸依然保持在100px × 100px，即内边距被包含在已设定的宽度和高度之内，而不是额外增加到盒子外部。

20.盒子模型之外边距margin

CSS盒子模型中，外边距（margin）是指一个元素的边缘与其周围元素之间的空白区域。下面是一个关于margin属性的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    width: 300px; /* 设置盒子宽度 */
    height: 200px; /* 设置盒子高度 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    
    /* 设置外边距：上下左右分别为10像素、20像素、30像素、40像素 */
    margin: 10px 20px 30px 40px;
    
    /* 或者可以分别设置每个方向的外边距 */
    /* margin-top: 10px; */
    /* margin-right: 20px; */
    /* margin-bottom: 30px; */
    /* margin-left: 40px; */
  }
</style>
</head>
<body>

<div class="box">
  这是盒子的内容区域，其外部有不同大小的外边距。
</div>

<div class="box">
  另一个盒子，用于展示相邻元素之间的外边距合并效果。
</div>

</body>
</html>

在这个例子中，.box 类设置了宽度和高度，并使用 margin 属性定义了其与周围元素或页面边缘的距离。四个数值按照上右下左的顺序指定外边距值。

在实际效果中，第一个 .box 元素会根据给定的外边距值与上方、右侧、下方和左侧的元素保持一定间距。而相邻的两个 .box 元素之间，如果它们的垂直外边距相遇，则会发生外边距合并（margin collapsing），具体表现取决于浏览器对这种情况的处理规则。

21.外边距典型应用-块级盒子水平居中对齐

CSS中，外边距（margin）常用于实现块级元素的水平居中对齐。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    width: 100%;
    /* 确保父容器撑满浏览器宽度 */
    text-align: center; /* 对子元素进行水平居中对齐辅助（对于内联或内联块元素有效） */
  }

  .box {
    display: inline-block; /* 将块级元素转化为内联块级元素以便利用text-align属性进行居中 */
    width: 300px; /* 设置盒子宽度 */
    height: 200px; /* 设置盒子高度 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    margin: 0 auto; /* 使用自动外边距将盒子水平居中 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="box">
    这是一个通过设置左右外边距为auto实现水平居中的块级元素。
  </div>
</div>

</body>
</html>

在上述示例中，.box 类是一个具有指定宽度的块级元素。为了使其在 .container 内部水平居中，我们将其 display 属性设置为 inline-block，然后使用 margin: 0 auto; 来设置其左右外边距为自动。这样，当 width 已知时，浏览器会自动分配左右外边距，使得该元素在其父容器内部居中显示。同时，父容器需要有明确的宽度，并且设置了 text-align: center; 以确保内联或内联块级元素能够正确居中。

22.行内元素和行内块元素水平居中

行内元素（inline elements）和行内块元素（inline-block elements）可以通过不同的方式实现水平居中对齐。以下是两个例子：

1. 行内元素水平居中

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    text-align: center; /* 使用text-align属性使行内元素在父容器内水平居中 */
  }
</style>
</head>
<body>

<div class="container">
  <span class="inline-element">这是一个行内元素，已被水平居中。</span>
</div>

</body>
</html>

在这个例子中，<span> 是一个行内元素，通过给其父容器 .container 设置 text-align: center; 可以使其在父容器内部水平居中。

2. 行内块元素水平居中

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    text-align: center; /* 对于文本内容也可以使用text-align属性进行辅助居中 */
  }

  .inline-block-element {
    display: inline-block; /* 将元素转化为行内块级元素 */
    width: 200px; /* 给元素设置固定宽度 */
    margin: 0 auto; /* 利用自动外边距实现水平居中 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="inline-block-element">
    这是一个行内块元素，通过设置左右外边距为auto实现了水平居中。
  </div>
</div>

</body>
</html>

在此示例中，.inline-block-element 类被设置为 display: inline-block;，这样它既可以保持在文本流中，又可以拥有块级元素的某些特性，例如设置宽度。然后，通过设置 margin: 0 auto;，当元素具有明确宽度时，浏览器会自动分配左右外边距来使其水平居中。同时，为了确保整个元素在父容器 .container 内居中，我们同样设置了 .container 的 text-align: center; 属性。

23.外边距合并-相邻块级元素

CSS中，当两个垂直相邻的块级元素（兄弟元素）相遇时，它们之间的外边距会发生合并现象，即取两者外边距中的较大值作为两者的间距。下面是一个关于相邻块级元素外边距合并的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    height: 50px; /* 每个盒子的高度 */
    background-color: #f0f0f0; /* 背景颜色以便于观察 */
  }

  /* 设置第一个盒子的下外边距 */
  .box1 {
    margin-bottom: 30px;
  }

  /* 设置第二个盒子的上外边距 */
  .box2 {
    margin-top: 50px;
  }
</style>
</head>
<body>

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

</body>
</html>

在上述代码中，.box1 和 .box2 是两个相邻的块级元素。.box1 的 margin-bottom 设置为 30 像素，而 .box2 的 margin-top 设置为 50 像素。按照 CSS 外边距合并规则，在这两个元素之间最终显示的实际垂直间距将是 50 像素（而不是 80 像素），因为浏览器会选取二者中较大的外边距值。

所以在这个例子中，尽管设置了不同的外边距，但最终渲染效果中，Box 1 与 Box 2 之间的距离将会是 50 像素。

24.外边距合并-嵌套块元素

CSS中，外边距合并（Margin collapsing）也适用于嵌套的块级元素。当一个块级元素的顶部或底部外边距与它的第一个或最后一个子元素的外边距相邻时，在某些情况下也会发生外边距合并。下面是一个关于嵌套块元素外边距合并的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .parent {
    background-color: #f0f0f0; /* 设置背景颜色以便观察 */
  }

  .child {
    margin-top: 30px; /* 子元素设置上外边距 */
    height: 50px;
    background-color: #ccc;
  }

  /* 父元素没有内容、内边距和边框 */
</style>
</head>
<body>

<div class="parent">
  <div class="child">子元素</div>
</div>

</body>
</html>

在这个例子中，.parent 是父元素，.child 是其内部的嵌套子元素。.child 元素设置了 margin-top: 30px;。如果 .parent 元素自身没有上内边距、上边框或者非空内容填充，则 .parent 的上边缘会与 .child 的上外边距合并，这意味着 .parent 与它上方其他元素之间的实际垂直间距将是 .child 的 margin-top 值。

因此，在这个场景下，即使没有给 .parent 设置外边距，由于外边距合并现象，.parent 区域的顶部将与它外部的内容区域保持 30 像素的距离，这是因为子元素的外边距“折叠”到了父元素的外面。

25.清除内外边距

在CSS中，有时我们希望清除元素的内外边距以避免默认样式或浏览器差异带来的影响。可以使用 margin 和 padding 属性将它们设置为0来实现这一目的。以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  /* 清除整个页面的默认内外边距 */
  body {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;

    /* 清除这个盒子的内外边距 */
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>

<div class="box">
  这是一个内外边距已被清除的盒子。
</div>

</body>
</html>

在这个示例中，我们首先清除了整个 <body> 元素的内外边距，确保页面内容不会因为浏览器默认样式而有额外的间距。然后，.box 类中的元素也设置了内外边距为0，这意味着该盒子的内容区域紧贴其边框，没有内边距空隙，且与周围的元素之间也没有外边距距离。

26.综合案例-产品模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-产品模块</title>
    <style>
      * {
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #f5f5f5;
      }
      a {
          color: #333;
          text-decoration: none;
      }
      .box {
          width: 298px;
          height: 415px;
          background-color:#fff;
          /* 让块级的盒子水平居中对齐 */
          margin: 100px auto;
      }
      .box img {
          /* 图片的宽度和父亲一样宽 */
          width: 100%;
      }
      .review {
          height: 70px;
          font-size: 14px;
          /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
          padding: 0 28px;
          margin-top: 30px;
      }
      .appraise {
          font-size: 12px;
          color: #b0b0b0;
          margin-top: 20px;
          padding: 0 28px;
      }
      .info {
          font-size: 14px;
          margin-top: 15px;
          padding: 0 28px;
      }
      .info h4 {
          display: inline-block;
          font-weight: 400;
        
      }
      .info span {
          color: #ff6700;    
      }
      .info em {
          font-style: normal;
          color: #ebe4e0;
          margin: 0 6px 0 15px;
      }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 46243542 的评价</div>
        <div class="info">
               <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
               <em>|</em>
               <span> 99.9元</span>
        </div>
    </div>
</body>
</html>

写作不易，请支持支持，你的点赞是我写的动力

后续内容：请点击

最后求点赞，求分享，求抱抱...文章来源地址https://www.toymoban.com/news/detail-835712.html

到了这里，关于前端之css第三天的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！