盒子模型（二）

本页对应 盒子模型，共 8 段视频，约 1 小时 9 分。

学习目标

• 能使用 border 复合属性为盒子设置边框，并正确设置边框粗细、样式和颜色。
• 能使用 border-top、border-right、border-bottom、border-left 为盒子单独设置某一条边框，并说明样式层叠覆盖关系。
• 能使用 padding 及其单方向属性设置内边距，并能正确解释一值、二值、三值、四值写法分别对应的上、右、下、左距离。
• 能计算添加 border 和 padding 后盒子的实际尺寸，并能使用手动减法或 box-sizing: border-box 保证盒子尺寸不被撑大。
• 能使用 margin 及其单方向属性和多值写法设置盒子间距，并能使用 margin: 0 auto 或左右 auto 让有宽度的块级盒子水平居中。
• 能说明 margin: auto 实现水平居中的原理，并能使用浏览器调试工具区分内容区、内边距、边框和外边距。

知识点

工具定位：为什么需要 PxCook

为什么需要： 前端还原设计稿时，经常要读取文字大小、颜色值、元素间距和尺寸。人工取色、量距离既慢又容易出错，尤其面对 PSD 设计稿时，图层多、标注分散，沟通成本高。PxCook（像素大厨）是一款切图设计工具软件，支持 PSD 文件的文字、颜色、距离自动智能识别，目的就是把这些测量信息集中呈现，减少手工核对。

怎么想： 先明确它解决的是“设计稿测量与切图辅助”问题，而不是替代浏览器调试。使用时要把“自动识别”和“手动测量”分开：能自动识别的先看开发面板，识别不到或需要复核的再用设计面板测量。

怎么做： 认识两个核心面板：开发面板用于自动智能识别；设计面板用于手动测量尺寸和颜色。实际工作中先导入设计稿，再根据面板信息提取文字、颜色、距离等数据。

易错点： 不要把工具识别结果直接当成最终代码；设计稿图层、字体缺失或缩放异常时，识别结果可能不完整，需要人工复核。

创建项目与导入设计稿：怎么开始

为什么需要： 测量和切图需要有一个项目作为承载，否则设计稿、标注和后续查看会缺少统一入口。笔记给出的使用流程很明确：先创建项目，再添加设计稿。

怎么想： 顺序不能反：先有项目，才有地方导入设计稿。项目类型按当前任务选择 Web，因为本节面向 Web 前端还原。

怎么做： 创建项目 → 输入项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿。

易错点： 项目类型不要随意选；导入前确认项目已经创建成功；导入的是设计稿文件，不要误把普通截图当成可识别 PSD。本节笔记没有给出代码，因此不补造代码。

开发面板：自动智能识别

为什么需要： 设计稿中的文字、颜色、距离如果全部手量，效率低且容易漏。开发面板的价值是自动智能识别 PSD 中的这些信息，帮助开发者快速读取。

怎么想： 把开发面板当成“第一轮提取”：先看自动识别结果，再对关键样式做复核。自动识别适合提高效率，但不能替代对页面结构和设计规范的理解。

怎么做： 导入设计稿后进入开发面板，查看文字、颜色、距离等自动识别信息，并据此整理页面样式。

易错点： 自动识别可能受图层组织、字体、设计稿规范影响；不要只看一个数值就下结论，关键颜色和间距要与设计稿对照。

设计面板：手动测量尺寸和颜色

为什么需要： 自动识别并不等于所有细节都能直接使用。某些尺寸、颜色或局部距离需要手动测量确认，设计面板就是补充手段。

怎么想： 采用“自动识别为主、手动测量为辅”的流程：先看开发面板，遇到不明确或需复核的地方，再到设计面板手动测量尺寸和颜色。

怎么做： 在设计面板中手动测量目标元素的尺寸和颜色，把结果与开发面板识别值、设计稿视觉效果进行对照。

易错点： 测量时要明确起点和终点，避免把不同对象的距离混在一起；颜色要确认格式和透明度；不要因工具缩放或截图比例导致误读。

