CSS基础（浮动、相对定位、绝对定位、固定定位、粘性定位、版心、重置默认样式）

文章目录

1. 浮动（float）
- 1.1 简介
- 1.2 元素浮动后的特点
- 1.3 脱离文档流示例图
- 1.4 浮动产生的影响
- - 1.4.1 积极影响
  - 1.4.2 消极影响
- 1.5 解决浮动产生的影响
- - 1.5.1 清除浮动（Clearfix）
  - 1.5.2 创建新的块格式化上下文（BFC）
2. 定位（position）
- 2.1 相对定位
- - 2.1.1 如何设置相对定位
  - 2.1.2 相对定位的参考点
  - 2.1.3 相对定位的特点
- 2.2 绝对定位
- - 2.2.1 如何确定元素的包含块
  - 2.2.2 如何设置绝对定位
  - 2.2.3 绝对定位的参考点
  - 2.2.4 绝对定位的特点
- 2.3 固定定位
- - 2.3.1 如何设置固定定位
  - 2.3.2 固定定位的参考点
  - 2.3.3 固定定位的特点
  - 2.3.4 示例代码
- 2.4 粘性定位
- - 2.4.1 如何设置粘性定位
  - 2.4.2 粘性定位的参考点
  - 2.4.3 粘性定位的特点
  - 2.4.4 示例代码
- 2.5 固定定位和粘性定位的区别
- 2.6 定位的层级
3. 布局
- 3.1 版心
- - 3.1.1 版心的概念
  - 3.1.2 创建版心的常见方法
  - 3.1.3 版心的考虑因素
- 3.2 常用类名
- - 3.2.1 布局容器
  - 3.2.2 导航和菜单
  - 3.2.3 头部和页脚
  - 3.2.4 内容区域
  - 3.2.5 组件
  - 3.2.6 辅助类
  - 3.2.7 响应式可见性
  - 3.2.8 元素样式
- 3.3 重置默认样式
- - 3.3.1 元素的默认样式
  - 3.3.2 如何重置默认样式

视频教程： 133_CSS_浮动_简介

1. 浮动（float）

1.1 简介

CSS浮动（float）是一种布局技术，允许元素在文档流中向左或向右移动，同时允许文本和内联元素环绕它。浮动最初被设计用来实现文本环绕图片的效果，但随着Web开发的发展，它被广泛用于整个页面的布局

1.2 元素浮动后的特点

视频教程：134_CSS_元素浮动后的特点

当一个元素被设置为浮动（使用 float 属性设置为 left、right 或 none 之外的值），它会表现出以下特点：

脱离文档流：浮动元素会脱离常规的文档流，这意味着它不再占据文档流中的空间，其他元素会视它为不存在
位置移动：浮动元素会尽量向指定方向（左或右）移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘
内容环绕：浮动元素周围的文本和内联元素会环绕它，形成类似报纸中图片周围环绕文字的效果
行内块化：即使是行内元素，一旦浮动，也会表现得像一个块级元素，可以设置宽度和高度

当一个元素被设置为浮动时，不会存在外边距塌陷问题，可以完美地设置四个方向的外边距

1.3 脱离文档流示例图

在这里插入图片描述

1.4 浮动产生的影响

布局原则：设置浮动的时候，要么兄弟元素全都浮动，要么全都不浮动

浮动在CSS布局中虽然非常有用，但它也会产生一些影响，这些影响可能是积极的也可能是消极的。以下是浮动产生的一些主要影响：

1.4.1 积极影响

布局控制：浮动允许开发者在页面上精确地控制元素的位置，这在早期的Web设计中尤其重要
文本环绕：浮动可以轻松实现文本环绕图片或其他元素的效果
多列布局：浮动可以用来创建多列布局，这在CSS Grid和Flexbox出现之前是常见的做法

1.4.2 消极影响

