Shabbt的博客

HTML5 与 CSS3 是现代前端核心升级技术，主要支持 IE9 + 浏览器，推动网页语义化与动态化发展。HTML5 新增<header>等语义化标签优化结构，用<video>/<audio>实现原生音视频播放，拓展表单类型与属性提升交互。CSS3 新增属性、结构伪类等选择器，通过box-sizing优化盒子模型，filter与calc()增强视觉效果；2D 转换实现元素位移、旋转、缩放，transition达成平滑过渡。二者互补，简化开发并提升界面体验。

本文梳理 CSS 实用技巧，含字体图标、界面样式、元素对齐及文本处理等关键内容。字体图标以轻量、灵活优势替代精灵图，可从专业平台下载引入，支持追加。界面样式优化含 cursor 调鼠标样式、outline 去表单轮廓、resize 禁文本域拖拽。vertical-align 解决行内元素对齐问题，能消除图片底部缝隙。文本溢出处理中，单行需三大属性配合，多行依赖 WebKit 特性。另有纯 CSS 三角制作技巧，这些内容直接影响界面精致度与实用性。

CSS Grid（网格布局）是 CSS3 核心二维布局模型，专为同时控制行与列的复杂布局而生，堪称现代二维布局的终极解决方案。其以 “容器 - 项目” 为核心，父容器设display: grid开启布局后，通过grid-template-rows与grid-template-columns划分行列轨道，gap设间距。项目可借grid-row/grid-column定位置、grid-area关联命名区域，容器则通过place-content等控制对齐。

CSS Flexbox（弹性盒布局）是 CSS3 核心一维布局模型，专为解决容器内元素空间分配与对齐问题而生，是现代响应式布局的首选方案。其以 “容器 - 项目” 为结构，父容器设display: flex即开启弹性布局，子元素自动成为弹性项目。容器通过flex-direction定排列方向、justify-content与align-items控主轴和交叉轴对齐；项目可借order调顺序、flex控空间占比。相比传统布局，它无需处理脱标问题，轻松实现居中、自适应等效果，适配导航栏、表单等多场景。

CSS 定位是传统网页布局三大核心技术之一，核心价值在于实现元素精准定位与层级控制，解决浮动和标准流难以满足的灵活布局需求。其由 “定位模式 + 边偏移” 构成，定位模式通过position属性设置，含静态、相对、绝对、固定、粘性五种类型，边偏移则通过 top、bottom、left、right 确定元素具体位置。虽现代布局技术兴起，但定位在弹窗、固定导航等场景中仍不可替代，是前端布局的核心技能。

CSS 浮动是传统网页布局的核心技术之一，旨在解决标准流中块级元素无法横向排列的局限。其通过float属性使元素脱离标准流，沿容器边缘浮动，具有脱标、横向排列且顶部对齐、具备行内块元素特性等核心特点。实际开发中，浮动常与标准流父容器搭配使用，以约束布局位置，但易引发父容器高度塌陷问题。对此，可通过额外标签法、父级 overflow 属性、:after 伪元素法及双伪元素法等清除浮动，其中伪元素法因结构清晰成为主流。

CSS 盒子模型是网页布局的基石，包含 CSS2 基础框架、CSS3 扩展特性及盒子大小计算模式三大核心。CSS2 定义盒子由外边距、边框、内边距和内容区四层构成，通过边框三要素（宽度、样式、颜色）、内外边距简写规则调控布局，需解决垂直外边距合并与塌陷问题，块级盒子水平居中需固定宽高且左右外边距设为 auto。盒子大小由 box-sizing 控制：默认 content-box 宽高仅含内容区，推荐的 border-box 则包含内边距与边框。CSS3 新增特性仅优化视觉表现不影响布局，需结合基础合理

CSS 层叠性、继承性、优先级是样式渲染关键规则。层叠性解决样式冲突，同选择器下冲突样式遵 “就近原则”，无冲突样式均生效。继承性指子元素沿用父元素文字相关样式（如字体、颜色），行高无单位时按子元素字号算倍数，盒子模型等样式不继承。优先级由选择器权重决定，排序为 “行内样式 > ID > 类 / 伪类 > 元素 > 继承 /*”，权重叠加不进位，继承权重为 0。三者协同，优先级优先于层叠性，继承性权重最低，共同决定元素最终样式。

本文包含两大核心内容：一是 CSS 元素显示模式，详细分类并解析块元素（独占一行、可控宽高、可嵌套，如 div）、行内元素（同行排列、不可控宽高、仅容文本 / 行内元素，如 span）、行内块元素（兼具两者特性，如 img）的特性与注意事项，同时说明通过display属性实现三者间转换的方法；二是 Emmet 语法，介绍其快速生成 HTML 结构（如批量标签、嵌套标签、带属性 / 内容标签）与 CSS 样式（如属性缩写补全）的规则，助力提升前端开发效率。

本文解析 CSS 复合选择器，其基于基础选择器组合而成，可精准高效选择元素。文中详解四类常用复合选择器：后代选择器（空格连接，选所有后代）、子选择器（> 连接，选直接子元素）、并集选择器（逗号连接，集体声明样式），以及伪类选择器（含按 LVHA 顺序的链接伪类、选聚焦表单元素的:focus 伪类），并对比各选择器特征与场景，助力掌握 CSS 样式精准控制。

本文围绕 CSS 背景属性展开，先介绍其核心功能（设置背景颜色、图片等美化元素），再详解 7 类核心属性（背景颜色、图片、平铺、位置、固定、复合写法、颜色半透明）的语法、取值与规则，结合实例说明属性应用；还整理背景属性总结表，提及背景显示范围、图片路径等注意事项，助力掌握元素背景样式的灵活控制。

本文梳理 CSS 基础核心知识，先介绍 CSS 语法规范（选择器 + 声明块结构）与代码风格（展开型格式、小写、空格规则）；再详解四类基础选择器（标签、类、id、通配符）的语法、作用及场景；接着阐述字体属性（字体系列、大小等，含复合属性简写）与文本属性（颜色、对齐等）的用法；最后说明三种 CSS 引入方式（内部、行内、外部，重点推荐外部样式表）的优缺点与适用场景，