大剑师兰特的GIS世界

CSS常用示例100+ 记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。因为常用所以记录、展示、分享，希望能给您带来帮助。

css实战中，怎么样让对联文字（岁辞龙尾春光好，山舞蛇姿景色新）从下到上滚动出来呢？这里利用keyframes的动画帧方式，显示不同的高度，显示不同的文字。

CSS 中有几个属性和特性可以触发GPU（图形处理器）的硬件加速，从而提高渲染性能，尤其是对于动画和视觉效果。以下是常见的一些CSS属性和技巧，它们会促使浏览器使用GPU来渲染

Sass 和 SCSS 是 CSS 预处理器的两种语法形式，它们都由 Sass 核心团队开发和维护，旨在提供更强大的功能和更灵活的工作流程，从而让 CSS 的编写变得更加高效和可维护。

CSS中用于控制表格(`table`)的样式属性众多，它们帮助开发者调整表格的外观与布局。下面是一些关键的CSS属性及其示例代码和注意事项

CSS圆角主要通过`border-radius`属性来实现，它可以让你轻松地为元素的边角添加弧度，使界面看起来更加友好和现代化。以下是一些关于`border-radius`的使用场景、示例代码及注意事项的详细介绍

CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结

在CSS中，你可以通过`overflow`属性来控制元素内容溢出时是否显示滚动条，以及如何显示滚动条。同时，对于Webkit内核的浏览器（如Chrome和Safari），还可以定制滚动条的样式。以下是一些关于滚动条设置的详细说明及示例代码。

CSS列表样式主要用于定制无序列表(``)和有序列表(``)的外观，包括列表项前的标记（如圆点、数字等）的样式。以下是一些关键的CSS属性和它们的用途

CSS属性选择器允许你根据元素的属性及其值来选择元素，这对于精确地定位和样式化文档中的元素非常有用。下面是一些常见的CSS属性选择器的详解及示例代码

CSS3对背景属性进行了扩展，提供了更强大的背景处理能力，包括但不限于多重背景、背景尺寸、背景渐变等。

CSS的`overflow`属性用来管理元素内部内容溢出容器时的显示方式。以下是`overflow`属性的主要值及其示例代码

CSS的`display`属性是一个核心属性，用于控制元素如何在页面布局中显示，包括其盒模型的行为。以下是`display`属性的一些常见值及其示例代码

CSS内联元素（Inline elements）也称为行内元素，是文档流中的一种基本类型，内联元素主要用于处理文本内容的样式和简单排版，是实现网页文本丰富性和交互性的基础。

CSS块状元素是指在页面布局中自动换行显示，能够设置特定宽度和高度，围绕内容撑开，可包含内联元素和其他块状元素的HTML元素，如**`, , `**等，常用于构建网页结构和布局。

请注意，`-webkit-line-clamp` 属性是非标准的，但被广泛用于WebKit浏览器中以实现多行文本的溢出隐藏。对于更好的跨浏览器兼容性，可能需要考虑使用JavaScript或者CSS的其他技巧

CSS伪类和伪元素是CSS选择器的特殊扩展，用于对文档中某些不可直接通过常规选择器访问的特定状态或结构进行样式化。以下是对CSS伪类与伪元素的详细解释，以及相应的代码示例

CSS变形（Transform）属性允许您对元素进行复杂的2D或3D变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。

CSS滤镜（Filter）允许开发者在浏览器端对元素的渲染结果进行实时图像处理，添加各种视觉效果，如模糊、锐化、颜色调整、阴影等。CSS滤镜可以应用于图片、背景图、视频等视觉内容，甚至可以直接作用于非替换元素（如`div`、`span`等）。

CSS 多列布局是一种模仿报纸或杂志排版风格的技术，它允许文本内容或其他流式内容（如列表、段落等）自动分布在多列之中，从而提升阅读体验和页面设计的多样性。这种布局主要依赖于CSS3的`columns`属性及其相关的子属性。

1. 盒模型与布局属性2. 文本样式属性3. 背景与渐变4. 列表与生成内容5. 伪类与伪元素6. 其他常见属性7. 容器与定位8. 多列布局9. CSS Grid布局补充10. Flexbox布局补充11. 媒体查询与响应式设计12. 用户界面样式13. 弹性盒模型14. 进阶选择器与组合器15. 动画与关键帧