高度塌陷：浮动元素的父元素不会自动伸展以包含浮动元素，这可能导致父元素的高度塌陷
容器溢出：如果浮动元素的总宽度超过了其父容器的宽度，它们可能会溢出容器，导致布局混乱
内容重叠：浮动元素可能会覆盖其后的非浮动内容，除非使用适当的清除浮动技术
需要清除浮动：为了防止高度塌陷和其他布局问题，通常需要在浮动元素之后添加清除浮动的元素或使用CSS伪元素来清除浮动

1.5 解决浮动产生的影响

1.5.1 清除浮动（Clearfix）

为了解决高度塌陷问题，可以使用清除浮动技术。以下是一些常用的清除浮动的方法：

额外标签法：在浮动元素之后添加一个空的<div>标签，并给它设置clear: both;属性

css"><div class="clearfix"></div>

css">.clearfix {
  clear: both;
}

伪元素法：使用:after伪元素在浮动元素的父容器上添加一个清除浮动的块

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

1.5.2 创建新的块格式化上下文（BFC）

通过在父容器上设置某些CSS属性，可以创建一个新的块格式化上下文，这样浮动元素就会被包含在父容器内

overflow：设置overflow: auto;或overflow: hidden;

css">.container {
  overflow: hidden; /* 或者 auto */
}

2. 定位（position）

2.1 相对定位

2.1.1 如何设置相对定位

要设置相对定位，你需要对元素使用CSS的position属性，并将其值设置为relative。然后，你可以使用top、right、bottom和left属性来指定元素相对于其原始位置的偏移量

css">/* CSS样式 */
.element {
  position: relative; /* 设置相对定位 */
  top: 20px;       /* 向下移动20像素 */
  left: 30px;      /* 向右移动30像素 */
}

<!-- HTML结构 -->
<div class="element">这是一个相对定位的元素。</div>

2.1.2 相对定位的参考点

相对定位的参考点是元素在文档流中的原始位置，即如果没有应用position: relative;时的位置。这意味着当你使用top、right、bottom和left属性来移动元素时，它们是相对于元素的原始位置进行计算的

2.1.3 相对定位的特点

位置偏移：
- 元素可以相对于其正常位置进行上下左右移动
- 偏移属性（top、right、bottom、left）用来指定移动的具体距离
文档流：
- 相对定位的元素仍然占据其在文档流中的原始空间。即使元素被移动了，它原来的位置仍然保留，不会被其他元素占据（只有视觉效果上的变化）
- 相对定位不会改变元素在文档流中的位置，这意味着它不会影响其他元素的位置
层叠上下文：
- 相对定位不会创建一个新的层叠上下文，除非你为元素指定了z-index值
- 没有设置z-index的情况下，相对定位的元素仍然在原来的层叠上下文中，它的层叠顺序不会改变
显示层级：
- 设置了相对定位的元素会盖在普通元素之上
- 都设置了相对定位的两个元素，后写的元素会盖在先写的元素之上

2.2 绝对定位

视频教程：140_CSS_绝对定位

2.2.1 如何确定元素的包含块

一个元素的包含块就是离这个元素最近的块级祖先元素
对于没有祖先元素的元素，初始包含块通常是 viewport（视口）

2.2.2 如何设置绝对定位

要设置绝对定位，你需要对元素使用CSS的position属性，并将其值设置为absolute。然后，你可以使用top、right、bottom和left属性来指定元素相对于其包含块的位置

css">/* CSS样式 */
.parent {
  position: relative; /* 确保有一个相对定位的包含块 */
}
.element {
  position: absolute; /* 设置绝对定位 */
  top: 20px;       /* 距离包含块顶部20像素 */
  right: 30px;     /* 距离包含块右侧30像素 */
}

<!-- HTML结构 -->
<div class="parent">
  <div class="element">这是一个绝对定位的元素。</div>
</div>

2.2.3 绝对定位的参考点

绝对定位的参考点是最近的已定位祖先元素（即设置了position属性为relative、absolute或fixed的祖先元素）。如果没有已定位的祖先元素，那么参考点将是<html>元素，即初始包含块

2.2.4 绝对定位的特点

