CSS 学习笔记 (2) 盒子模型

盒子模型由内到外分别是盒子内容、内边距（padding）、边框（border）、外边距（margin）。

内边距填充盒子内容和边框之间的空隙，外边距填充不同元素（盒子）之间的空隙。

边框

基础语法

.box {
    border: 1px solid red; /* 粗细 样式 颜色 */
}

• 三个属性用空格分开，没有先后顺序。

• 如果想给四条边设置不同样式，可以通过 border-top, border-bottom, border-left, border-right 指定。

• 常见样式有实线、虚线、点线三种。

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

小技巧：如果 \(3\) 条边属性相同，另一条边属性不同，可以这样写：

.box {
 border: 2px solid grey;
 border-top: 4px solid orange;
}

这是因为相同优先级的属性，后面会覆盖前面。

圆角边框

.box {
    border-radius: 10px;
    border-radius: 50%;
}

border-radius 的属性值可以是具体数值或百分比，前者为圆角半径，后者常用 50% 生成圆形或椭圆形边框。

border-radius 也可以接受多个参数：

.box {
    border-radius: 10px 20px;           /* 左上右下,右上左下   */
    border-radius: 10px 20px 30px;      /* 左上,右上左下,右下  */
    border-radius: 10px 20px 30px 40px; /* 左上,右上,右下,左下 */
}

记忆：从左上角开始，顺时针赋值给每个角，未赋值的和对角线相同。

内边距

.box {
    padding: 30px;
}

与边框类似，可以通过 padding-top 等给每个方向设置内边距。

padding 接受多个值的规则：

.box {
    padding: 10px;                /* 上下左右    */
    padding: 10px 20px;           /* 上下,左右   */
    padding: 10px 20px 30px;      /* 上,左右,下  */
    padding: 10px 20px 30px 40px; /* 上,右,下,左 */
}

记忆：从上边开始，顺时针赋值给每条边，未赋值的和对边相同。

外边距

.box {
    margin: 30px;
}

与内边距类似，可以通过 margin-top 等给每个方向设置外边距，也可以接受多个值。

小技巧： margin: 0 auto; 可以实现水平居中。

如果将 margin-left 设为 auto ，那么左外边距会足够大，从而将盒子推到屏幕右侧。

如果将左右都设为 auto ，那么左右会平均且充分占据剩余空间，从而实现水平居中。

外边距合并

两个并列的块级元素，如果上面的元素设置了 margin-bottom 下面的元素设置了 margin-top ，它们之间的距离会取两者较大值。

外边距塌陷

<style>
    .box1 {
        height: 200px;
        width: 200px;
        background-color: red;
    }
    .box2 {
        height: 100px;
        width: 100px;
        background-color: blue;
        margin: 30px;
    }
</style>
<div class="box1">
    <div class="box2"></div>
</div>

对于上述代码，我们希望子容器到父容器有 30px 的外边距，但实际情况是父容器继承了 30px 的上外边距，另外三条边仍然对子容器生效，这种现象称为外边距塌陷。

解决方法有三种：

• 给父容器添加上边框。
• 给父容器添加上内边距。
• 给父容器添加 overflow: hidden; 属性。

尺寸计算

默认情况下，盒子实际的高为： height 属性值（内容宽度） + 上下内边距 + 上下边框。宽度同理。

如果给定盒子实际尺寸，我们希望在调整内边距和边框大小时能自适应内容大小，如何实现？

这就需要用到 box-sizing 属性，它的取值如下：

属性值	效果
context-box	默认值， height 和 weight 表示内容尺寸
border-box	height 和 weight 表示盒子整体尺寸

.box {
    box-sizing: border-box;
    height: 200px;
    width: 200px;
    background-color: red;
    padding: 10px;
    border: 5px solid black
}

比如上面这段代码，内容大小为 \(200-2\times 10-2\times 5=170\) 像素。

背景

背景颜色 & 图片

.box {
    background-color: red;
    background-image: url(image.jpg);
}

• 背景颜色的属性值可以是颜色名称、 16 进制表示、 rgb 、 rgba 。
• 背景图片的属性值为 url() ，括号内填写图片路径。

背景摆放