CSS的`@keyframes`规则用于定义CSS动画的关键帧序列，从而实现元素从一种样式过渡到另一种样式的变化过程。通过设置关键帧，开发者可以精细控制动画每一帧的样式，创建流畅的动画效果。

CSS 渐变是一种强大的设计工具，允许开发人员在网页元素上创建平滑的颜色过渡效果，从而增强视觉体验，减少对外部图像资源的依赖，并提高性能。CSS 渐变主要分为三种类型：线性渐变（Linear Gradients）、径向渐变（Radial Gradients）和 锥形渐变（Conic Gradients）。

CSS阴影主要分为两种类型：文本阴影（`text-shadow`）和盒子阴影（`box-shadow`）。

CSS的`border`属性用于设置元素的边框样式、宽度和颜色。

CSS Grid布局是一种二维布局系统，它允许开发者在网页中创建具有复杂网格结构的布局，可以精确控制每一行和每一列的大小、对齐以及项目的放置位置。Grid布局提供了极其灵活的方式来设计和调整布局，特别适合于网页设计中需要精细划分区块和复杂交互布局的需求。

CSS Flexible Box Module（简称Flexbox）是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直）。它提供了对项目的对齐、方向、排序、尺寸调整等方面的强大控制。

CSS浮动布局（Float Layout）是早期Web布局中常用的一种方法，主要用于创建多列布局，尤其是在实现图文混排时特别有用。浮动会使元素脱离正常的文档流，将其移动到一边，同时允许周围的文本内容环绕在其周围

媒体查询（Media Queries）是CSS3引入的一项功能，允许内容呈现针对不同的设备环境和屏幕尺寸做出相应的响应。通过媒体查询，开发者可以根据设备的特性（如视口宽度、高度、设备像素比、色彩能力等）应用不同的CSS样式。

- `static` 不支持任何偏移属性，元素直接按照HTML的顺序和布局规则排列。- `relative` 支持偏移，但不脱离文档流，其他元素感知不到其偏移后的位置。- `absolute` 脱离文档流，可以自由移动至任意位置，受最近非 `static` 定位祖先约束。- `fixed` 脱离文档流且不受滚动影响，始终在视口的某个位置固定显示。- `sticky` 兼具文档流内的自然流动和滚动后的固定定位，在满足条件时行为类似于`fixed`定位。

CSS文本属性主要用于控制网页文本的样式，包括字体、大小、颜色、间距、对齐方式、装饰线、换行、缩进等。以下是一些常见的CSS文本属性及其示例代码

link 和 @import 的区别体现在它们的位置、加载方式、兼容性和功能等方面。但它们之间存在着一些关键区别

伪类**是基于元素的状态或位置来选择元素并改变其样式。- **伪元素**则是在元素内部创建新的逻辑节点，并允许为这些虚构的节点添加样式或内容。

物理像素（Physical Pixels）、逻辑像素（Logical Pixels）和像素密度（Pixel Density）是屏幕显示相关的三个关键概念

在CSS中直接设置`border-width`为0.5px通常不会得到理想中的0.5个物理像素宽度的线条，尤其在高DPI屏幕下，由于浏览器会对小于1px的数值进行四舍五入处理，所以直接写0.5px可能会被渲染成1px的线条。

`position: absolute` 的元素会相对于最近的已定位（非 `static` 定位）祖先元素进行定位。如果这样的祖先元素不存在，则相对于初始包含块（通常是 `` 元素）定位。 - `position: fixed` 的元素则是相对于浏览器视口（viewport）进行定位，无论页面怎么滚动，它的位置始终不变。

CSS Sprites 是一种优化网页加载速度的技术，通过将多个小图标或背景图像合并到一张单独的大图中，然后通过CSS的`background-image`属性引用这张大图，并结合`background-position`属性来精准地定位显示其中每一个小图标的背景位置。

CSS性能优化涵盖了从文件结构、编码习惯到浏览器渲染机制等多个层面的考虑，目标是使CSS文件更小、加载更快、渲染更高效。

CSS3 引入了 `box-sizing` 属性，可以切换这两种盒模型的行为。默认情况下，大多数元素遵循标准盒模型，但可通过设置 `box-sizing: border-box` 改为怪异盒模型。这对于解决跨浏览器的盒模型兼容问题非常有用。