# CSS 盒子模型

在学习盒子模型之前，我们先来思考一个问题？网页布局的本质是什么？

我们所看到的网页本质上就是由一个个矩形框拼凑而成，矩形框里放置相关的图片，文字，视频等内容。
我们可以简单的把网页中的这种矩形框结构称为盒子模型。接下来我们站在专业的角度，来了解下盒子模型。
如下图所示：

# 一、盒子模型简介

TIP

所有 HTML 标签都可以看成矩形盒子，具有 （盒子模型） 结构。
盒模型由 4 个部分组成，分别是： content、padding、border、margin
盒模型有 5 个属性： width 宽、height 高、border 边框、padding 内边距、margin 外边距

我们可以用现实生活中的相框类比：

注：

width、height 不是盒子的总宽度

在标准盒子模型下，盒子模型的 content 部分就是元素的 width 和 height 属性组成的矩形部分。

简单盒子模型

<style>
  .box {
    /* 宽度 200px */
    width: 200px;
    /* 高度 200px */
    height: 200px;
    /* 边框 快捷键 bd */
    border: 10px solid red;
    /* 内边距 上右下左 30px */
    padding: 30px;
    /* 外边距 上右下左 30px */
    margin: 30px;
  }
</style>
<body>
  <div class="box">我就是div盒子的内容</div>
</body>

# 二、盒模型的属性

包含内容：

width、height 属性（宽、高），border 属性（边框）
padding 属性（内边框），padding 的不同数值写法
margin 属性（外边距），margin 的不同数值写法，margin 塌陷，margin 负值
去掉元素默认值，盒子水平居中，盒子模型占位计算

# 1、width 和 height 属性 - 宽和高

属性	单位	描述
`width`	px 、移动端开发（百分比、rem 等单位）	盒子内容的宽度
`height`	px、移动端开发（百分比、rem 等单位）	盒子内容的高度

# ① width 属性

TIP

当块级元素（div、h 系列、li 系列）没有设置 width 属性时，它将自动撑满，但并不意味着 width 可以继承

<style>
  /* box1 不设置width宽度，由于div是块级元素，能够自动撑满 */
  .box1 {
    height: 100px;
    background-color: skyblue;
  }
  /* 如果不是块级元素，设置或不设置宽度，都无法撑满 */
  a {
    height: 100px;
    background-color: red;
  }
</style>

<body>
  <h2>width 属性</h2>
  <p>
    当块级元素（div、h系列、li系列 ...... 等）没有设置 width
    属性时，它将自动撑满 ，但并不意味着 width 可以继承
  </p>

  <div class="box1"></div>

  <p>如果不是块级元素，设置或不设置宽度，都无法撑满</p>
  <a href="#">我是超级链接a标签</a>
</body>

# ② height 属性

TIP

盒子的 height 属性如果不设置，它将自动被其内容撑开
如果没有内容，则 height 默认是 0

<style>
  /* 
  box2 如果不设置 height高度，默认是0。且没内容时，页面则不显示
  如果有内容，能够被内容自动撑起来  
  */
  .box2 {
    width: 200px;
    background-color: yellow;
  }
</style>

<body>
  <h2>height 属性</h2>
  <p>
    box2 如果不设置
    height高度，默认是0。且没内容时，页面则不显示。如果有内容，能够被内容自动撑起来
  </p>

  <div class="box2">我是内容内容内容内容内容内容内容内容内容内容</div>
</body>

# ③ 总结：width 和 height 的特性

块级元素

当块级元素（如：div，p，li，h1-h6 ......）等没有设置 width 属性时，盒子的宽度会自动撑满他的父元素。但并不意味着 width 可以继承，width 是无法继承的。
高度在没有设置时，其高度为内容高，如果内容为空，则高度为 0
支持宽高属性的设置

内联元素

内联元素（如：a，span，b，strong ......）的宽高是由其内容决定，如果内容为空，则宽高默认为 0
内联元素设置宽高属性无效