位置偏移：
- 元素的位置可以通过top、right、bottom、left属性相对于其包含块进行偏移
- 绝对定位的元素完全脱离了文档流，不再占据文档流中的空间
文档流：
- 绝对定位的元素会脱离文档流，这意味着它原来的位置不会被保留，其他元素也不会为其保留空间
- 绝对定位的元素可以覆盖文档流中的其他元素，也可以被其他元素覆盖
层叠上下文：
- 绝对定位的元素会创建一个新的层叠上下文
- z-index属性可以用来控制绝对定位元素的堆叠顺序，即使没有显式设置z-index，绝对定位的元素也会在文档流中的元素之上

2.3 固定定位

2.3.1 如何设置固定定位

要设置固定定位，你需要对元素使用CSS的position属性，并将其值设置为fixed。然后，你可以使用top、right、bottom和left属性来指定元素相对于视口（viewport）的位置

css">/* CSS样式 */
.element {
  position: fixed; /* 设置固定定位 */
  top: 0;         /* 距离视口顶部0像素 */
  right: 0;       /* 距离视口右侧0像素 */
}

2.3.2 固定定位的参考点

固定定位的参考点是视口（viewport），这意味着元素是相对于浏览器窗口进行定位的，而不是相对于文档流或任何其他元素。当页面滚动时，固定定位的元素会保持在相同的位置

2.3.3 固定定位的特点

位置偏移：
- 元素的位置是相对于视口进行偏移的，即使页面滚动，元素也会保持在视口中的相同位置
- top、right、bottom、left属性用于确定元素在视口中的具体位置
文档流：
- 固定定位的元素会脱离文档流，它原来的位置不会被保留，也不会影响其他元素的位置
- 由于固定定位的元素总是相对于视口定位，它不会随着页面内容的滚动而移动
层叠上下文：
- 固定定位的元素会创建一个新的层叠上下文
- z-index属性可以用来控制固定定位元素的堆叠顺序，即使没有显式设置z-index，固定定位的元素也会在文档流中的元素之上

2.3.4 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style>css">
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Microsoft YaHei", sans-serif;
      }

      /* 固定导航栏 */
      .main-nav {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background: rgba(255, 255, 255, 0.98);
          padding: 1rem 5%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
      }

      .nav-logo {
          width: 180px;
          transition: all 0.3s;
      }

      .nav-menu {
          display: flex;
          gap: 2.5rem;
      }

      .nav-menu a {
          text-decoration: none;
          color: #333;
          font-weight: 500;
          transition: color 0.3s;
      }

      /* 固定侧边联系栏 */
      .contact-sidebar {
          position: fixed;
          right: 2rem;
          top: 50%;
          transform: translateY(-50%);
          background: #fff;
          padding: 1.5rem;
          border-radius: 12px;
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
          z-index: 999;
      }

      /* 固定返回顶部按钮 */
      .back-to-top {
          position: fixed;
          bottom: 2rem;
          right: 2rem;
          background: #0066cc;
          color: white;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          opacity: 0.9;
          transition: all 0.3s;
      }

      /* 页面主要内容 */
      .hero-section {
          height: 100vh;
          background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
          padding-top: 6rem;
          display: flex;
          align-items: center;
      }

      .case-showcase {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
          padding: 4rem 5%;
      }

      .case-card {
          background: white;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s;
      }

      .case-card:hover {
          transform: translateY(-5px);
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
          .contact-sidebar {
              display: none;
          }

          .nav-menu {
              gap: 1.5rem;
          }
      }
  </style>
</head>
<body>
<!-- 固定导航栏 -->
<nav class="main-nav">
  <img src="logo.png" alt="天工智能科技" class="nav-logo">
  <div class="nav-menu">
    <a href="#home">首页</a>
    <a href="#products">产品中心</a>
    <a href="#solutions">行业解决方案</a>
    <a href="#cases">成功案例</a>
    <a href="#about">关于我们</a>
  </div>
</nav>

<!-- 固定侧边联系栏 -->
<div class="contact-sidebar">
  <h3>快速联系</h3>
  <p>400-800-1234</p>
  <p>sales@tiangongtech.com</p>
  <button>在线咨询</button>