关于本节转写稿的说明

本节转写稿实际讲的是盒子模型、边框、内边距、外边距等内容，与“02-PxCook”笔记主题不一致。为避免编造，不能把盒子模型的操作过程硬写成 PxCook 的使用步骤；本节教程只依据笔记中 PxCook 的定位、两个面板和创建项目流程展开。若后续需要盒子模型教程，应单独整理对应笔记与转写稿。

盒子模型的作用与组成

为什么需要：布局网页本质就是“摆盒子、放内容”，盒子模型决定盒子占多大、内容离边缘多远、盒子之间隔多远。怎么想：先记住一个完整盒子由内容、内边距、边框、外边距四部分组成；调试时可看颜色辅助判断。怎么做：用 width/height 写内容区，padding 写内容与盒子边缘距离，border 写边框，margin 写盒子外面距离。易错点：padding 和 border 会撑大盒子；margin 在盒子外面，不属于盒子内部。

div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

边框线

为什么需要：边框能区分区域、突出输入框和卡片。怎么想：边框由粗细、线条样式、颜色组成，顺序不区分；开发中常用实线 solid。怎么做：写 border，快捷键可记 bd。易错点：样式单词别写错，常用 solid、dashed、dotted；颜色和粗细可调。

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

单方向边框线

为什么需要：很多输入框只要下边框，或某个盒子只要上边框。怎么想：用 border-方位名词 单独设置某一条边。怎么做：如 bdt、bdl、bdr、bdb 分别对应上、左、右、下。易错点：先写四边 border 再写单边时，单边要写在后面，利用层叠覆盖；反过来会被覆盖。

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

为什么需要：内容紧贴盒子边缘不好看，需要让文字“往里退”。怎么想：padding 控制内容与盒子边缘距离；可四边相同，也可单方向。怎么做：padding:30px 表示四边；padding-top/right/bottom/left 单独设置。易错点：加 padding 会撑大盒子；调试工具中青绿色区域是内边距，黄色是外边距，蓝色是内容宽高。

div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示：添加 padding 会撑大盒子。

技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* 1. 手动去减 */
      /* width: 160px;
      height: 160px; */
      /* 2. css3 盒子模型 box-sizing: border-box */
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 10px solid red;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="box">qwe</div>
</body>

</html>

尺寸计算

为什么需要：页面中盒子宽度常是固定的，若 border/padding 把盒子撑大，后面的盒子会被挤走。怎么想：默认盒子尺寸 = 内容尺寸 + border + padding；调试时 200px 盒子加左右各 10px 边框会变 220px，再加左右各 10px 内边距会变 240px。怎么做：可手动减尺寸，把 width/height 改成 160px；更推荐 box-sizing:border-box，让 border 和 padding 往内减。易错点：不要只减一边；border-box 是内减模式，边框往里走，盒子总宽高不变。

外边距与版心居中

为什么需要：盒子之间要拉开距离；网页主体内容要水平居中。怎么想：margin 控制盒子与盒子距离，写法同 padding；块级盒子左右 margin 为 auto 可水平居中，但盒子必须有宽度。怎么做：版心常用 margin:0 auto；京东/淘宝常见 margin:0 auto，小米也可左右分别 auto。易错点：上下 auto 不能实现垂直居中；行内/行内块元素水平居中要给块级父元素加 text-align:center。

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

1. 行内和行内块元素水平居中对齐，给块级的父元素添加 tac
2. 块级元素水平居中对齐： 让盒子的左右外边距设置为 auto 就可以了。 margin: auto;

• 小米 margin-left: auto; margin-right: auto;
• 京东/淘宝： margin： 0 auto；

清除默认样式与元素溢出

为什么需要：标签自带内外边距和列表符号，会影响布局；内容超出盒子时要控制显示。怎么想：先统一清除默认样式，再用 overflow 控制溢出。怎么做：通配符清零 margin/padding，列表去点；overflow 可设 hidden 等。易错点：清除默认样式通常配合 box-sizing:border-box，避免后续计算混乱。

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