<style>
  p {
    background-color: skyblue;
  }
  div {
    width: 400px;
    height: 50px;
    background-color: tomato;
  }
  span {
    width: 400px; /*不生效*/
    height: 50px; /*不生效*/
    background-color: yellow;
  }
</style>
<body>
  <p>p标签为块级元素，独占一行，默认宽度同父元素宽一样（内容宽）</p>
  <div>div是块级元素，我独占一行，同时支持宽高设置</div>
  <span>span元素，我是内联元素，我的宽高由内容决定，不支持宽高属性</span>
</body>

# 2、border 属性 - 边框

border 属性的三要素

/* 
    1px 线宽度
    solid 线型
    red 线颜色
*/
border: 1px solid red;

常见线型值	描述
`solid`	实线
`dashed`	虚线
`dotted`	点状线
`double`	双边框
`groove`	定义 3D 凹槽边框。效果取决于 border-color 值
`ridge`	定义 3D 垄状边框。效果取决于 border-color 值
`inset`	3D inset 边框。其效果取决于 border-color 的值。
`outset`	3D outset 边框。其效果取决于 border-color 的值。
`none`	无边框
`hidden`	隐藏边框

# ① 边框的三要素小属性

小属性	描述
`border-width`	线宽
`border-style`	线型
`border-color`	线颜色

注：

小属性是为了层叠大属性用的

<style>
  div {
    width: 50px;
    height: 50px;
    /* 2px 实线 灰色边框 */
    border: 2px solid #666;
  }
  .box {
    /* 单独定义边框颜色为红色 */
    border-color: red;
  }
</style>
<body>
  <div>1</div>
  <div class="box">2</div>
  <div>3</div>
</body>

# ② 四个方向的边框

属性	描述
`border-top`	上边框
`border-right`	右边框
`border-bottom`	下边框
`border-left`	左边框

border-left: 1px solid red;
...

使用方法

<style>
  div {
    width: 100px;
    height: 100px;
    /* 上边框 */
    border-top: 5px solid red;
    /* 右边框 */
    border-right: 6px double blue;
    /* 下边框 */
    border-bottom: 6px dotted orange;
    /* 左边框 */
    border-left: 5px dashed skyblue;
  }
</style>
<body>
  <div></div>
</body>

单独去掉某一边框线 border-top、border-bottom、border-right、border-left 的属性值设为 none

/* 去掉上边框线 */
border-top: none;
....

# ③ 四个方向的边框的三要素小属性

属性	描述
`border-top-width`	上边框宽度
`border-top-style`	上边框线型
`border-top-color`	上边框颜色
`border-right-width`	右边框宽度
`border-right-style`	右边框线型
`border-right-color`	右边框颜色
`border-bottom-width`	下边框宽度
`border-bottom-style`	下边框线型
`border-bottom-color`	下边框颜色
`border-left-width`	左边框宽度
`border-left-style`	左边框线型
`border-left-color`	左边框颜色

<style>
  div {
    width: 120px;
    height: 120px;
    border: 5px solid skyblue;
    float: left;
    margin: 10px;
  }

  /* 需要单独设置某个值是：使用小属性覆盖大属性 */
  .box {
    border-top-color: red;
    border-left-style: dashed;
    border-bottom-width: 10px;
  }
</style>

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

# ④ 去掉边框

border-left: none; 即：去掉左边框

/* 去掉右边框 */
border-right: none;

# ⑤ 边框应用场景 - 制作三角形

<style>
  .box1 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-top-color: red;
  }

  .box2 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-right-color: red;
  }

  .box3 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-bottom-color: red;
  }

  .box4 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-left-color: red;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

# ⑥ 圆角 border-radius 属性

border-radius 属性的值通常为 px单位，表示圆角的半径

border-radius: 10px;