</div>

<!-- 页面主要内容 -->
<section class="hero-section">
  <!-- 此处放置轮播图等复杂内容 -->
</section>

<section class="case-showcase">
  <div class="case-card">
    <h3>智能制造解决方案</h3>
    <p>为汽车制造企业实现生产流程全面数字化改造，生产效率提升40%</p>
  </div>
  <div class="case-card">
    <h3>智慧能源管理</h3>
    <p>帮助电力集团建立智能监测系统，年节约运维成本1200万元</p>
  </div>
  <div class="case-card">
    <h3>工业物联网平台</h3>
    <p>为装备制造企业搭建设备互联平台，设备利用率提升25%</p>
  </div>
</section>

<!-- 固定返回顶部按钮 -->
<div class="back-to-top">↑</div>

<script>
  // 滚动时导航栏阴影变化
  window.addEventListener('scroll', () => {
    const nav = document.querySelector('.main-nav');
    if (window.scrollY > 100) {
      nav.style.boxShadow = '0 4px 15px rgba(0,0,0,0.12)';
    } else {
      nav.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
    }
  });

  // 返回顶部功能
  document.querySelector('.back-to-top').addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>
</body>
</html>

2.4 粘性定位

2.4.1 如何设置粘性定位

要设置粘性定位，你需要对元素使用CSS的position属性，并将其值设置为sticky。然后，你可以使用top、right、bottom和left属性来指定元素在滚动到特定位置时粘附的位置

css">/* CSS样式 */
.sticky-element {
  position: sticky; /* 设置粘性定位 */
  top: 0;          /* 当元素滚动到视口顶部0像素的位置时粘附 */
}

2.4.2 粘性定位的参考点

粘性定位的参考点是最近的具有滚动机制的祖先元素（滚动容器）。如果祖先元素没有设置overflow属性或者设置了overflow: visible，那么粘性定位将相对于视口起作用

2.4.3 粘性定位的特点

位置偏移：
- 粘性定位的元素在滚动到指定位置之前，表现得就像position: static（静态定位）
- 当元素滚动到指定的top、right、bottom或left位置时，它会表现得像position: fixed（固定定位），即粘附在指定位置，但不会脱离文档流
文档流：
- 在粘性定位生效之前，元素保留在文档流中的位置
- 当粘性定位生效时，元素会相对于其最近的滚动祖先粘附，但它不会脱离文档流，这意味着它会保留其原始空间
层叠上下文：
- 粘性定位的元素不会创建一个新的层叠上下文，除非它已经是层叠上下文的一部分
- 当元素处于粘性状态时，它可能会覆盖其他元素，但它的z-index行为与普通文档流中的元素相同

2.4.4 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>粘性定位</title>
  <style>css">
      body {
          font-family: 'Arial', sans-serif;
          line-height: 1.6;
          margin: 0;
          padding: 0;
          background-color: #f9f9f9; /* Light grey background */
          color: #333; /* Dark text color */
      }

      .header {
          background-color: #4CAF50; /* Green header */
          color: #ffffff;
          text-align: center;
          padding: 1em 0;
      }

      .container {
          display: flex;
          max-width: 1200px;
          margin: 20px auto;
          padding: 20px;
          background-color: #ffffff;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .content {
          flex: 1;
          padding-right: 30px;
      }

      .sidebar {
          width: 200px;
          position: sticky;
          top: 20px;
          background-color: #e7e7e7; /* Light grey sidebar */
          padding: 20px;
          border-radius: 5px;
      }

      .sidebar ul {
          list-style: none;
          padding: 0;
      }

      .sidebar ul li {
          padding: 10px;
          background-color: #d4edda; /* Success light */
          margin-bottom: 5px;
          border: 1px solid #c3e6cb;
          border-radius: 3px;
      }

      .sidebar ul li a {
          text-decoration: none;
          color: #333;
      }

      .sidebar ul li a:hover {
          color: #007bff; /* Blue hover color */
      }

      .post {
          margin-bottom: 40px;
      }

      .post h2 {
          margin-bottom: 10px;
          color: #333; /* Darker heading color */
      }

      .post p {
          margin-bottom: 10px;
          color: #555; /* Slightly lighter text color */
      }

      pre {
          background-color: #f4f4f4; /* Code block background */
          padding: 10px;
          border-radius: 5px;
          overflow-x: auto;
      }

      code {
          color: #d63200; /* Orange code color */
      }

      .footer {
          text-align: center;
          padding: 1em 0;
          background-color: #4CAF50; /* Same as header */
          color: white;
          margin-top: 20px;
      }
  </style>
