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

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

news 来源：原创 2025/9/18 21:45:05

文章目录

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;
}

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

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&…...

编程日记 2025/9/18 21:45:05

uniapp中引入Vant Weapp的保姆级教学（包含错误处理）

废话不多说，直接上方法，网上的教学好多都是错误的 1.安装vant weapp 在Hbuilder的终端，输入以下代码 npm install vant/weapp -S --production 2.新建wxcomponents文件夹在项目的跟目录新建一个“wxcomponents’文件夹，与app.…...

编程日记 2025/9/15 10:57:31

Datawhale Ollama教程笔记5

Dify 接入 Ollama 部署的本地模型 Dify 支持接入 Ollama 部署的大型语言模型推理和 embedding 能力。快速接入下载 Ollama 访问 Ollama 安装与配置，查看 Ollama 本地部署教程。运行 Ollama 并与 Llama 聊天 ollama run llama3.1Copy to clipboardErrorCopied …...

编程日记 2025/9/15 10:57:29

STL —— 洛谷字符串（string库）入门题（蓝桥杯题目训练）（二）

目录一、B2121 最长最短单词 - 洛谷算法代码： 代码分析变量定义输入处理单词长度计算更新最长和最短单词的长度输出最长单词输出最短单词评测记录：编辑二、B2122 单词翻转 - 洛谷算法代码： 代码分析引入头文件和定…...

编程日记 2025/9/15 9:47:41

P1055 [NOIP 2008 普及组] ISBN 号码(java)【AC代码】

每一本正式出版的图书都有一个 ISBN 号码与之对应，ISBN 码包括 9 位数字、1 位识别码和 3 位分隔符，其规定格式如 x-xxx-xxxxx-x，其中符号 - 就是分隔符（键盘上的减号），最后一位是识别码，例如 0…...

编程日记 2025/9/15 10:57:24

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？

JavaScript如何创建一个对象？对象字面量和构造函数创建对象有什么区别？ JavaScript 创建对象的方式在 JavaScript 中，有多种方式可以创建对象，这里主要介绍对象字面量和构造函数这两种常见的方式。 1. 对象字面量对象字面量…...

编程日记 2025/9/15 10:57:22

【量化科普】Sharpe Ratio，夏普比率

【量化科普】Sharpe Ratio，夏普比率 🚀🚀🚀量化软件开通🚀🚀🚀 🚀🚀🚀量化实战教程🚀🚀🚀 在量化投资领域，…...

编程日记 2025/9/15 10:57:20

知识蒸馏知识点

1基于kl散度计算，学生模型需要用log_softmax处理 2 为了避免温度对梯度的影响，loss*T**2 操作目的教师 / 学生输出除以软化概率分布，暴露类别间关系损失乘以抵消温度对梯度的缩放，维持梯度量级稳定，确保训练收敛性 import torch import torch.nn.functional as F# 原…...

编程日记 2025/9/15 10:57:18

Springboot + Ollama + IDEA + DeepSeek 搭建本地deepseek简单调用示例

1. 版本说明 springboot 版本 3.3.8 Java 版本 17 spring-ai 版本 1.0.0-M5 deepseek 模型 deepseek-r1:7b 需要注意一下Ollama的使用版本： 2. springboot项目搭建可以集成在自己的项目里，也可以到 spring.io 生成一个项目生成的话，如下…...

编程日记 2025/9/15 10:57:16

【MySQL】MySQL表的增删改查（进阶）

1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...

编程日记 2025/9/15 10:57:14

装修流程图：装修前准备 → 设计阶段 → 施工阶段 → 安装阶段 → 收尾阶段 → 入住

文章目录引言I 毛坯房装修的全流程**1. 装修前准备****1.1 确定装修预算****1.2 选择装修方式****1.3 选择装修公司****1.4 办理装修手续****2. 设计阶段****2.1 量房****2.2 设计方案****2.3 确认方案****3. 施工阶段****3.1 主体拆改****3.2 水电改造****3.3 防水工程****3.…...

编程日记 2025/9/15 10:57:13

JavaScript系列（79）--Web Worker 高级应用

Web Worker 高级应用 🔄 Web Worker 为JavaScript提供了真正的多线程能力，让我们能够在后台线程中执行复杂的计算而不阻塞主线程。今天让我们深入探讨Web Worker的高级应用。 Web Worker 概述 🌟 💡 小知识：Web Work…...

编程日记 2025/9/15 8:23:13

人工智能之自动驾驶技术体系

自动驾驶技术体系自动驾驶技术是人工智能在交通领域的重要应用，旨在通过计算机视觉、传感器融合、路径规划等技术实现车辆的自主驾驶。自动驾驶不仅能够提高交通效率，还能减少交通事故和环境污染。本文将深入探讨自动驾驶的技术体系，包括感…...