.box {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

background-repeat 属性值	描述
repeat	默认值， x 轴和 y 轴都会重复
repeat-x	仅 x 轴重复
repeat-y	仅 y 轴重复
no-repeat	不重复

原点在左上角， x 轴从左到右， y 轴从上到下。

---

background-position 属性接受两个参数，分别表示 x 轴和 y 轴的偏移量，默认为 left top 或 0% 0% 。

background-position 属性值	描述
像素	图片沿 x 轴和 y 轴偏移距离
百分比	0% 表示顶住上界（或左边）， 100% 表示顶住下界（或右边），中间均匀变化。
方位名词	top/bottom/left/right 表示紧贴容器壁， center 表示居中。

如果只写一个参数，则表示 x 轴的偏移量， y 轴偏移量默认为 center 。

因此如果想要将图片放在容器中心，只需写一个 center 。

---

background-size 属性值	描述
auto	默认值，无缩放
cover	等比例缩放到刚好覆盖整个容器，超出部分会裁剪
contain	等比例缩放到刚好塞进整个容器，空余部分会留白
像素/百分比	给出图片宽度，等比例缩放，即第二个值默认为 auto
auto 像素/百分比	给出图片高度，等比例缩放
像素/百分比 像素/百分比	给出图片高度和宽度，可能会导致图片变形

---

常见搭配如下：

.box1 {
    background-image: url(image1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.box2 {
    background-image: url(image2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

在容器 box1 中，图片覆盖整个容器，且居中显示保证中心内容被展示，可以认为被裁剪掉的边缘区域无关紧要。

在容器 box2 中，图片能完整展现出来，水平居中且竖直靠上使得留白部分具有对称美感。

背景滚动

.box {
    background-attachment: fixed;
}

background-attachment 有两个属性值： scroll （默认）和 fixed ，分别表示随滚轮滚动和固定在视口某个位置。

Warning：

• 当 background-attachment 属性值为 scroll 时， background-position 的参考对象是容器。
• 当 background-attachment 属性值为 fixed 时， background-position 的参考对象是当前视口。

.box {
    background-position: center;
    background-attachment: fixed;
}

比如上面这段代码，图片被固定在视口中央，但只有图片与容器交集的部分被显示出来。

背景样式简写

背景样式可以一行写完： background: 颜色 图片 重复 固定 位置/尺寸 。

• 不同属性值顺序无关。
• 位置和尺寸之间必须用斜杠隔开。

示例：

.box {
    background: red url(image.jpg) no-repeat center/cover
}

这段代码给容器设置了红色背景，图片不重复且随滚轮滚动（ scroll 为默认值），居中展示且填满整个容器。

背景渐变

语法：给 background 或 background-image 属性添加 linear-gradient 或 radial-gradient，第一个参数为渐变方向，后面若干个参数表示颜色（必选）和位置（可选）。

linear-gradient 渐变方向示例	描述
to bottom	默认值， to 表示向哪个方向渐变
90deg	角度值从 12 点方向顺时针旋转，等价于 to right

示例：

.box {
    background: linear-gradient(#56ccf2,#2f80ed);
    background: linear-gradient(to right,#8f00ff,#4b0082,#0000ff,#00ffff,#00ff00,#ffff00,#ff7f00,#ff0000);
    background: linear-gradient(to bottom right, #0894ff 0%, #c959dd 34%, #ff2e54 68%, #ff9004);
}

第一个例子来自 https://uigradients.com/#BlueSkies ，从上往下分别是 #56ccf2 （浅蓝色）和 #2f80ed （深蓝色）。

第二个例子展示了可见光谱颜色，从左往右分别是紫、靛、蓝、绿、黄、橙、红。

第三个例子来自 https://www.apple.com.cn/macbook-pro/ ，从左上到右下，初态 #0894ff ，在 34% 位置为 #c959dd ，在 68% 位置为 #ff2e54 ，终态 #ff9004 。

温馨提示：

• 虽然我们在控制颜色变化，但修改的是 background-image 属性（进而可以简写成 background ），对 background-color 进行修改没有任何作用。
• https://uigradients.com 中有很多渐变颜色，如果不知道什么颜色好看可以前去参考。

---

radial-gradient 渐变方向示例	描述
ellipse at center	默认值，以椭圆向外扩散
circle	以圆形向外扩散，等价于 circle at center
closest-side	渐变结束形状内切于短边，剩余部分用终态颜色填充
closest-corner	渐变结束形状与最近的一个角相交
circle farthest-side	渐变结束形状内切于长边（椭圆形渐变 closest-side 和 farthest-side 没区别）
farthest-corner	渐变结束形状与最远的一个角相交（初态在中心时 closest-corner 和 farthest-corner 没区别）

文字渐变

.box {
    background: linear-gradient();
    background-clip: text;                /* 将背景按文字裁剪 */
    -webkit-background-clip: text;        /* 兼容性写法,和上一句等价 */
    -webkit-text-fill-color: transparent; /* 将文字填充色设为透明 */
}

原理：由于文字透明，所以会显示背景色；而背景刚好是文字区域，所以显示出渐变效果。

上面四句话顺序不建议调换。

阴影

.box {
    box-shadow: 0 0 10px 20px rgba(0,0,0,0.2);
}

\(5\) 个参数分别表示 x 轴偏移、 y 轴偏移、模糊半径、扩散半径、阴影颜色。

过渡

过渡常和 hover 伪类搭配使用，基础语法 tranisition: [属性名] [过渡时间] 。

注意是给初始容器（而不是伪类）添加样式，这样鼠标悬浮和移开时都会有过渡效果。

实际开发中，第一个参数一般是 all 。

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 2s;
}
.box:hover {
    background-color: blue;
}