-
<p>使用calc()可精确计算CSS盒模型尺寸，如设置总宽300px的元素时，通过width:calc(300px-20px2-2px2)减去padding和border，确保内容区宽度正确；在响应式布局中可用width:calc(100%-40px)实现自适应；但推荐全局设置box-sizing:border-box，使width包含padding和border，简化计算并提升维护性。</p>
-
提升CSS维护性需合理使用工具与规范流程。1.用Sass等预处理器通过变量、mixin和模块化减少重复代码；2.采用BEM命名规范增强类名可读性，明确组件结构；3.借助Prettier、Stylelint和Husky+lint-staged实现代码格式统一与提交前检查；4.利用CSS自定义属性支持运行时主题切换与动态控制。工具结合团队约定才能确保长期可维护性。
-
border-width是实现多边框效果的基础，需结合box-shadow、outline或伪元素技术；通过设置border-width控制内层边框粗细，利用box-shadow扩展值模拟外层边框，或用outline添加非占位外框，亦可通过伪元素绝对定位实现多层独立边框，每层border-width可单独调整，从而精准构建复杂边框层次。
-
使用伪类clearfix或overflow属性可解决浮动导致的父容器背景显示异常，推荐通过正确清除浮动使父容器包含子元素，或将背景色设于外层容器；更优方案是采用Flex或Grid布局，避免浮动带来的高度塌陷问题，提升背景样式控制的稳定性和布局语义化。
-
观察者模式与发布-订阅模式本质区别在于耦合度与通信方式：前者是主体与观察者直接同步调用，后者通过事件总线异步解耦通信。
-
可通过CSS的border属性设置虚线边框，包括内联style、外部CSS类、单边控制、border-image自定义图案及box-shadow模拟等五种方法实现。
-
内联样式权重（1000）高于外部样式，但可通过!important、JavaScript移除或避免使用内联样式来覆盖；外部样式按引入顺序后载者优先；调试时用开发者工具查看被划掉的规则及来源。
-
用letter-spacing可直接调节文字间距，中文推荐0.02em～0.06em，标题可增至0.08em，品牌名可用1px；中英文混排宜用em单位并单独优化英文字体，慎用负值，需配合kerning与line-height综合调整。
-
本文讲解如何使用JavaScript对用户数据按ID进行搜索过滤，并确保每个匹配结果渲染为独立的<div>容器，避免内容堆叠在同一元素中；同时提供简洁、可维护的函数式写法与关键注意事项。
-
HTML5代码需严格遵循五项规范：一、首行声明<!DOCTYPEhtml>；二、head中添加<metacharset="UTF-8">；三、合理使用header、nav、main等语义标签；四、正确嵌套并闭合标签；五、为img、video、canvas提供alt属性或回退内容。
-
@import用于引入外部CSS文件，需置于样式表最前，支持相对或绝对路径；在CSS或style标签中可导入模块化样式，但加载时机晚于link，影响性能，且不支持JS动态控制；现代项目推荐使用link标签或构建工具替代@import以提升加载效率和维护性。
-
在ChromeDevTools中查看盒模型数值需打开Layout面板（旧版称BoxModel），其以彩色区块可视化content、padding、border、margin；若未显示，需点击右上角三点启用“Showlayoutview”，或在Computed面板手动搜索相关属性。
-
font-size在mediaquery中失效的常见原因包括：父容器字体设置与em/rem继承冲突、viewportmeta标签缺失、单位混用、line-height和letter-spacing未同步响应；推荐统一用rem并在:root上调整，或使用clamp()实现平滑缩放。
-
本文详解如何使用纯HTML、CSS和JavaScript构建功能完整的响应式图片轮播器，重点修复常见逻辑错误（如索引越界、状态未重置），并提供可直接运行的完整代码示例。
-
纯CSS无法实现真正瀑布流，因column-count仅机械折行且不支持按最短列分配元素；display:masonry受限于浏览器兼容性与布局约束；需JS维护列高数组并动态定位元素。