<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 20px;
    float: left;
  }

  .box1 {
    border-radius: 10px;
  }

  .box2 {
    border-radius: 20px;
  }

  .box3 {
    /* 圆，正方形宽度的50% */
    border-radius: 50%;
  }

  .box4 {
    /* 圆：直接给数值，正方形宽度的一半即：圆的半径 */
    border-radius: 50px;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

单独设置四个圆角

/* 分别代表：上 右 下 左 四个值 */
border-radius: 10px 20px 30px 40px;

小属性

属性	描述
`border-top-left-radius`	左上角
`border-top-right-radius`	右上角
`border-bottom-left-radius`	左下角
`border-bottom-right-radius`	右下角

<style>
  .box {
    border-radius: 30px;
    /* 右下角 */
    border-bottom-right-radius: 0;
  }
</style>

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

以百分比为单位

border-radius 属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形盒子设置border-radius: 50%; 为正圆形
长方形盒子设置 border-radius: 50%; 为椭圆形，不能用 px 为单位

# 3、padding 属性 - 内边距

TIP

padding 是盒子的内边距，即边框内壁到内容之间的距离
padding 有四个方向，可以分别设置

属性	描述
`padding-top`	上内边距
`padding-right`	右内边距
`padding-bottom`	下内边距
`padding-left`	左内边距

<style>
  .box1 {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 上内边距 */
    padding-top: 10px;
    /* 右内边距 */
    padding-right: 20px;
    /* 下内边距 */
    padding-bottom: 30px;
    /* 左内边距 */
    padding-left: 40px;
  }
</style>

<body>
  <div class="box1">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
</body>

# 4、padding 的不同数值写法

TIP

从不同数值写法中找规律，总结快速记忆的方法

# ① padding 的四数值写法

TIP

padding 属性如果用四个数值以空格隔开进行设置
分别表示（上、右、下、左）的 padding
padding: 上右下左;

padding: 10px 20px 30px 40px;

快速记忆：

按照顺时针方向：上右下左即可

# ② padding 的三数值写法

TIP

padding 属性如果用三个数值以空格隔开进行设置
分别表示（上、左右，下）的 padding（内边距）
padding: 上左右下;

padding: 10px 20px 30px;

快速记忆：

还是上右下左，左没有，就跟右一样，即：上左右下

# ③ padding 的二数值写法

TIP

padding 属性如果二个数值以空格隔开进行设置
分别表示（上下、左右）的 padding（内边距）
padding: 上下左右;

padding: 10px 20px;

快速记忆：

还是上右下左，下没有，就跟上一样，左没有，就跟右一样
即：上下，左右

# ④ padding 的一数值写法

/* 上右下左内边距都是10px */
padding: 10px;

# ⑤ padding 属性应用场景

如果需要设置父子间间距，即给父元素添加内边距来实现

# ⑥ 快速灵活设置 padding 属性

/* padding: 上下30px 左右为0 */
padding: 30px 0;

/* padding: 上30px 左右10px 下20px */
padding: 30px 10px 20px;

/* padding: 上30px 左右10px 下0 */
padding: 30px 10px 0;

/* 
	小属性层叠大属性
	padding: 上右下左为40px
	padding-bottom: 下为0
	或 padding: 40px 40px 40px 0; 

	更推荐（小属性层叠大属性）写法
*/
padding: 40px;
padding-bottom: 0;

padding 大小属性的最佳实践：

小属性 padding-top/padding-right/padding-bottom/padding-left 用来层叠大属性 padding 来组合使用
更推荐（小属性层叠大属性）写法

<style>
  .box {
    width: 50px;
    border: 1px solid red;
    /* 四个方向内边距都为10px */
    padding: 10px;
  }
  .box1 {
    /* 单独控制下内边距为0 */
    padding-bottom: 0;
  }
</style>
<body>
  <div class="box">文字内容文字</div>
  <div class="box">文字内容文字</div>
  <div class="box box1">文字内容文字</div>
</body>

# 5、margin 属性 - 外边距

TIP

margin 是盒子的外边距
即：盒子和其他盒子之间的距离

# margin 有四个方向

属性	描述
`margin-top`	上外边距
`margin-right`	右外边距
`margin-bottom`	下外边距
`margin-left`	左外边距

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: skyblue;
  }
  .box1 {
    /* 上外边距 20px */
    margin-top: 20px;
    /* 左外边距 50px */
    margin-left: 50px;
    /* 下外边距 30px */
    margin-bottom: 30px;
  }
