-
合理组织多个CSS文件可提升项目可维护性与性能。通过link标签在head中按顺序引入reset.css、layout.css、components.css、theme.css等，遵循层叠规则；按功能拆分文件便于协作；关键样式优先加载，非关键样式用media属性延迟；生产环境合并压缩文件并添加版本哈希，兼顾开发效率与加载速度。
-
多入口配置中entry必须为对象形式，如{main:'./src/main.js',admin:'./src/admin.js'}，以生成独立JS文件；HtmlWebpackPlugin需为每个入口配置单独实例并指定chunks；splitChunks需设chunks:'all'才能提取多入口公共代码。
-
HTML5规定<kbd>是标注键盘快捷键的唯一语义化标签，应分开展示组合键如<kbd>Ctrl</kbd>+<kbd>S</kbd>，避免用<strong>或<span>替代；需注意跨平台符号（如⌘）、编辑器快捷输入及样式调整时不破坏可访问性。
-
CSS选择器的功能包括基本选择、属性选择、位置选择和状态选择。1.类型选择器如div、p直接选择元素。2.类和ID选择器通过.和#加名称精确定位。3.属性选择器如input[type="text"]根据属性值选择。4.后代和子选择器如divp和div>p选择特定位置的元素。5.伪类和伪元素选择器如:hover和::before根据交互状态或插入内容选择。通过这些选择器，我们可以灵活控制网页元素的样式。
-
优先使用CSSGrid实现多行多列卡片布局，通过repeat(auto-fit,minmax(280px,1fr))实现自适应网格，配合gap控制间距；在兼容性要求高时可选Flexbox并设置flex-wrap:wrap防止溢出；为提升性能，应对非视区卡片懒加载，避免过度使用box-shadow等重绘属性，并用contain隔离渲染；响应式设计应依赖弹性布局而非频繁媒体查询，移动端可调低min-width使卡片单列显示，字体与间距采用rem/vw等相对单位以适配不同屏幕。
-
nav标签用于标识页面主要导航链接区域，提升语义化；2.常见位置是页眉、页脚和侧边栏，取决于设计与用户习惯；3.避免滥用，仅包裹主要导航链接，非所有链接都适用；4.正确使用可增强可访问性（如屏幕阅读器识别）和SEO（帮助搜索引擎理解结构），最终提升用户体验并以完整句结束。
-
flexbox能通过order属性灵活控制元素顺序，而float依赖HTML结构且难以调整视觉顺序；现代布局推荐使用flex实现响应式设计。
-
用hsl()的l参数降低亮度是最可控的变深方式：l值越小颜色越深，如hsl(200,50%,60%)→hsl(200,50%,40%)；相比rgb()易偏色、十六进制叠黑受背景影响，hsl()语义清晰、可预测。
-
Sticky定位触发偏移本质是top值未相对于滚动容器内容区顶部正确设置；它依赖最近有滚动行为的祖先容器，top为0表示元素顶部与容器顶部对齐时吸附，正负值可调节吸附时机，需补偿fixed头部高度并避免用margin或transform干扰定位逻辑。
-
<p>推荐使用box-sizing:border-box，因为它使元素宽高符合视觉直觉——设置width:300px即实际占用300px水平空间，避免padding和border导致宽度意外增加、溢出或布局错位，且一行*{box-sizing:border-box;}即可全局生效。</p>
-
显示器色彩空间不一致导致偏色，macOS默认DisplayP3而Windows多为sRGB，需统一使用sRGB输出、明确标注色彩空间并避免非标准CSS属性。
-
纯HTML+CSS可快速搭建可用、可访问、可部署的个人页面，关键在于语义化结构、图片alt规范、链接有效性、字体与响应式设计。
-
padding和margin不直接控制对齐，而是通过改变内外空间间接影响视觉位置；真正决定对齐的是盒模型四部分共同构成的尺寸与定位基准。
-
使用LiveServer插件可实现实时预览，安装后右键选择OpenwithLiveServer即可在浏览器中自动打开并实时刷新页面。2.直接保存HTML文件后在资源管理器中双击打开，利用系统默认浏览器查看效果，操作简单适用于静态页面测试。3.通过配置tasks.json创建自定义任务，使用shell命令调用浏览器打开当前文件，实现VSCode内快捷预览。
-
用CSSGrid实现两行三列图片布局最省事，关键在于grid-template-columns:repeat(3,1fr)、gap控制间距、img设width:100%和object-fit:cover，并注意响应式、语义结构与加载性能。