</head>
<body>
<div class="header">
  <h1>深入了解CSS中的粘性定位</h1>
</div>
<div class="container">
  <div class="content">
    <article class="post">
      <h1>如何使用粘性定位提升用户体验</h1>
      <aside class="sidebar">
        <h3>文章目录</h3>
        <ul>
          <li><a href="#introduction">简介</a></li>
          <li><a href="#sticky-position">粘性定位是什么</a></li>
          <li><a href="#usage">如何使用粘性定位</a></li>
          <li><a href="#browser-support">浏览器支持情况</a></li>
          <li><a href="#conclusion">总结</a></li>
        </ul>
      </aside>
      <section id="introduction">
        <h2>简介</h2>
        <p>粘性定位是一种CSS布局技术，可以让元素在页面滚动到特定位置时“粘”在屏幕上[ty-reference](1)。</p>
        <p>这种技术可以极大地改善用户的浏览体验，特别是在长页面中，如博客文章或产品详情页。</p>
      </section>
      <section id="sticky-position">
        <h2>粘性定位是什么</h2>
        <p>粘性定位（position:
          sticky）是一种结合了相对定位和固定定位的特性，元素在滚动到其指定位置之前表现为相对定位，之后则表现为固定定位[ty-reference](15)。</p>
        <p>例如，一个侧边栏可以在用户向下滚动时跟随屏幕，直到达到设定的阈值，然后保持固定位置。</p>
      </section>
      <section id="usage">
        <h2>如何使用粘性定位</h2>
        <p>
          要使用粘性定位，只需在CSS中设置position属性为sticky，并指定top、right、bottom或left属性中的一个[ty-reference](15)。</p>
        <p>例如：</p>
        <pre><code>.sticky-element {
  position: sticky;
  top: 0;
}</code></pre>
        <p>上述代码会使.sticky-element类下的元素在页面滚动至顶部时固定不动。</p>
      </section>
      <section id="browser-support">
        <h2>浏览器支持情况</h2>
        <p>
          粘性定位在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari和Edge[ty-reference](16)。然而，在一些旧版本的浏览器中可能需要额外的JavaScript补丁来实现类似的效果。</p>
      </section>
      <section id="conclusion">
        <h2>总结</h2>
        <p>
          粘性定位是一个强大的工具，可以用来改善用户的滚动体验，使导航元素或其他重要信息始终在视图中[ty-reference](15)。通过合理利用这一特性，开发者能够创建更加动态和用户友好的网页设计。</p>
      </section>
    </article>
  </div>
</div>
<div class="footer">
  <p>&copy; 2025 粘性定位学习网站 版权所有</p>
</div>
</body>
</html>

2.5 固定定位和粘性定位的区别

固定定位（position: fixed;）：

相对于视口定位：固定定位的元素总是相对于视口进行定位，即使页面滚动，元素也会保持在相同的位置
脱离文档流：固定定位的元素会脱离常规文档流，这意味着它不会占据文档中的空间，也不会对其他元素的位置产生影响
创建层叠上下文：固定定位的元素会创建一个新的层叠上下文，这可能会影响元素的层叠顺序
浏览器支持：固定定位在所有现代浏览器中都得到良好支持

粘性定位（position: sticky;）：

