CSS Grid也就是（网格布局）是二维布局系统，可同时控制行和列，轻松实现复杂页面布局（比 Flex 更强大，Flex 是一维），是现代网页布局的首选。 一、分类 容器（Grid Container）：设置 disp...

核心属性column-count：规定列数比如 column-count: 3; 就是把内容分成3列，简单好记，适合固定列数的场景（比如文章分栏）column-width：规定每列的最小宽度比如 column-width: 200px; 浏览器...

一、四大定位属性static 静态定位默认定位，无偏移，top/left 无效relative 相对定位位置相对于自身原来位置偏移不脱离标准流，原位置保留absolute 绝对定位，脱离标准流，不占位置，找最近已定...

一、定位布局核心定义定位布局是指通过特定的技术手段，将页面中的元素（文本、图片、按钮、容器等）按照设计需求，精准放置在指定位置，同时保证布局的稳定性、响应式适配性和用户体验合理性。...

一、核心前提：弹性盒子的基本结构要定义主轴方向，首先需明确弹性盒子的两大核心角色：弹性容器（Flex Container）：给父元素设置 display: flex; 或 display: inline-flex; 后，该元素即为弹...

弹性盒子（Flexible Box，简称 Flexbox）是 CSS引入的一种一维布局模型，他专注于解决元素在单个维度（行或列）上的排列、对齐和空间分配问题，相比传统的浮动、定位布局，更简洁、灵活且易于维...

1. 布局核心原则语义化优先：用HTML5语义标签定义结构，替代无意义的div堆砌，提升代码可读性、SEO效果和无障碍访问体验。响应式适配：网页能自动适应不同设备屏幕尺寸和分辨率，核心是“一次开...

CSS 精灵图（CSS Sprite）是一种网页图片优化技术，将网页中多个小图标、小背景图合并到一张大图中，通过 CSS 的background-position属性精准定位显示大图中的某一个小图标，减少网页的 HTTP 请...

字体图标是一种将图标以字体形式嵌入网页的技术，允许开发者像使用文字一样通过CSS控制图标的样式（比如颜色，大小，阴影等）通常使用在导航菜单图标，按钮操作图标，结合动画效果优势也很明显...

背景渐变在css中，可以通过linear-gradient线性渐变或者radial-gradient倾向渐变为元素添加渐变背景，这样的渐变操作可以让盒子更加美观，更吸引用户线性渐变：方向可以是方位名词，也可以是deg...