需同时配置viewport元标签、调用FullscreenAPI、用CSS强制铺满并监听屏幕变化：1.viewport设width=device-width、initial-scale=1.0且禁缩放；2.手势触发requestFullscreen()并兼容前缀；3.CSS用fixed+100vh/vw+overflo...

background-repeat用于控制背景图重复方式，常用值包括repeat（默认，双向重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）、space（等距平铺不裁剪）、round（缩放填满）。

HTML5视频铺满父容器需父容器有明确尺寸并用object-fit控制缩放；推荐设父容器为width:100vw;height:100vh;视频设width:100%;height:100%;object-fit:cover;并隐藏原生控件。

登录页错位主因是Flexbox对齐逻辑误用；需确保父容器有明确高度（如min-height:100vh）、正确设置flex-direction、并同时使用justify-content和align-items实现双轴居中。

小屏幕下Grid布局异常主因是固定列数导致压缩溢出，应采用minmax()+auto-fit实现自动列数调节，并配合媒体查询调整grid-template-areas、grid-auto-flow及gap等属性适配不同视口。

可用background属性叠加多层背景，用逗号分隔，从左到右为底层到顶层，每层用linear-gradient(rgba(),rgba())模拟纯色透明层，并设background-size:100%100%和no-repeat确保铺满。

用::before给标题加装饰线需先设标题position:relative，再用绝对定位+背景色或边框绘制线条，配合transform或width控制位置长度，content:‘’不可省略，必要时用z-index避免遮挡。

背景未铺满主因是元素尺寸、内边距或盒模型理解偏差，background-color默认覆盖content+padding区域，受border、塌陷、浮动、overflow裁剪等影响。

背景图遮挡内容的关键是合理控制其显示方式：用background-size（cover/contain/具体值）缩放、background-position锚定焦点、padding或伪元素隔离内容、background-attachment设为scroll确保滚动同步，并通过z-index保障内容层级。

用flex-grow撑开子元素需先设父容器display:flex，再根据方向设flex-direction，子元素设flex-grow分配剩余空间，同时排除固定宽高、white-space等干扰。

虚线边框显示不均匀主因是浏览器按“dash+gap整数倍铺满、末尾截断”算法渲染，dash/gap3border-width；应优先调整border-width、固定元素尺寸、避免非整数缩放，必要时用background-image模拟可控虚线。

本教程旨在解决CSS布局中，当元素设置width:100%和height:100%并应用外边距时，导致页面溢出的常见问题。核心解决方案是利用CSS的calc()函数，精确计算元素的宽度和高度，使其在包含外边距的情况下仍能完美适应视口。通过这种方法，可以创建出整洁、无多余滚动条的全屏布局，提升用户体验。