-
CSS盒模型由内容区、内边距、边框和外边距组成，总尺寸受box-sizing影响；采用border-box可使width包含padding和border，便于布局控制。
-
<progress>元素需同时设置value和max属性才有效，value必须在0到max之间（含端点），否则退化为不确定状态；它仅表示任务进度，不自动标识“完成”，需JS或CSS配合实现完成态样式。
-
浮动元素导致父容器高度塌陷，因其脱离文档流使父容器无法感知其高度；clearfix伪元素通过触发BFC并清除浮动来解决，标准写法为.clearfix::after{content:"";display:table;clear:both}。
-
表单元素未继承CSS样式主因是浏览器user-agentstylesheet的强默认样式覆盖，需用DevTools定位来源，通过更具体选择器、appearance重置或!important调试；父容器、重置CSS、层叠上下文及焦点逻辑亦影响样式生效。
-
Bulma通过内置Flex类实现响应式布局，使用is-flex创建弹性容器，结合is-flex-direction控制排列方向，is-justify-content和is-align-items设置对齐方式，并支持移动端适配，如is-flex-direction-column-mobile，可快速构建无需自定义CSS的现代页面结构。
-
aspect-ratio仅约束宽高比，不自动响应式缩放；需配合width:100%等显式尺寸控制才能生效，且content-box下计算，box-sizing:border-box会影响可视比例，旧浏览器需padding-toptrick+@supports覆盖。
-
可通过CSS的color和background-color属性设置文字与背景色，常用方法包括：预定义颜色名、十六进制值、RGB/HSL函数及currentColor关键字。
-
小程序无法直接运行HTML5的<script>标签，因不支持原生DOM渲染；JS插件需兼容小程序运行时，避免依赖WebAPI，应通过npm引入并适配网络、存储等API。
-
自定义字体路径应相对于CSS文件而非HTML；@font-face需优先woff2、加font-display:swap；GoogleFonts的<link>必须含rel="stylesheet"且display=swap；font-family名称须逐字匹配；file://协议下字体因CORS被阻，需本地服务器或改用CDN。
-
Tooltip组件通过data-tooltip属性为元素添加提示信息，使用JavaScript监听鼠标事件并动态创建、定位提示框。核心逻辑包括：利用getBoundingClientRect计算位置，确保提示框不越界，并通过append/remove控制显示与隐藏。支持多种元素且无需额外DOM嵌套，可扩展自定义位置、动画和富文本功能，轻量易集成。
-
<mark>标签本身性能开销极小，真正影响首屏速度的是不当CSS样式、大规模无节制渲染及客户端动态插入等误用行为。
-
Grid容器需设position:relative，因absolute定位依赖最近已定位祖先，而grid容器默认static不构成定位上下文，否则子元素将相对于视口定位。
-
本文介绍如何在保留HTML标签完整性的同时，按纯文本长度（非总字符串长度）截断HTML字符串，并优先截断至最后一个句号，避免在标签中间或单词中间截断。
-
多个类同时生效需在HTML中用空格分隔，CSS中用连续点号连接类名构成复合类选择器；如<divclass="btnprimarylarge">对应.btn.primary.large{}，顺序无关，空格或逗号会改变语义。
-
footer不会自动定位到底部，需通过Flex布局（父容器设display:flex、min-height:100vh，main设flex:1）实现粘性底部，避免fixed/absolute误用及vh失准问题。
