5、去掉元素的默认样式¶

TIP

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

以下是常见元素对应的默认样式
- body、h1~h6、ul、p、dl、dd 标签，都添加了默认的 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;
}

6、盒子模型占位计算¶

TIP

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

6.1、盒模型内容区大小¶

在标准盒子模型中

盒模型内容区是指元素的 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>

下图中红色矩形区为内容区大小 ![[Pasted image 20260225104529.png]]

6.2、盒模型可视区大小¶

在标准盒子模型中

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

盒子模型可视区大小 = 可视区宽和可视区高形成的矩形区域大小

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

下图中蓝色矩形区域为可视区大小 ![[Pasted image 20260225104639.png]]

6.3、盒模型实际占位大小¶

在标准盒子模型中

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

盒子模型实际占位大小 = 实际占位宽和实际占位高形成的矩形区域大小

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

下图中黑色矩形区域为实际占位大小 ![[Pasted image 20260225104756.png]]

6.4、三者的关系¶

提示：

盒模型的内容区大小
- 决定了该元素中的子元素能占据的最大的宽度和高度（也就是子元素总占位大小）
- 如果只有一个子元素，子元素的宽度超过父元素，就会溢出
- 如果有多个子元素（子元素为行内元素），子元素的宽度加起来超过了父元素，那么超过的那些子元素就会换行显示
可视区占位
- 决定了这个元素在页面层现的视觉效果大小
实际占位宽度：
- 决定了这个元素在父元素中的实际占位大小，如果超过了父元素的内容区大小，则会溢出。

<style>
  .box {
    /* 内容区宽 */
    width: 200px;
    /* 内容区高 */
    height: 250px;
    /* 边框线 */
    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>

![[Pasted image 20260225104921.png]] 注：

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

三、box-sizing 怪异盒模型¶

TIP

在 CSS3 中新增了怪异盒子模型 (IE 盒子模型)

1、标准盒模型与怪异盒模型区别¶

区别

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

标准盒模型的 width 和 height 属性的范围只包含了 content 内容区
IE 盒模型 (怪异盒模型) 的 width 和 height 属性的范围包含了 border、padding 和 content
- width = border + padding + 内容的宽度
- height = border + padding + 内容的高度
在怪异盒模型下，设置 width 和 height 属性后，内容区宽和高是被自动计算得到的
- 内容的宽度 = width - border - padding
- 内容的高度 = height - border - padding
button 标签，是典型的怪异盒模型

<style>
  /* button的可视宽高 为 100px */
  button {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 20px solid red;
  }
  /* div的可视宽高为 100+10 * 2+10 * 2=140px */
  div {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    padding: 10px;
  }
</style>
<body>
  <button>button</button>
  <hr />
  <!-- 画了一水平线 -->
  <div>div</div>
</body>

![[Pasted image 20260225105353.png]]

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

原因：

button 按钮默认是怪异盒模型
即：自带 box-sizing: border-box;属性

2、盒模型转换¶

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:border-box;*/
  }
</style>
<body>
  <div class="box"></div>
</body>

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

标准盒子模型	怪异盒子模型 (box-sizing:border-box;)
![[Pasted image 20260225110026.png]]	![[Pasted image 20260225110107.png]]
标准盒模型下的 `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 设计稿进行测量和标注切图等功能

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

1、Snipaste 截图 + 贴图¶

TIP

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上！

Snipaste 官网：https://zh.snipaste.com/
进入官网，下载 Snipaste 软件包，双击软件包，即可安装好。

Snipaste 的简单使用

按下 F1 来开始截图，再按 F3 ，截图就在桌面置顶显示了
详细的使用教程，看官方文档：https://docs.snipaste.com/zh-cn/

2、PxCook 像素大厨¶

TIP

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

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

2.1、工具的安装¶

TIP

进入 PxCook 像素大厨的官网
网址：https://www.fancynode.com.cn/pxcook/，点击立即下载
也可以在钉钉群文件中下载即可（联系客服老师） ![[Pasted image 20260225110229.png]] 下载好的压缩包直接双击安装就可以了

2.2、工具的使用¶

TIP

工具的具体使用，看老师的讲解视频

![[Pasted image 20260225110508.png]]

3、Photoshop 测量与切图¶

Photoshop 工具使用

4、Photoshop 和蓝湖结合测量与切图¶

TIP

Photoshop 和蓝湖工具，钉钉群文件中有详细视频讲解（或联系助理老师获取）

Photoshop 与蓝湖的结合使用

五、针对性案例训练¶

TIP

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

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

1、商品卡片布局¶

![[Pasted image 20260225111349.png]]

<style>
  body {
    font: 12px/1 "Microsoft YaHei";
  }
  h3,
  p {
    margin: 0;
  }
  a {
    text-decoration: none;
    /* border: 1px solid red; */
    display: block; /* 变成块级元素 */
  }
  .goods {
    width: 150px;
    /* height: 200px; 后面再去掉 */
    border: 1px solid #666666;
    padding: 10px;
  }
  .goods img {
    /* border: 1px solid red; */
    display: block;
  }
  .goods h3 {
    /* border: 1px solid red; */
    font-size: 12px;
    color: #666666;
    font-weight: 400;
    /* font-family: Microsoft YaHei; */
    line-height: 18px;
    margin-top: 2px;
  }
  .goods p {
    font-size: 16px;
    color: #e1251b;
    line-height: 23px;
    font-weight: 400;
    /* font-family: Microsoft YaHei; */
    /* border: 1px solid red; */
    margin-top: 9px;
  }
  .goods p span {
    font-family: Arial;
    font-weight: 400;
    font-size: 12px;
    /* color: #E1251B; */
    line-height: 18px;
    margin-right: 2px;
  }
  .goods p .sp2 {
    font-family: Microsoft YaHei;
    margin-right: 0;
  }
</style>

<div class="goods">
  <a href="http://arryblog.com">
    <img src="./images/img1.png" alt="" />
    <h3>iSeeJplus山茶花智能眼部按 摩器护眼仪</h3>
    <p><span class="sp1">¥</span>679.<span class="sp2">00</span></p>
  </a>
</div>

2、 CSS 边框实现三角形¶

![[Pasted image 20260225111454.png]]

<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>

5、去掉元素的默认样式¶

6、盒子模型占位计算¶

6.1、盒模型内容区大小¶

6.2、盒模型可视区大小¶

6.3、盒模型实际占位大小¶

6.4、三者的关系¶

三、box-sizing 怪异盒模型¶

1、标准盒模型与怪异盒模型区别¶

2、盒模型转换¶

四、前端测量、切图工具¶

1、Snipaste 截图 + 贴图¶

2、PxCook 像素大厨¶

2.1、工具的安装¶

2.2、工具的使用¶

3、Photoshop 测量与切图¶

4、Photoshop 和 蓝湖结合测量与切图¶

五、针对性案例训练¶

1、商品卡片布局¶

2、 CSS 边框实现三角形¶

4、Photoshop 和蓝湖结合测量与切图¶