编程日记 2025/9/15 8:23:11

该如何搭建高效的跨境网络专线？

在如今这个全球化的商业环境中，跨境网络专线成为了企业与个人实现高效、安全跨国通信的重要工具。大家好，在接下来的内容中，我将深入为您探讨跨境网络专线的概念、特点以及搭建流程，帮助您更好地理解和利用这一技术。一、什么是…...

编程日记 2025/9/15 8:23:08

网络运维学习笔记 017HCIA-Datacom综合实验01

文章目录综合实验1实验需求总部特性分支8分支9 配置一、基本配置（IP二层VLAN链路聚合）ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

编程日记 2025/9/15 8:23:06

Redis数据结构-String字符串

1.String字符串字符串类型是Redis中最基础的数据结构，关于数据结构与要特别注意的是：首先Redis中所有的键的类型都是字符串类型，而且其他集中数据结构也都是在字符串类似基础上进行构建，例如列表和集合的元素类型是字符串类型&a…...

编程日记 2025/9/15 8:23:03

个人简历html网页模板，科技感炫酷html简历模板

炫酷动效登录页引言在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效…...

编程日记 2025/9/14 10:14:43

【Python爬虫(39)】掌控全局：分布式爬虫的任务管理与监控之道

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/9/15 8:22:57

输入框元素覆盖冲突

后端响应中的 "trainingKbGroupName": "基础死型" 通过searchForm2.initFormData(rowData[0]);操作会把基础死型四个字填充到<div class"col-sm-5 form-group"> <label class"col-sm-3 control-label">知识点分组名称<…...

编程日记 2025/9/15 8:22:52

R语言学习笔记——确定指标权重：层次分析法/熵权法/CRITIC方法

本文介绍使用R语言确定指标权重的方法，包括：层次分析法、熵权法和CRITIC方法，内容包含了逆向指标正向化处理。 1、层次分析法 #######层次分析法###### ###几何平均法求权重 options(digits 2) library(tidyverse)macro <- tibble(x1c(…...

编程日记 2025/9/15 8:22:50

前端面试之Box盒子布局：核心知识与实战解析

目录引言：布局能力决定前端高度一、盒模型基础：看得见的像素战争 1. 标准盒模型 vs IE盒模型 2. 核心组成公式 3. 视觉格式化模型二、传统布局三剑客 1. 浮动布局（Float Layout） 2. 定位布局（Position Layou…...

编程日记 2025/9/15 8:22:47

前端VUE+后端uwsgi 环境搭建

1整体架构请求流程the web clinet--the web server->the socket->uwsgi--django 第一级的nginx并不是必须的，uwsgi完全可以完成整个的和浏览器交互的流程；在nginx上加上安全性或其他的限制，可以达到保护程序的作用；uWSGI本…...

编程日记 2025/9/15 8:22:44

保姆级！本地部署DeepSeek-R1大模型安装Ollama Api 后，Postman本地调用 deepseek

要在Postman中访问Ollama API并调用DeepSeek模型，你需要遵循以下步骤。首先，确保你有一个有效的Ollama服务器实例运行中，并且DeepSeek模型已经被加载。可以参考我的这篇博客保姆级！使用Ollama本地部署DeepSeek-R1大模型并java…...

编程日记 2025/9/15 10:57:11

【python】pip命令合集

文章目录 1. 包安装与卸载2. 依赖管理与文件操作3. 包下载与构建4. 配置与缓存管理5. 高级调试与日志6. 虚拟环境集成7. 哈希验证与安全8. 实验性功能（可能不稳定）9. 其他实用命令参数大全（全局常用参数）示例场景 conda: 【python…...

编程日记 2025/9/15 10:57:09

【鸿蒙开发】第四十章 Form Kit（卡片开发服务）

目录 1 概述 1.1 卡片使用场景 1.2 服务卡片架构 1.3 亮点/特征 1.4 开发模式 1.5 与相关Kit的关系 1.6 约束限制 2 ArkTS卡片运行机制 2.1 实现原理 2.2 ArkTS卡片的优势 2.3 ArkTS卡片的约束 3 ArkTS卡片相关模块 4 ArkTS卡片开发指导 4.1 创建一个ArkTS卡片 …...

编程日记 2025/9/15 10:57:07

汽车自动驾驶辅助L2++是什么？

自动驾驶辅助级别有哪些？ 依照SAE（SAE International，Society of Automotive Engineers国际自动机工程师学会）的标准，大致划分为6级（L0-L5）： L0人工驾驶：即没有驾驶辅助…...

编程日记 2025/9/15 10:57:06

package com.test.main.b2b;import org.apache.commons.codec.binary.Base64;import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.util.Arrays;/*** author * version 1.0* description: 解谜微信小…...

编程日记 2025/9/15 9:47:46