</style>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</body>

# 6、margin 的不同数值写法

TIP

与 padding 的数值写法类同

# ① margin 的四数值写法

TIP

margin 属性如果用四个数值以空格隔开进行设置
分别表示（上、右、下、左）的 margin（外边距）
margin: 上右下左;

margin: 10px 20px 30px 40px;

快速记忆：

按照顺时针方向：上右下左即可

# ② margin 的三数值写法

TIP

margin 属性如果用三个数值以空格隔开进行设置
分别表示（上、左右，下）的 margin（外边距）
margin: 上左右下;

margin: 10px 20px 30px;

快速记忆：

还是上右下左，左没有，就跟右一样，即：上左右下

# ③ margin 的二数值写法

TIP

margin 属性如果二个数值以空格隔开进行设置
分别表示（上下、左右）的 margin（外边距）
margin: 上下左右;

margin: 10px 20px;

快速记忆：

还是上右下左，下没有，就跟上一样，左没有，就跟右一样
即：上下，左右

# ④ margin 的一数值写法

/* 上右下左外边距都是10px */
margin: 10px;

# 7、margin 的塌陷

TIP

margin 塌陷也叫：外间距重叠或外边距合并或外边距穿透

# ① 兄弟元素之间，垂直方向：上下外边距出现塌陷

TIP

垂直方向的 margin 有塌陷现象，第一个元素的下外边距与第二个元素的上外边距会发生合并
小的 margin 会塌陷到大的 margin 中，从而 margin 不叠加，只以大值为准
以下两盒子之间间距为 100px ，垂直方向的 margin 不叠加，以大数为准

