Day05：盒子模型

目标：掌握盒子模型组成部分，使用盒子模型布局网页区域

一、选择器

1、结构伪类选择器

作用：根据元素的结构关系查找元素。

选择器	说明
E:first-child	查找第一个 E 元素
E:last-child	查找最后一个 E 元素
E:nth-child(N)	查找第 N 个 E 元素（第一个元素 N 值为1），当 N 小于等于 0 时，意味着找不到元素

/* 下面两个 CSS 代码效果一样，都是将第一个 li 元素背景色设置为绿色  */
li:first-child {
  background-color: gree;
}

li:nth-child(1) {
  background-color: gree;
}

:nth-child(公式)

公式	功能
2n	偶数标签
2n+1或2n-1	奇数标签
n+5	找到第 5 个以后的标签
-n+5	找到第 5 个以前的标签

提示：公式中的 n 取值从 0 开始。当公式的计算结果小于等于 0 时，和上面的 N 一样，意味着找不到该 CSS 作用的元素，设置不起作用，只有当公式的计算结果大于等于 1 时，才能找到作用的元素。n 从 0 开始，但是公式的计算结果所作用的元素，从 1 开始。

2、伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在 E 元素最前面添加一个伪元素
E::after	在 E 元素最后面添加一个伪元素

div::before {
  content: "before 伪元素";
  font-size: 20px;
  color: red;
}
div::after {
  content: "after 伪元素";
}

注意点：

• 必须设置 content: ""属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
• 伪元素默认是行内显示模式
• 权重和标签选择器相同

注意区别：伪元素选择器和伪类选择器

/* 伪元素选择器，2个冒号，在 a 元素前面添加颜色红色，字号20px的‘hello‘的文字 */
div::before {
  content: "";
  font-size: 20px;
  color: red;
}

/* 伪类选择器，1个冒号，当鼠标放在 div 标签上时，div 标签背景色变为黄色  */
div:hover {
  background-color: yellow;
}

二、PxCook 像素大厨

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

• 开发面板（自动智能识别）
• 设计面板（手动测量尺寸和颜色）

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

这里不过多解释，相信聪明的你操作几次就明白了，直接放下载链接：

Mac 电脑下载链接：点击下载Mac版本

Windows 电脑下载链接：点击下载Windows版本

三、盒子模型

作用：布局网页，摆放盒子和内容。

1、盒子模型-组成

• 内容区域 – width & height
• 内边距 – padding（出现在内容与盒子边缘之间）
• 边框线 – border
• 外边距 – margin（出现在盒子外面）

2、边框线

四个方向的边框线

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

线条样式	属性值
实线	solid
虚线	dashed
点线	dotted

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

单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl，border-left）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

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

3、内边距

作用：设置 内容 与 盒子边缘 之间的距离。

• 属性名：padding / padding-方位名词

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

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

• padding 多值写法

取值个数	示例	含义
一个值	padding:10px	四个方向内边距均为10px
两个值	padding:10px 80rpx	上下：10xp，左右：80px
三个值	padding:10px 40px 80px	上：10px，左右：40px，下：80px
四个值	padding:10px 20px 40px 80px	上：10px，右：20px，下：40px，左：80px

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

4、盒子尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论：给盒子加 border / padding 会撑大盒子

解决：

• 手动做减法，设置盒子 width 和 height 时减掉 border / padding 的尺寸
• 內减模式：box-sizing: border-box

5、外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同，margin、margin-方位名词、一个值、两个值、三个值、四个值。计算盒子尺寸不带外边距 margin。

6、版心居中

关键代码：设置盒子的宽度，左右 margin 值 为 auto。

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

7、清除默认样式

有些标签带有默认样式，比如：h1、li 标签等，在实际开发中，默认样式不太美观，我们需要清除这些标签的默认样式。

这里先简单的讲解一下清除默认样式，在实际开发中，可以创建一个 CSS 文件，用来清除默认样式，并设置我们需要的基础样式，比如全局文字的字体、字号、颜色、修改 a 标签的样式等等。等基础知识讲解完，实战时再完善这一块知识。

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

*{ } 通配符选择器，在 Day03 讲过。

8、元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

9、外边距问题

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

.one {
  width: 100px;
  height: 100px;
  background-color: brown;
  margin-bottom: 80px;
}

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

/* 两个板块之间的间距是 80px，而不是 130px */

外边距塌陷

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

.father {
  width: 300px;
  height: 300px;
  background-color: pink;
}

/* 本来设置子级的 margin-top 想让子级距离顶部 50px */
/* 结果子级设置 margint-top 带着父级一起下移 50px  */
.son {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-top: 50px;
}

解决方法：

• 取消子级 margin，父级设置 padding
• 父级设置 overflow: hidden
• 父级设置 border-top

四、行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，在竖直方向不起作用，即 margin-top、maring-bottom、padding-top、padding-bottom 不起作用，水平方向的设置起作用。

解决方法：

• 可以通过设置 display 属性修改行内元素的显示模式。（常用）
• 如果项目中修改 display 属性可能导致其他问题，可以给行内元素添加 line-height 属性，手动设置行内元素的高度，这样竖直方向的 padding 就起作用了，但是 margin 仍不起作用，并且 line-height 设置的高度要高于（padding-top + content高度 + padding-bottom ）的总高度，否则页面显示会出问题。

五、圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字 + px / 百分比

提示：属性值是圆角半径

圆角的多值写法和 padding 一样，支持 1个参数、2个参数、3个参数 和 4个参数。从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

img {
  width: 200px;
  height: 200px;
  /* 正方形切成圆形，border-radius 设置为宽度的一半或50%  */
  border-radius: 100px;
  border-radius: 50%;
}

六、盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X 轴偏移量 和 Y 轴偏移量 必须书写
• 最后一个参数设置阴影类型是内阴影还是外阴影，默认是外阴影，内阴影需要将最后一个参数设置为 inset

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

乾坤未定，你我皆是黑马