外边距问题与行内元素内外边距

为什么需要：垂直兄弟盒子的上下 margin 会合并，父子盒子会产生塌陷；行内元素加 margin/padding 不能改变垂直位置。怎么想：合并取较大值；塌陷是子级上外边距带着父级下移。怎么做：合并按较大值理解；塌陷可取消子级 margin、父级加 padding，或父级 overflow:hidden，或父级 border-top；行内元素垂直位置可用 line-height 调整。易错点：不要误以为两个 margin 会相加。

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

span {
  /* margin 和 padding 属性，无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

圆角与盒子阴影

为什么需要：圆角让头像、按钮、胶囊标签更自然；阴影增加层次。怎么想：border-radius 的值是圆角半径；正方形设宽高一半或 50% 变正圆，长方形设高度一半变胶囊。怎么做：可单值、多值；多值从左上角顺时针，当前角没有数值则与对角取值相同。阴影注意 X、Y 偏移必须写，默认外阴影，内阴影加 inset。易错点：正圆要求盒子本身是正方形；胶囊圆角取高度一半。

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;
  border-radius: 50%;
}

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

代码示例

示例一：盒子模型组成与边框线

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型-组成与边框</title>
  <style>
    /* 盒子模型四部分：内容(width/height) + 内边距 padding + 边框 border + 外边距 margin */
    .box {
      margin: 50px;
      border: 5px solid brown;
      padding: 20px;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    /* 单方向边框线：border-方位名词 */
    .box2 {
      border-top: 2px solid red;
      border-right: 3px dashed green;
      border-bottom: 4px dotted blue;
      border-left: 5px solid orange;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">盒子模型</div>
  <div class="box2">单方向边框线</div>
</body>

</html>

要点解释：

• border 属性值由三部分组成：粗细、线条样式、颜色，三者不区分顺序；写 bd 回车可自动补全。
• 线条样式：solid 实线、dashed 虚线、dotted 点线，开发中最常用的是 solid。
• 单方向写法 border-top / border-right / border-bottom / border-left（快捷键 bdt、bdr、bdb、bdl），只设置一条边。
• 易错点：只写 border: 5px 而不写样式，边框不显示，因为线条样式默认是 none。
• 易错点：整体 border 与单方向 border-top 同时写时，利用层叠性——先写大的（四条边），后写小的（单边），反过来单边会被覆盖掉。
• 调试技巧：在检查面板中，蓝色是内容宽高，青绿色是 padding，黄色是 margin，可以据此排查样式是否生效。

示例二：内边距多值写法与盒子尺寸计算

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内边距与盒子尺寸</title>
  <style>
    .box {
      /* 1. 手动去减：width: 160px; height: 160px; */
      /* 2. css3 盒子模型 box-sizing: border-box */
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: 10px solid red;
      padding: 10px;
    }

    /* padding 多值写法：从上开始顺时针 */
    .one {
      padding: 30px;
    }

    .two {
      padding: 10px 30px;
    }

    .three {
      padding: 10px 30px 50px;
    }

    .four {
      padding: 10px 20px 30px 40px;
    }
  </style>
</head>

<body>
  <div class="box">qwe</div>
</body>

</html>

要点解释：

• 默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸，所以加 border / padding 会撑大盒子（200 会变成 240）。
• 解决方式一：手动做减法，把 border 和 padding 减掉（宽高各改 160）；解决方式二：box-sizing: border-box 内减模式，边框和内边距往里面加，盒子不变大。
• padding 多值规律：一个值 = 上下左右；两个值 = 上下 / 左右；三个值 = 上 / 左右 / 下；四个值 = 上右下左（顺时针）。当前方向没有数值则与对面取值相同。
• 易错点：padding 只能写在盒子上，不能用 text-indent 代替文字缩进，这是不科学的写法。
• 易错点：忘了加 box-sizing: border-box，页面里盒子被撑大后会把其他盒子往右挤掉下去，导致布局错位。
• 易错点：行内元素加 margin / padding 无法改变垂直位置，要改垂直位置需用 line-height。

示例三：版心居中、清除默认样式与圆角

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>版心居中</title>
  <style>
    /* 清除默认内外边距 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 清除列表项目符号 */
    li {
      list-style: none;
    }

    /* 版心居中：盒子要有宽度，左右 margin 为 auto */
    .box {
      margin: 0 auto;
      width: 1000px;
      height: 200px;
      background-color: pink;
    }

    /* 正圆形状：正方形盒子，圆角为宽高的一半 / 50% */
    .circle {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border-radius: 50%;
    }

    /* 胶囊形状：长方形盒子，圆角为高度的一半 */
    .pill {
      width: 200px;
      height: 80px;
      background-color: orange;
      border-radius: 40px;
    }
  </style>
</head>

<body>
  <div class="box">版心居中</div>
  <div class="circle"></div>
  <div class="pill"></div>
</body>

</html>

要点解释：

• 版心居中三个条件：块级元素 + 有宽度 + 左右 margin 为 auto。写法有 margin: 0 auto;（京东、淘宝）或 margin-left: auto; margin-right: auto;（小米）。
• 只有水平居中，上下写 auto 是无效的，不能靠它实现垂直居中。
• 易错点：盒子没有宽度时和浏览器一样宽，margin: 0 auto 看不出效果；行内 / 行内块元素的水平居中不能靠 margin auto，要给块级父元素加 text-align: center。
• 圆角 border-radius 多值写法从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。
• 清除默认样式中，* 统一清内外边距并加 box-sizing: border-box，li 用 list-style: none 去项目符号，避免后期布局被默认样式干扰。

常见错误

1. 加完 padding / border，盒子变大，右边盒子被挤到下一行

• 现象：设计稿要求 200×200，写完 border:10px + padding:10px 后实测 240×240，同行第三个盒子掉行。
• 原因：默认 box-sizing: content-box，width/height 只算内容区，border 和 padding 向外叠加。
• 修法：全局 * { box-sizing: border-box }（推荐，一次到位）；或手动做减法把宽高改成 160。

2. 单边边框写了却不生效，四条边变成一样

• 现象：先写 border-top: 3px solid orange，又写 border: 1px solid #ccc，结果上边框变成 1px 灰色。
• 原因：border 是四条边的简写，写在后面会把前面的 border-top 覆盖掉（同一选择器内后写覆盖先写）。
• 修法：遵守"先大后小"——先写 border 整体，再写 border-top 做局部覆盖，顺序不能反。

3. 子盒子加了 margin-top，父盒子跟着一起往下跑

• 现象：只想让子盒子离父盒子顶部 50px，结果整个父盒子下移，页面顶部多出空白。
• 原因：父子嵌套时子元素的上外边距发生塌陷，被父级"继承"到外面。
• 修法：三选一——父级加 overflow: hidden；父级加 border-top；最推荐直接用父级 padding-top 代替子级 margin-top。

4. 上下两个盒子各设间距，实际距离比预期小

• 现象：上盒 margin-bottom: 50px，下盒 margin-top: 20px，期望 70，实际只有 50。
• 原因：垂直排列的兄弟元素上下 margin 合并，取较大值生效（水平方向不会合并）。
• 修法：约定"单向 margin"，只给下面盒子写 margin-top（或只给上面写 margin-bottom），不要两头都写。

5. margin: 0 auto 不居中

• 现象：写了 margin: 0 auto，盒子依然贴左边。
• 原因：盒子没有设宽度（块级默认撑满父级，没有剩余空间可分）；或元素本身是行内 / 行内块，auto 对它无效。
• 修法：块级盒子必须给 width；行内、行内块元素的居中交给父级 text-align: center。

6. padding 多值顺序记反，四个方向全错位

• 现象：写 padding: 10px 20px 30px，以为是上左下右，实测左右是 20、下是 30 但上不是 10 的预期。
• 原因：多值规则是"从上开始顺时针：上 右 下 左"，缺省时取对面值。
• 修法：只记一条——第一个值永远是上，然后顺时针数；写完立刻用开发者工具核对绿色区块。

7. 行内元素（span / a）加 margin、padding 垂直方向没反应

• 现象：给 span 设 margin: 50px; padding: 20px，左右撑开了，上下位置纹丝不动。
• 原因：行内元素不独占行盒，垂直方向的 margin / padding 不改变布局位置。
• 修法：用 line-height 撑垂直位置，或把元素改为 display: inline-block / block。

8. 圆角写 50% 想做成胶囊，结果变成椭圆

• 现象：200×80 的按钮设 border-radius: 50%，左右变成半椭圆。
• 原因：百分比是按宽、高分别计算的，长方形会得到椭圆。
• 修法：胶囊写"高度的一半"（40px）；只有正方形才能用 50% 做正圆。

练习

练习 1（尺寸守恒） 写一个盒子：最终占位必须是 200×200，粉色背景，10px 红色实线边框，10px 内边距，内容写"盒子"。 要求给出两种解法（手动减法 / 内减模式），并在浏览器里用开发者工具确认实测尺寸为 200×200。

练习 2（先大后小） 用尽量少的声明实现：四条边都是 1px #ccc 实线，只有上边框是 3px orange。 要求写出正确顺序，并解释如果把两句颠倒会发生什么。

练习 3（搜索框） 做一个搜索框：宽 490、高 30、border: 2px solid #e0e0e0、文字距左边 15px、字号 14px。 再做一个变体：只保留下边框（其余三边不要），其余样式不变。思考这里 padding 该写单方向还是四方向。

练习 4（塌陷复现与修复） 父盒子 300×300 灰色，子盒子 100×100 橙色。给子盒子 margin-top: 50px，观察父盒子是否下移。 然后分别用三种方式修复，并说明你实际项目里会选哪一种、为什么。

练习 5（版心 + 间距） 做一个 1200px 宽的版心，水平居中；版心内上下排列三个 200px 高的盒子，盒间距离 30px。 要求：只用一个方向的 margin 控制间距；页面左右无滚动条；用开发者工具确认版心左右留白相等。

原视频对照

#	视频	时长
1	盒子模型-边框	15:13
2	边框设置单边方式	07:28
3	内边距	06:38
4	内边距多值写法	08:27
5	盒子尺寸	07:25
6	外边距	14:14
7	marginauto的原理	03:49
8	上午复习	06:14

小结

1. 布局的本质是"先摆盒子，再填内容"，所以盒子的最终占位尺寸永远优先于内部细节——先定死尺寸，再谈边框和内边距。
2. box-sizing: border-box 应当作为项目起点写在重置样式里，而不是等盒子被撑大后再回来补；它把"设计稿数值 = 代码数值"这件事变成默认。
3. 分清职责：padding 管盒子内部（内容与边的距离），margin 管盒子之间。父子间距优先用父级 padding，兄弟间距优先用单向 margin，能避开一大半外边距问题。
4. 垂直方向的 margin 天生不可靠（会合并、会塌陷），水平方向才可靠。所以间距规范应约定"统一向下/向上一个方向给值"，而不是两头都给。
5. CSS 是层叠的，书写顺序本身就是逻辑：简写在前、局部在后（border → border-top，padding → padding-left）。顺序写反不是"没生效"，而是"被覆盖"，要养成看层叠而不是看单条声明的习惯。
6. 盒模型问题一律先开开发者工具的盒模型图：蓝色是内容、绿色是 padding、黄色是 margin。看不到对应颜色，就说明那条声明根本没匹配上，不要凭感觉改数值。
7. 居中是两套体系，别混用：行内 / 行内块交给父级 text-align，块级盒子用左右 margin: auto 且必须有宽度。选错体系怎么调都不会动。
8. 设计稿标注的是"最终占位"，而代码里 width 的含义取决于盒模型。测量工具量出来的数，落笔前先想一句"这个数在 border-box 下还成不成立"。