<style>
  .box {
    width: 200px;
    height: 100px;
  }
  .box1 {
    background-color: skyblue;
    /*下外边距 100px */
    margin-bottom: 100px;
  }
  .box2 {
    background-color: gold;
    /* 上外边距 50px */
    margin-top: 50px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

解决办法：

任何一个元素加上 display:inline-block;
把外边距只加在其中一个元素上
任意一个元素外边距换成对应的 padding

# ② margin 在水平方向：不会塌陷

TIP

margin 在水平方向不会塌陷
margin 在垂直方向出现塌陷

<style>
  span {
    border: 1px solid red;
  }

  /* 
    margin在水平方向不会塌陷
    span标签之间的距离为: 两者之和 80px 
  */
  .span1 {
    margin-right: 30px;
  }
  .span2 {
    margin-left: 50px;
  }

  /* 
    margin在竖直方向出现塌陷
    box1,box2 两盒子之间间距为 100px
    竖直方向的margin不叠加，以大数为准 
  */
  .box1 {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    margin-bottom: 100px;
  }

  .box2 {
    width: 200px;
    height: 100px;
    background-color: gold;
    margin-top: 50px;
  }
</style>

<body>
  <h1>margin 属性</h1>

  <h2>margin在水平方向：不会塌陷</h2>
  <span class="span1">我是span标签</span><span class="span2">我是span标签</span>

  <h2>margin在垂直方向：出现塌陷</h2>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

# ③ 父子元素之间，垂直方向：上外边距塌陷

TIP

当一个元素包含在另一个元素中时，如果父元素没有设置内边距或边框把外边距分隔开，它们的上外边距也会发生塌陷（合并）

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: gold;
    /* 父元素的上外边距 */
    margin-top: 20px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    /* 子元素的上外边距，此时父子元素的上边距发生塌陷（合并），最终上外边距的结果为 50px */
    margin-top: 50px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

TIP

.item 的 margin-top:50px; 发生了穿透现象（塌陷）

穿透了父元素，并与父元素上外边距发生合并，合并后以最大的值为主。
所以看到的间距并不 .item 与 .box 的间距，而是 .box 与浏览器上面产生了 50px 的间距

解决方案

给父元素加上 overflow: hidden;
给父元素添加 border 边框
将子元素的 margin 改成 padding
可以给父元添加对应的子元大小的 padding 值

还有更多方法，等我们后面学完浮动，定位之后再来讲解。

# 8、margin 负值

关于 margin 负值问题，我们留在 float 浮动讲完后再学习

# 9、去掉元素的默认样式

TIP

网页中的元素为了展示元素本身的用途和结构，都会给元素添加默认的样式。

一些元素都有默认的 margin，如下常见的默认样式
- h、body、ul、p 标签，都添加了默认的 margin。
- ul 添加了默认的 padding、list-style
- a 标签添中了默认的颜色、下划线
- 等等 ...... （后续在项目开发中还会深入所有标签的默认样式）
我们在实际的网页开发中，要将这些默认的样式清除掉，也称之为 "CSS 样式的初始化"
* 通配符选择器，表示选择所有元素（通配符有效率问题，实际工作中不使用）

/* 通配符选择器，表示选择所有元素 */
* {
  margin: 0;
  padding: 0;
}

/* 通配符有效率问题，应该使用并集选择器 */
body,
ul,
p {
  margin: 0;
  padding: 0;
}

a {
  /* 去掉下划线 */
  text-decoration: none;
  /* 颜色为黑色 */
  color: #000;
}

ul {
  /* 去掉圆点 */
  list-style: none;
}

# 10、盒子的水平居中

TIP

将盒子的左右两边的 margin 都设置为 auto ，盒子将水平居中。共有两种方法：

/* 方式一， margin: 上下0 ，左右自动 */
.box {
  margin: 0 auto;
}
/* 
	方式二，margin: 上10px 水平居中 下0px 
	第二种方法的应用场景在于，需要当前盒子距离顶部 10px, 水平居中对齐，距离底部0px 类似这样的需求时使用
*/
.box {
  margin: 10px auto 0;
}

盒子的垂直居中，需要使用绝对定位技术实现（后边会讲到）

<style>
  section {
    width: 300px;
    height: 200px;
    background-color: salmon;
    /* 盒子水平居中 */
    /* margin: 0 auto; */
    /* margin: 上150px 水平居中对齐 下0px */
    margin: 150px auto 0;
    /* 文本内容水平居中 */
    text-align: center;
    /* 文本内容垂直居中 */
    line-height: 200px;
  }
</style>

<body>
  <section>我是文档区域标签</section>
</body>

注：

margin: auto 20px; 这样写，并不会垂直居中
文字水平、图片水平居中：text-align: center;
div 块级元素水平居中，是给元素自身加上margin: 0 auto;

# 11、盒子模型占位计算

TIP

盒模型的内容区大小，可视宽高，盒模型实际占位宽度

# ① 盒模型的内容区大小

在标准盒子模型中

content 内容区，也就是盒子里面能留给子元素的宽度和高度大小,也就意味着盒子里面的内容的最大面积就是 width 和 height 形成的矩形面积。

如果只有一个子元素，子元素的宽度超过父元素，就会溢出
如果有多个子元素，子元素（行内元素，行内块元素）的宽度加起来超过了父元素，那么超过的那些子元就会换行显示

<style>
  div {
    /* 盒模型内容区大小 */
    width: 200px;
    height: 200px;
    background-color: gold;
    /* 边框 */
    border: 20px solid skyblue;
    /* 内边距 */
    padding: 50px;
    /* 外边距 */
    margin: 30px;
  }
</style>
<body>
  <div class="box">
    内容区，内容区内容区，内容区内容区，内容区内容区，内容区
  </div>
</body>

# ② 盒模型可视宽高

TIP

可视区宽 = 宽度 + 左右内边距 + 左右边框宽
可视区高 = 高度 + 上下内边距 + 上下边框宽

# ③ 盒模型实际占位宽度

TIP

实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距
实际占位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距

<style>
  .box {
    /* 内容区宽 */
    width: 100px;
    /* 内容区高 */
    height: 150px;
    /* 边框线 */
    border: 2px dashed #333;
    /* 内边距 */
    padding: 10px;
  }
  .box1 {
    /* 内容区宽 */
    width: 70px;
    /* 内容区高 */
    height: 120px;
    /* 边框线 */
    border: 5px solid skyblue;
    /* 内边距 */
    padding: 10px;
    /* 背景色 */
    background-color: gold;
  }
</style>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

如果 box1 计算得到的占位宽超过了你元素的内容区宽，就会达不到我们相要的布局效果

提示：

盒模型的内容区大小：决定了父元中的子元素能占据的最大的宽和高度
可视区占位：我们看到的这个元素在页面层现的效果的区域
实际占位宽度：决定了这个元素在父元素中的占据面积（宽和高）

# 三、box-sizing 怪异盒模型

TIP

在 CSS3 中新增了怪异盒子模型（IE 盒子模型）

# 1、box-sizing 是什么？

TIP

将盒子添加 box-sizing: border-box;属性，盒子的 width、height 数字就表示盒子实际占有的宽度（不含 margin）
即 padding、border 变为内缩的，不再外扩
box-sizing 属性 大量应用于移动网页制作中 ，因为它结合百分比布局、弹性布局等非常好用，在 PC 页面开发中使用较少
box-sizing 属性兼容到 IE9

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 10px solid skyblue;
    padding: 10px;
    margin: 100px auto;
    /* 
        添加 box-sizing 之前，box是外扩的，总宽度=240px
        添加 box-sizing 之后，变成内缩，总宽度=200px */
    box-sizing: border-box;
  }
