CSS 盒模型深度解析

/* 标准盒模型（默认）：width 只算内容区 */
.box-standard {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* 实际占用宽度 = 300 + 20*2 + 5*2 = 350px */
  /* margin 不计入 width，但计入元素在文档流中占的空间 */
}

/* IE 盒模型：width 就是可见框的宽度 */
.box-border {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #000;
  /* 实际占用宽度 = 300px（padding 和 border 挤压内容区） */
  /* 内容区宽度 = 300 - 20*2 - 5*2 = 250px */
}

/* 推荐的全局设置：所有元素及伪元素统一用 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 这样布局时 width 所见即所得 */
.container {
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  /* 实际宽度就是 100%，padding 和 border 已包含在内 */
  /* 不会再撑破父容器、产生横向滚动条 */
}

/* 组件如需局部恢复标准盒模型，可单独覆盖 */
.legacy-widget {
  box-sizing: content-box;
}

.parent {
  width: 500px;
  height: 200px;
}

.child {
  /* 下面两个值都基于父元素宽度 500px 计算 */
  padding-top: 10%;    /* = 50px，基于宽度而非高度！ */
  margin-left: 20%;    /* = 100px */
}

/* 经典技巧：用 padding-top 百分比实现固定宽高比容器 */
.ratio-16-9 {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 9/16 = 0.5625，实现 16:9 比例盒子 */
  position: relative;
}
.ratio-16-9 > * {
  position: absolute;
  inset: 0; /* top/right/bottom/left 全 0 */
}

/* 场景 1：相邻兄弟元素的外边距折叠 */
.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 30px;
  /* 实际间距 = max(20px, 30px) = 30px，不是 50px */
}

/* 场景 2：父子外边距折叠（塌陷） */
.parent-collapse {
  /* 子元素的 margin-top 会"穿透"父元素，作用到父元素外部 */
}
.parent-collapse > .child {
  margin-top: 40px; /* 本想撑开父元素内部间距，结果整个父元素被下推了 */
}

/* 阻止父子折叠的多种方法（任选其一） */
.parent {
  padding-top: 1px;                       /* 方法1：加一点 padding */
  border-top: 1px solid transparent;      /* 方法2：加透明 border */
  overflow: hidden;                       /* 方法3：触发 BFC */
  display: flow-root;                     /* 方法4：最干净地触发 BFC，无副作用 */
}

/* Flex / Grid 容器的子项之间永远不会发生外边距折叠 */
.flex-parent {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 用 gap 控制间距，彻底告别折叠困扰 */
}

/* 以下任一声明都会创建 BFC */
.bfc-overflow  { overflow: hidden; }   /* 老牌方案，可能裁剪内容 */
.bfc-flow-root { display: flow-root; } /* 现代推荐，无副作用 */
.bfc-flex      { display: flex; }
.bfc-grid      { display: grid; }
.bfc-inline    { display: inline-block; }
.bfc-absolute  { position: absolute; }

/* 经典用途：父元素包裹住内部的浮动子元素，避免高度塌陷 */
.clearfix-parent {
  display: flow-root; /* 一行代替传统的 ::after clearfix hack */
}
.clearfix-parent > .float-child {
  float: left;
}

/* 修复前：卡片掉行 */
.card-broken {
  width: 33.33%;
  padding: 16px;
  border: 1px solid #eee;
  /* 实际宽度 = 33.33% + 34px，三个必然超 100% */
}

/* 修复后：一行代码解决 */
.card-fixed {
  box-sizing: border-box; /* 关键：让 padding/border 挤进 33.33% 内 */
  width: 33.33%;
  padding: 16px;
  border: 1px solid #eee;
}

/* 更现代的写法：直接用 Grid，连百分比都省了 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* inline 元素：设了宽高也不生效 */
.tag-inline {
  display: inline;
  width: 200px;      /* 无效！ */
  height: 50px;      /* 无效！ */
  margin-top: 20px;  /* 无效！上下 margin 被忽略 */
  padding: 10px;     /* 左右 padding 生效，上下视觉溢出但不推开兄弟 */
}

/* 改为 inline-block：既能并排，又能设宽高 */
.tag-inline-block {
  display: inline-block;
  width: 200px;      /* 生效 */
  height: 50px;      /* 生效 */
  margin: 20px;      /* 四个方向都生效 */
  vertical-align: middle; /* inline-block 常需对齐微调 */
}

/* inline-block 之间的"空白间隙"坑：HTML 换行/空格会渲染成约 4px 间隙 */
.list-ib { font-size: 0; }        /* 父级字号归零消除间隙 */
.list-ib > .item { font-size: 14px; display: inline-block; }

/* 用 outline 做键盘焦点态，不会因加边框导致元素跳动位移 */
.btn:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px; /* 与元素拉开距离，视觉更清晰 */
}

/* 调试神器：一眼看清所有元素的盒子边界，且不影响布局 */
* { outline: 1px solid rgba(255, 0, 0, 0.2); }

.responsive-box {
  width: 100%;
  max-width: 1200px;  /* 再宽的屏幕，内容也不超过 1200px */
  min-width: 320px;   /* 再窄也不小于 320px，避免内容挤压变形 */
  margin: 0 auto;     /* 配合 max-width 实现居中且限宽 */
}

/* 优先级规则：min-width > max-width > width */
.demo {
  width: 500px;
  max-width: 400px;  /* 生效，最终 400px */
  min-width: 450px;  /* 再覆盖，最终 450px —— min 最高 */
}

/* 现代关键字：让盒子按内容自适应 */
.fit {
  width: fit-content;   /* 宽度刚好包住内容 */
  max-width: max-content;
  min-width: min-content;
}

/* 单行文本溢出显示省略号 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多行文本溢出省略号（webkit 系） */
.ellipsis-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* 最多 3 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 只在纵向滚动，横向裁剪 */
.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 400px;
}

/* 老 hack：padding-top 撑高 + 绝对定位子元素 */
.ratio-old {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

/* 新写法：一行搞定 16:9 */
.ratio-new {
  width: 100%;
  aspect-ratio: 16 / 9; /* 高度按宽度自动算出 */
}

/* 头像永远正方形，不论容器怎么变 */
.avatar {
  width: 15%;
  aspect-ratio: 1;      /* 等价于 1 / 1 */
  border-radius: 50%;
  object-fit: cover;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }   /* 主体吃掉剩余高度，页脚自然沉底 */

.card img {
  display: block;   /* 一行消除基线间隙 */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;   /* 负 margin 抵消列的 padding，让内容与父容器边缘对齐 */
}
.col {
  padding: 0 8px;   /* 列间距 */
  box-sizing: border-box;
}
/* 现代替代方案：直接用 gap，无需负 margin 技巧 */
.row-modern { display: flex; flex-wrap: wrap; gap: 16px; }