-
彻底清除列表默认样式需同时设置list-style:none、margin:0和padding:0;list-style-image兼容性差,推荐用::before+background-image;Flex布局下对齐需作用于li内部;语义结构不可破坏。
-
HTML5明确禁止用<table>做页面布局,仅适用于语义化表格数据;现代布局应选Flexbox(单维排列)或Grid(二维网格),避免display:table等伪表格方案。
-
必须用官网推荐的完整CDN地址:CSS用bootstrap.min.css,JS用bootstrap.bundle.min.js(含Popper),JS放底部或加defer;栅格需container→row→col三层嵌套;断点类名按顺序书写,务必添加viewportmeta标签。
-
HTML中用<hr/>标签添加语义化横线,表示内容主题分隔;需用CSS自定义样式,禁用过时属性;无语义需求时优先用CSS边框。
-
IE11中video标签不支持aspect-ratio且忽略width/height语义,需用padding-top百分比容器配合绝对定位实现等比缩放,object-fit无效但可用contain防拉伸,poster尺寸须匹配视频比例,preload避免auto,动态插入需预设样式或监听loadedmetadata修正。
-
minmax()是控制Grid轨道高度的唯一可靠方案,因其在grid-template-rows中定义轨道最小/最大尺寸,兼顾内容自适应与容器约束,而fit-content()不适用于height方向且兼容性差。
-
Vuex状态刷新丢失是因数据默认存于内存,解决方案有三:一、手动用localStorage/sessionStorage同步;二、使用vuex-persistedstate插件自动持久化;三、按业务语义选择sessionStorage(会话级)或localStorage(跨会话),并注意敏感信息与降级处理。
-
HTML5通过FileAPI和FileSystemAPI实现本地文件操作:1.FileAPI利用input或拖放获取文件,通过FileReader读取内容,支持文本、数据URL等格式;2.拖拽功能提升用户体验,允许将文件直接拖入页面读取;3.FileSystemAPI(实验性)可在沙盒中创建、读写文件,仅部分浏览器支持;注意事项包括安全限制、API兼容性及推荐使用NativeFileSystemAPI替代方案。
-
表单标签与输入框对不齐的本质是默认样式差异和盒模型行为不一致,应采用“列对齐”思路,通过Grid或Flex布局统一结构并配合基础样式重置实现精准对齐。
-
浮动元素脱离文档流导致父容器高度塌陷、相邻元素换行错位、文字环绕截断及clear失效,根源在于盒模型计算偏差、BFC缺失与层叠上下文干扰,需结合Computed/Layout面板调试并用flex/grid或BFC方案修复。
-
最后一行按钮掉下来是因为末尾按钮的margin-right占用多余空间;应改用margin-left从第二个按钮开始设置,或直接使用flex布局配合justify-content或gap控制间距。
-
Grid容器空白过大应优先检查gap缺失或padding/margin干扰,正确使用gap统一控制项间间隙,避免为网格项设margin破坏布局。
-
HTML中插入真正空格最常用的是 实体,它表示不换行空格,不会被浏览器合并或折行;其他如 、 宽度不同且兼容性较差;CSS的letter-spacing、word-spacing或text-indent通常更可控、语义化。
-
最简单有效的方法是给父容器设置Flex布局并启用居中属性:.container{display:flex;justify-content:center;align-items:center;min-height:100vh;},其中justify-content实现水平居中,align-items实现垂直居中,配合min-height确保内容较少时仍居中,适用于按钮、模态框、加载动画等场景,现代浏览器广泛支持,推荐作为首选方案。
-
ES6+是将隐性逻辑显性化、运行时错误前置的工具箱,关键在场景适配:const/let解决作用域泄漏与闭包问题,解构赋值明确取值逻辑与默认值,Promise/async-await需精准错误处理,Map/Set提供真正集合能力,盲目套用新语法易致逻辑错误。