</style>

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

添加 box-sizing: border-box; 之前

添加 box-sizing: border-box; 之后

# 2、为什么 div 和 button 按钮的大小有差别？

<style>
  .box1 {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }

  button {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }
</style>

<body>
  <div class="box1"></div>
  <button></button>
</body>

同样的代码，在 Google 浏览中为什么显示却有差异

原因：

button 按钮默认是怪异盒模型
即：自带box-sizing: box-border;属性
button 是 内缩 的，div 是 外扩 的

# 3、盒模型分为两种类型

标准盒模型

box-sizing: content-box; 盒子的大小会因为设置的内外边距和边框而变化
即：外扩

怪异盒模型

box-sizing: box-border;盒子会的实际大小是设置的大小，不会因为内外边距和边框的大小而变化，
即：内缩

# 4、标准盒模型与怪异盒模型区别

区别

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同：

标准盒模型的 width 和 height 属性的范围只包含了 content 内容区
IE 盒模型（怪异盒模型）的 width 和 height 属性的范围包含了 border、padding 和 content
尺寸计算公式：
- width = border + padding + 内容的宽度
- height = border + padding + 内容的高度
button 标签，是典型的怪异盒模型

# 5、盒模型转换

TIP

我们通过 box-sizing 属性来切换标准盒子模型与怪异盒子模型

box-sizing：content-box 是默认值，盒子以标准盒子模型特性来渲染
box-sizing: border-box 盒子以怪异盒子模型特性来渲染

<style>
  .box {
    width: 100px;
    height: 150px;
    padding: 20px;
    border: 10px;
    margin: 50px;
    /*box-sizing:borde-box;*/
  }
</style>
<body>
  <div class="box"></div>
</body>

以上代码，在两种盒子模型下渲染的效果如下

标准盒子模型	怪异盒子模型（box-sizing:borde-box;)