相对于滚动容器定位：粘性定位的元素在滚动到指定位置之前表现得像相对定位（position: relative;），当达到指定的top、right、bottom或left位置时，它会表现得像固定定位，但它是相对于最近的滚动祖先元素进行定位的
不脱离文档流：粘性定位的元素在滚动到指定位置之前会保留在文档流中的位置，并且在粘性定位生效时也不会脱离文档流
不创建层叠上下文：默认情况下，粘性定位的元素不会创建一个新的层叠上下文，除非它已经是层叠上下文的一部分
浏览器支持：粘性定位在大多数现代浏览器中得到支持，但在一些旧版浏览器中可能不受支持

2.6 定位的层级

在CSS中，定位的层级是由z-index属性控制的。z-index属性用于指定一个元素在垂直于屏幕的方向（即Z轴）上的堆叠顺序。具有较高z-index值的元素将覆盖具有较低z-index值的元素

定位类型：
- 相对定位（relative）：元素相对于其正常位置进行定位，但不脱离文档流
- 绝对定位（absolute）：元素脱离文档流，相对于最近的已定位祖先元素进行定位
- 固定定位（fixed）：元素脱离文档流，相对于浏览器窗口进行定位
- 粘性定位（sticky）：元素在达到某个位置前保持相对定位，达到后变为固定定位
z-index属性：
- z-index可以取正值、负值或0
- 默认情况下，所有元素的z-index为auto，相当于0
- z-index仅在定位元素上有效（即position为relative、absolute、fixed或sticky的元素）
堆叠上下文：
- 堆叠上下文是HTML元素的一个属性，决定了其子元素的堆叠顺序
- 创建堆叠上下文的条件包括：定位属性为非static、z-index不为auto、opacity小于1、transform不为none等
- 在同一个堆叠上下文中，z-index值高的元素会覆盖值低的元素
- 不同堆叠上下文之间的元素，堆叠顺序由各自堆叠上下文的根元素决定
注意事项：
- z-index只在同一父元素下的定位元素之间起作用
- 如果两个元素在同一堆叠上下文中，且z-index相同，则后出现在HTML代码中的元素将覆盖先出现的元素

3. 布局

3.1 版心

视频教程：145_CSS_布局_版心

3.1.1 版心的概念

在CSS布局中，“版心”（或称为"内容区域"、“容器”）通常指的是网页中主要内容的中心区域，这个区域通常包含网站的核心内容，并且在不同设备上保持一致的外观和布局。版心的设计对于创建响应式和一致性的用户体验至关重要

3.1.2 创建版心的常见方法

固定宽度版心

css">.container {
  width: 1200px; /* 或其他固定像素值 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
}

流式宽度版心

css">.container {
  max-width: 1200px; /* 最大宽度 */
  min-width: 320px; /* 最小宽度，适应小屏幕设备 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  box-sizing: border-box; /* 包含padding和border在内的宽度 */
}

使用CSS网格或Flexbox

css">.container {
  display: grid; /* 或flex */
  grid-template-columns: 1fr minmax(320px, 1200px) 1fr; /* 网格布局 */
  /* Flexbox布局 */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
}
.container > * {
  grid-column: 2; /* 将子元素放置在中心列 */
}

响应式版心：使用媒体查询来适应不同屏幕尺寸

css">.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

3.1.3 版心的考虑因素

边距（Margin）：通常使用margin: 0 auto;来使版心在视口中水平居中
内边距（Padding）：为版心添加内边距，以避免内容紧贴边缘，提高可读性
最大宽度和最小宽度：设置最大宽度以避免版心在宽屏设备上过于展开，设置最小宽度以适应小屏幕设备
盒模型：使用box-sizing: border-box;确保元素的padding和border不会增加其宽度
响应式设计：使用媒体查询来调整版心的尺寸和布局，以适应不同的屏幕尺寸和设备

3.2 常用类名

3.2.1 布局容器

类名	描述
`.container`	布局容器，用于固定宽度或最大宽度
`.row`	行布局容器
`.column`	列布局

3.2.2 导航和菜单

