当前位置：首页 > article >正文

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

article 2026/4/10 21:51:34

文章目录

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;属性

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

.clearfix {clear: both;
}

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

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

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

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

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

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

2. 定位（position）

2.1 相对定位

2.1.1 如何设置相对定位

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

/* 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样式 */
.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样式 */
.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>* {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样式 */
.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>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 创建版心的常见方法

固定宽度版心

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

流式宽度版心

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

使用CSS网格或Flexbox

.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; /* 将子元素放置在中心列 */
}

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

.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和不一致性，而不是完全去掉默认样式
自定义样式表：
- 开发者可以创建自己的样式表，只针对特定元素和问题进行样式重置

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

/* 重置块级元素的外边距和内边距 */
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;
}

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