标准盒模型下的`width:100px;` `height:150px;` 只包含了 content 部分，所以 content 的宽高为 100px 和 150px;	怪异盒子模型：`width:100px;` `height:150px;` 包含了 border、padding、content 三部分，则通过计算得出 content 内容区的高为：`150px - 20px2 - 10px2 = 90px` 宽为：`100px - 20px2 - 10px2 = 40px`

应用场景：

如果我们期望不管内容区，边框、内边距大小如何变化，元素的可视宽高始终不变时，就可以给元素添加 box-sizing:border-box;属性，以怪异盒模型来渲染。
不管元素的占位宽如何变化，始终保持边框和内边距不变，希望通过改变内容区大小来达到目的。
常见的响应式开发中、栅格系统等。

# 四、前端切图工具

TIP

接下来我们会用 4 种相关 psd 设计稿或图片测量和切图工具，不同的工具有不同的优点

软件名称	功能	描述	官网下载地址
Snipaste	截图+贴图	个人模仿他人效果选可用	https://zh.snipaste.com/ (opens new window)
PxCook	标注+代码生成（psd)	是一款连接设计师到开发者之间的协作工具	https://www.fancynode.com.cn/pxcook/ (opens new window)
Photoshop(简称 PS）	专业的图片软件处理工具	实际企业开发设计软件	https://www.adobe.com/cn/products/photoshop.html (opens new window)
蓝湖	产品设计协作平台	实际企业团队开发协作	https://lanhuapp.com/ (opens new window)

# 1、Photoshop 设计软件

TIP

Photoshop 软件是付费版的，有版权，如果大家破解版，可以去助理老师哪获取。

安装教程

获取到软件压缩包后，解压（联系助理老师获取即可）。
一定要断网安装 ，断网后，直接点击 Set-up.exe 就可以进入安装，安装过程不需要做任何操作，等待 5-10 分钟左右就自动安装好。
安装好后，在电脑左下解的这里找到，双击就可以运行了。
ps 软件打开后，把对应的 psd 设计稿拖动到软件区域就可以了。

# 2、PxCook 像素大厨

TIP

PxCook（像素大厨）是一款连接设计师到开发者之间的协作工具。

使用 PxCook，设计师可以免去繁琐的标注功能，而前端工程师也可以更加直观的查看设计稿中的元素的内容，间距，尺寸和样式等。
同时， PxCook 可以为工程师直接呈现选中元素的多平台样式代码和素材切图。

# ① 工具的安装

进入 PxCook 像素大厨的官网

网址：https://www.fancynode.com.cn/pxcook/ (opens new window)，点击立即下载

下载好的压缩包直接双击安装就可以了

# ② 工具的使用

官方教程

地址：https://www.fancynode.com.cn/pxcook/docs?ids=qa/pay (opens new window)

（1）如何新建项目
（2）代码生成
（3）自动标注
（4）智能标注
（5）单位换算

# 3、PS 与 PxCook 配合

切图的标记与尺寸制定

设计师用 PS 设计稿设计好 PSD 的效果图后，接下来的工作就是交给程序员来开发成网页。
首先程序员需要把 PSD 设计稿按开发的需求来标记切图，导出需要的图片素材

# ① 标记切图

TIP

在 Photoshop 的右侧边栏，找到PxCook-切图面板。
选中想要切图的图层或者 图层组 ，然后点击切图面板上的 标记为切图 按钮。
当被标记为切图后，将在图层前面增加 p:: 作为标记。如果要取消切图，点击 取消标记 即可。

# ② 自定义切图的尺寸

TIP

需要确保被标记的图层为 图层组 ，如果不是图层组的话，需要将指定的图层进行打组（选中图层，按快捷键 ctrl+G 来为当前图层创建图层组)。
之后我们在组内创建一个名为 @bounds 或 # 的图层，通过 矩形工具，在该图层内绘制一个矩形来描述要切出切片的范围，如下所示：

这样，上图中的 heart_icon 图层组即会按照组内的 @bounds 图层的范围来进行切图了。

# 五、针对性案例训练（作业）

