
滚动条
GroupBox用于逻辑分组与标题显示但不支持滚动,Panel支持滚动与样式定制但无内置标题;二者应按功能契约选用,不可互换替代。
vw/vh相对于视口,%相对于父容器;全屏高度用100vh而非100%,字号适配需clamp(1.25rem,4vw,2.5rem),Flex/Grid中优先用fr而非%,避免滚动条导致的100vw溢...
设置box-sizing:border-box能解决宽度溢出问题,因其将padding和border计入width/height内,使width:100%真实占满父容器,避免content-box下因...
移动端布局中必须全局设置box-sizing:border-box,否则默认content-box模型下padding会额外增加宽度导致溢出;需特别处理表单控件、嵌套padding及边框元素,并用De...
offsetWidth/offsetHeight返回元素的布局尺寸,含内容、内边距、边框,不含外边距和滚动条;为只读整数,受display:none影响而为0,触发同步重排。
父元素高度塌陷本质是浮动子元素脱离文档流致父容器无法感知其存在;overflow:hidden通过触发BFC使父容器重新包含浮动元素,但会裁剪溢出内容。
通过语义化HTML结构分离导航与主体内容,为设置width:100%,同时仅对应用max-width,即可实现导航栏横跨视口全宽、正文区域受限于指定宽度的布局效果。
max-width通过设为100%限制块级元素不超出父容器,配合height:auto保图比例;min-width守住响应式底线,如导航项120px、输入框200px;二者组合划定弹性区间,需注意bo...
box-sizing:border-box是控制尺寸精度的关键,它使width/height包含内容、内边距和边框;需全局设置并配合显式声明padding/border、谨慎使用calc(),最后通过...
移动端响应式核心是:容器设max-width:100%+width:100%,图片设max-width:100%;height:auto;用min-width媒体查询渐进增强;viewport只需wi...