类名	描述
`.navbar`	导航栏
`.menu`	主菜单
`.submenu`	子菜单
`.topbar`	顶部导航条
`.breadcrumb`	面包屑导航
`.sidebar`	侧边栏菜单

3.2.3 头部和页脚

类名	描述
`.header`	页面头部区域
`.footer`	页面底部区域

3.2.4 内容区域

类名	描述
`.content`	主内容区域
`.main`	主要内容区域
`.article`	文章或帖子内容
`.section`	页面独立部分
`.widget`	小部件或插件区域

3.2.5 组件

类名	描述
`.card`	卡片式布局组件
`.thumbnail`	缩略图组件
`.carousel`	轮播图组件
`.modal`	模态框或弹出窗口
`.dropdown`	下拉菜单
`.accordion`	手风琴组件

3.2.6 辅助类

类名	描述
`.clearfix`	清除浮动的辅助类
`.pull-left`	元素左浮动
`.pull-right`	元素右浮动

3.2.7 响应式可见性

类名	描述
`.visible-xs`	在超小屏幕上可见
`.visible-sm`	在小屏幕上可见
`.visible-md`	在中等屏幕上可见
`.visible-lg`	在大屏幕上可见
`.hidden-xs`	在超小屏幕上隐藏
`.hidden-sm`	在小屏幕上隐藏
`.hidden-md`	在中等屏幕上隐藏
`.hidden-lg`	在大屏幕上隐藏

3.2.8 元素样式

类名	描述
`.btn`	按钮
`.alert`	警告或通知消息
`.pagination`	分页导航
`.badge`	徽章或标签
`.progress`	进度条

3.3 重置默认样式

视频教程：147_CSS_布局_重置默认样式

3.3.1 元素的默认样式

元素的默认样式是由浏览器提供的，这些样式通常被称为用户代理样式（User Agent Stylesheet）。不同的浏览器可能会有不同的默认样式，但许多样式是通用的。以下是一些常见HTML元素的默认样式：

块级元素（如<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等）通常具有以下默认样式：

margin：某些元素（如<p>和<h1>-<h6>）具有默认的外边距
padding：某些元素（如<ul>和<li>）具有默认的内边距
display：设置为block

内联元素（如<span>、<a>、<strong>、<em>等）通常具有以下默认样式：

display：设置为inline
margin和padding：通常较小或不存在

表格元素（如<table>、<tr>、<td>等）通常具有以下默认样式：

border-collapse：默认为separate，导致边框之间有间隔
border-spacing：默认为2px
vertical-align：<td>元素默认为middle

表单元素（如<input>、<button>、<select>等）通常具有以下默认样式：

font-family：继承自父元素
font-size：通常较小
border：默认有边框样式

3.3.2 如何重置默认样式

为了确保跨浏览器的一致性，开发者通常会重置或标准化元素的默认样式。以下是几种方法：

使用CSS Reset：
- 全局重置：将所有元素的margin、padding、border等设置为0，并重置其他样式属性
- 更温和的Reset：某些开发者倾向于使用更温和的reset方法，只重置那些最有可能引起问题的样式
使用Normalize.css：
- Normalize.css是一个现代的、CSS reset的替代方案，它保留了有用的默认样式而不是完全重置它们
- 它修复了浏览器的bug和不一致性，而不是完全去掉默认样式
自定义样式表：
- 开发者可以创建自己的样式表，只针对特定元素和问题进行样式重置

以下是重置某些元素默认样式的简单示例：

css">/* 重置块级元素的外边距和内边距 */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, form, dl, dd {
  margin: 0;
  padding: 0;
}
/* 重置表格元素的边框间隔和边框折叠 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* 重置表单元素的样式 */
input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* 重置按钮元素的样式 */
button {
  overflow: visible;
  border: none;
  background: none;
  cursor: pointer;
}
/* 重置列表元素的样式 */
ul, ol {
  list-style: none;
}

通过重置元素的默认样式，开发者可以确保在不同的浏览器中，他们的网站或应用看起来是一致的，并且可以更精确地控制布局和设计