利用学过的知识来开发以下效果

要求：利用 PS 与 PxCook 结合，将以下 PSD 设计稿用代码以 1:1 还原成网页

# 1、商品卡片布局

点击查看源代码

<style>
  body,
  p {
    margin: 0;
  }
  a {
    text-decoration: none;
  }
  .goods {
    border: 1px solid #666;
    width: 150px;
    padding: 10px;
    margin: 20px auto 0;
  }
  .goods .title {
    color: #666;
    font-size: 12px;
    line-height: 20px;
    height: 40px;
  }
  .goods .price {
    margin-top: 6px;
    color: #e1251b;
    font-weight: 700;
  }
  .goods .price i {
    font-size: 12px;
    font-style: normal;
  }
  .goods .price span {
    font-size: 12px;
    font-weight: 400;
  }
  .img {
    /* 去掉图片与下面标题的空隙-下节课程中会讲到 */
    display: block;
  }
</style>
<body>
  <div class="goods">
    <a href="">
      <img src="./images/img1.webp" alt="" />
      <p class="title">iSeeJplus山茶花智能眼部按摩器护眼仪</p>
      <p class="price"><i>￥</i>679.<span>00</span></p>
    </a>
  </div>
</body>

# 2、利用 CSS 绘制小三角形（视频）

点击查看完整版视频讲解

# 3、利用 CSS 开发新闻列表（视频）

点击查看完整版视频讲解

← CSS 文本和字体属性、列表属性 CSS display 属性、背景属性、其他常用属性 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# CSS 盒子模型

# 一、盒子模型简介

# 二、盒模型的属性

# 1、width 和 height 属性 - 宽和高

# ① width 属性

# ② height 属性

# ③ 总结：width 和 height 的特性

# 2、border 属性 - 边框

# ① 边框的三要素小属性

# ② 四个方向的边框

# ③ 四个方向的边框的三要素小属性

# ④ 去掉边框

# ⑤ 边框应用场景 - 制作三角形

# ⑥ 圆角 border-radius 属性

# 3、padding 属性 - 内边距

# 4、padding 的不同数值写法

# ① padding 的四数值写法

# ② padding 的三数值写法

# ③ padding 的二数值写法

# ④ padding 的一数值写法

# ⑤ padding 属性应用场景

# ⑥ 快速灵活设置 padding 属性

# 5、margin 属性 - 外边距

# margin 有四个方向

# 6、margin 的不同数值写法

# ① margin 的四数值写法

# ② margin 的三数值写法

# ③ margin 的二数值写法

# ④ margin 的一数值写法

# 7、margin 的塌陷

# ① 兄弟元素之间 ，垂直方向：上下外边距出现塌陷

# ② margin 在水平方向：不会塌陷

# ③ 父子元素之间，垂直方向：上外边距塌陷

# 8、margin 负值

# 9、去掉元素的默认样式

# 10、盒子的水平居中

# 11、盒子模型占位计算

# ① 盒模型的内容区大小

# ② 盒模型可视宽高

# ③ 盒模型实际占位宽度

# 三、box-sizing 怪异盒模型

# 1、box-sizing 是什么 ？

# 2、为什么 div 和 button 按钮的大小有差别 ？

# 3、盒模型分为两种类型

# 4、标准盒模型与怪异盒模型区别

# 5、盒模型转换

# 四、前端切图工具

# 1、Photoshop 设计软件

# 2、PxCook 像素大厨

# ① 工具的安装

# ② 工具的使用

# 3、PS 与 PxCook 配合

# ① 标记切图

# ② 自定义切图的尺寸

# 五、针对性案例训练（作业）

# 1、商品卡片布局

# 2、利用 CSS 绘制小三角形（视频）

# 3、利用 CSS 开发新闻列表（视频）

# ① 兄弟元素之间，垂直方向：上下外边距出现塌陷

# 1、box-sizing 是什么？

# 2、为什么 div 和 button 按钮的大小有差别？