box-sizing 默认 content-box 导致宽度超预期，应全局设为 border-box；margin 合并引发意外间距；浮动致父容器塌陷；flex/grid 中 align-items 与 justify-content 作用轴向由 flex-direction 决定。
box-sizing 默认值导致的宽度计算偏差
绝大多数布局问题根源在于 box-sizing 的默认值 content-box。当你给一个 width: 300px 的元素设置 padding: 20px 和 border: 5px solid，它的实际占用宽度是 300 + 2×20 + 2×5 = 350px，超出预期，引发父容器溢出或换行。
- 全局修复：在 CSS 重置中统一设为
box-sizing: border-box，并让所有后代继承 - 关键写法必须包含
*::before, *::after，否则伪元素仍按 content-box 计算 - 注意 IE8+ 支持
border-box，但不支持inherit值，所以需用通配符显式覆盖
*, *::before, *::after {
box-sizing: border-box;
}
margin 合并（Margin Collapse）引发的意外间距
相邻块级元素的垂直 margin 会合并为较大者，不是相加。常见于 h1 + p、列表项之间、或父子间（父元素无 border/padding，子元素上 margin 会“顶穿”出来）。
- 触发条件明确：仅发生在块级盒的垂直方向、处于同一 BFC、且中间无 clearance（如 border、padding、inline content）
- 快速验证：给父元素加
padding: 0.1px或overflow: hidden可阻止父子合并 - 更稳妥做法是统一用
padding控制段落/标题间距，而非依赖margin
浮动元素脱离文档流后父容器高度塌陷
使用 float: left 或 float: right 的子元素不再参与父容器高度计算，导致父元素 height: auto 时高度为 0，背景、边框、后续兄弟元素位置全部错乱。
Kuwebs企业网站管理系统3.1.5 UTF8
下载
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
- 传统清除法：
::after伪元素 +clear: both是兼容性最好、语义最干净的方式 - 现代替代方案：
display: flow-root直接创建新 BFC，无需额外标记或伪元素（Chrome 64+/Firefox 62+ 支持） - 避免用
overflow: hidden清除浮动——它可能意外裁剪阴影、下拉菜单或滚动内容
.clearfix::after {
content: "";
display: table;
clear: both;
}
Flex/Grid 容器中 align-items 与 justify-content 的混淆使用
初学者常把 align-items 当作“水平居中”，把 justify-content 当作“垂直居中”，结果在 flex 容器里写 justify-content: center; align-items: flex-start 却发现内容只水平动了，垂直没反应——因为主轴方向由 flex-direction 决定。
立即学习“前端免费学习笔记（深入）”；
-
justify-content总是对齐主轴（row时为水平，column时为垂直） -
align-items总是对齐交叉轴（与主轴垂直的方向） - 单个项目单独控制要用
align-self，而不是改容器属性 - Grid 中同理：
justify-items/align-items是容器级，justify-self/align-self才作用于单个 grid item
margin 数值更省时间。 
