CSS（盒子模型）

1.盒子模型

1.1组成以及边框设置

1.1.1盒子类型：区块盒子（块级盒子）和行内盒子（内联盒子）

1.1.1盒子类型

区块盒子（块级盒子）和行内盒子（内联盒子）注意：区块盒子一行只能放一个盒子。

注意：区块盒子一行只能放一个盒子。

1.1.2盒子模型组成

下面通过一个完整的 HTML/CSS 示例，演示边框（border）的宽度、样式和颜色设置：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>边框（border）设置示例</title> <style> /* 边框宽度：border-width，单位可以是 px、em 等 */ .box1 { border-width: 5px; /* 设置边框宽度为 5px */ border-style: solid; /* 设置边框样式为实线 */ border-color: #ff0000; /* 设置边框颜色为红色 */ } /* 边框样式：border-style，可选值有 solid（实线）、dashed（虚线）、dotted（点线）等 */ .box2 { border: 3px dashed #0000ff; /* 速写：宽度 3px、虚线、蓝色 */ } /* 边框颜色：border-color，支持颜色名、十六进制、rgb 等 */ .box3 { border: 2px solid rgb(0, 128, 0); /* 速写：宽度 2px、实线、绿色 */ } /* 分别设置四个方向的边框 */ .box4 { border-top: 4px solid #ff6600; /* 上边框：橙色 */ border-right: 4px solid #00ccff; /* 右边框：浅蓝 */ border-bottom: 4px solid #cc00ff; /* 下边框：紫色 */ border-left: 4px solid #ffcc00; /* 左边框：黄色 */ } </style> </head> <body> <div class="box1">实线红色边框</div> <div class="box2">虚线蓝色边框</div> <div class="box3">实线绿色边框</div> <div class="box4">四边不同颜色边框</div> </body> </html>

代码说明：

• border-width：控制边框的粗细，常用单位是 px。
• border-style：控制边框的样式，常用值有 solid（实线）、dashed（虚线）、dotted（点线）。
• border-color：控制边框的颜色，支持颜色名、十六进制、rgb 等写法。
• border 速写：可以一次性设置宽度、样式和颜色，如border: 3px dashed #0000ff;。
• 也可以分别设置上、右、下、左四个方向的边框，如border-top、border-right等。

1.1.3详细介绍盒子模型组成部分

边框

速写：bl 得到：border-left

将光标定位到代码处，Alt+↑，代码可以上移一行

代码辨析：

border:4px solid #e5f0dc;

border-top:5px solid #72c926;

border-top:5px solid #72c926;

border:4px solid #e5f0dc;

可见优先级相同，且具有层叠性

圆角边框

值越大，圆角越大

圆形：

width: 200px;

height: 200px;

border-radius: 10px;

宽度高度都是200px, 当border-radius为100px时，盒子形状变为圆形；

或者不用计算，border-radius为50%，也会变成圆形。

胶囊按钮：

width: 200px;

height: 80px;

border-radius: 40px;

border-radius为height or width的一半，即可实现(按照高或者宽中较小的一个即可，因为即使设置超过了，如此时设置为100px，它所展示出来的依旧是40px，取的是较小的height的一半)

总结：

圆型图片：

.radius6 {

width: 200px;

height: 200px;

border-radius: 50%;

}

<img src="../img/img.jpg" alt="" class="radius6">

不规则圆角边框：

内边距

内边距 (padding) 位于边框和内容区域之间。

使用场景： 1. 让盒子内容和边框保留一定距离，更美观

内边距 (padding) 多个值用空格隔开。 顺时针记忆

注意：border-radius主要以对角线；padding，margin主要以对称。

代码：（注意看宽 高 内边距 具体指的哪个位置）

.box1 {

width: 200px;

height: 200px;

background-color: pink;

padding: 10px;

}

外边距

外边距 (margin) 外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。

使用场景： 1. 让元素与元素保留一定距离，更美观

代码：

.box1 {

background-color: pink;

margin: 10px 20px 30px 40px;

}

技巧：

1.区块元素可以利用marign实现水平居中

块级盒子必须有宽度（否则默认与浏览器宽度相同）；

只需要设置左右外边距为auto就可以（只写margin：auto；也是可以的，0可以省略）。

常见：margin：0 auto；

2.行内盒子可以利用块级盒子实现水平居中

p{

text-align:center;

}

<p><span>123</span></p>

效果：

外边距折叠：区块元素上下外边距会出现折叠（合并）情况。

发生条件：1.并列关系(兄弟）的区块元素。

2.两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距

解决方案：这个是浏览器特性，我们只设置一个盒子外边距即可。

外边距塌陷：区块元素上下外边距会出现塌陷情况。

发生条件：1.嵌套关系(父子）的区块元素。

2.给子盒子设置上下外边距会让父盒子塌陷移动。

.father {

width: 500px;

height: 500px;

background-color: rgb(255, 196, 0);

}

.son {

width: 200px;

height: 200px;

background-color: purple;

margin-top: 50px;

}

我们想要： 我们得到：

解决方案：

1. 给父盒子添加上边框。（父盒子本身有边框则不会出现问题）

2. 给父盒子添加上内边距。（同理）

3. 给父盒子添加：overflow: hidden;属性

注意：img是特殊的行内可替换元素，可以用margin，不会发生塌陷！

尺寸计算

在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。这样我们在计算盒子大小的时候都会带来困扰。

box-sizing用于定义元素的 盒模型计算方式，控制元素的 width 和 height 是否包含padding 和border

语法：

实际开发中，我们也更提倡使用border-box，可以直接让所有标签修改。

代码示例：

代码解释：(指空格)

body*, body*:before, body*:after {}

body——标签，——后代选择器，*——body里面的所有标签，,——并集选择器连接符，

*：before和*：after——body里的所有伪元素，现在的写法都是双冒号：：

1.2盒子背景（background）

background用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等

使用场景

1. 给盒子添加背景图片，更加精美

2. 给列表添加相同的小图标，装饰效果

3. 给页面添加大的背景图片展示更震撼

4. 纯CSS实现背景渐变效果

属性

注意：1. 背景固定是相对于当前页面视口来说的，并不是某个盒子。

如background-position写的center center；且background-attachment写的fixed，那么图片就会出现在视口（浏览器页面）中心且图片随着滑动而逐渐显示或消失。

2.background-position可以用方位名词top bottom left right center eg：右下 right bottom

3.background-position如果只写一个值，则第二个值是y省略了，y轴默认是center

4.background-size ： contain（包含）与图片大小有关，可能会有空白区域，图片会完整显示，极有可能等比例拉伸导致覆盖盒子宽或者高

复合语法：盒子背景（background）

background: 颜色 图片 重复 固定 位置/尺寸 ; 顺序无关

注意：位置和尺寸之间要加写个/

视差滚动案例

代码：

html,

body{

height: 100%;

width: 100%;

}

效果：

无此代码的效果：

代码作用：让html元素和body占满整个屏幕，和当前可视区一样大

辨析：

section[class^="section"] 与 section[class^="section"]

section[class^="section"]：同一个元素，它既是<section>标签，又满足class以section开头。

section[class^="section"]：选中所有<section>元素内部的后代元素，并且这些后代元素的class以section开头。

1.2.1背景渐变

在 CSS 中，可以通过linear-gradient（线性渐变）和radial-gradient（径向渐变）为元素添加渐变背景

写background或者background-image都可以

线性渐变

1. 方向。 可以是方位名词， 也可以是deg(角度）

to right 从左往右

to top 从下往上

90deg 以时针0点/12点为起点，顺时针转九十度，也就是向右

45deg 也就是四十五斜上出发（东北四十五度）

2. 位置。色标的位置。不是必须写的。

background: linear-gradient(45deg, red40%, blue60%);

background: linear-gradient(45deg, red50%, blue50%);

使用技巧： 1. 实际开发，UI设计稿可以直接复制即可

2. 可以利用trae 图片自动生成

径向渐变

格式：

radial-gradient( 形状 大小 at 位置 , 颜色1, 颜色2, ... ) └────── 第一个逗号之前 ──────┘

形状：

circle	正圆。从中心向四周以相同半径扩散。
ellipse	椭圆。水平半径和垂直半径可以不同，是默认形状。

大小：

决定渐变结束形状有多大（大小控制“100% 色标”落在哪里。它分成两类：关键字大小和显式尺寸。）

1.关键字大小

closest-side	渐变碰到最近的边。圆形时半径等于中心到最近边的距离；椭圆时两个轴分别碰到最近的左右边和上下边。
farthest-side	渐变碰到最远的边。圆形时半径等于中心到最远边的距离；椭圆时两个轴分别碰到最远的左右边和上下边。
closest-corner	渐变碰到最近的角。圆形时半径等于中心到最近角的距离；椭圆会调整两轴，使椭圆刚好经过最近角。
farthest-corner	渐变碰到最远的角。圆形时半径等于中心到最远角的距离；椭圆会调整两轴，使椭圆刚好经过最远角。这是默认值。

示例：radial-gradient(circleclosest-sideat center, red, blue);
radial-gradient(ellipsefarthest-cornerat center, red, blue);
radial-gradient(circleclosest-cornerat top left, red, blue);
radial-gradient(ellipsefarthest-sideat 20% 80%, red, blue);

2.显示尺寸（这里加了circle和ellipse，是便于理解含义，它们是属于形状属性的）

circle 100px	正圆，半径固定为100px。不管容器多大，从中心向外 100px 处就是 100% 色标。
circle 10rem	正圆，半径固定为10rem。单位可以是px、rem、em、vw、vh等长度。
ellipse 50% 30%	椭圆。第一个值50%是水平半径，相对于容器宽度；第二个值30%是垂直半径，相对于容器高度。
ellipse 100px 200px	椭圆，水平半径100px，垂直半径200px。
ellipse 30vw 40vh	椭圆，水平半径30vw，垂直半径40vh。

示例：radial-gradient(circle100pxat center, red, blue);
radial-gradient(ellipse50% 30%at center, red, blue);
radial-gradient(circle10remat 20px 30px, red, blue); 其中1rem=16px

at 位置

1.关键字

可选值	含义
left	水平靠左
center	水平居中或垂直居中
right	水平靠右
top	垂直靠上
bottom	垂直靠下

注意：可以叠加使用，如at top left（左上角） at top center（顶部中间）

2.百分比

可选值	含义
at 0% 0%	左上角
at 50% 50%	正中心
at 100% 100%	右下角
at 20% 80%	水平 20%，垂直 80%
at 100% 0%	右上角
at 0% 100%	左下角

第一个值是水平位置，第二个值是垂直位置。百分比相对于容器宽高。

只写一个百分比时，第二个值默认center：

at 100px /* 等价于 at 100px center */

3.长度

可选值	含义
at 0 0	左上角
at 20px 50px	距左 20px，距顶 50px
at 10rem 2rem	距左 10rem，距顶 2rem
at 30vw 40vh	距左 30vw，距顶 40vh

第一个值是水平偏移，第二个是垂直偏移，从容器左上角开始计算。

只写一个长度时，第二个值默认center

颜色与上面相同，不做解释

1.2.2 文字渐变

#0096FF：起点颜色，蓝色，默认在 0% 位置。

#BB64FF 42%：到渐变线 42% 的位置变成紫色。

#F2416B 74%：到 74% 的位置变成粉红/玫红色

代码：

background: linear-gradient(97deg, #0096FF, #BB64FF 42%, #F2416B 74%, #EB7500 100%);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

效果：

注意：

-webkit-background-clip: text;-webkit-谷歌浏览器老版本的兼容性写法

background-clip: text;背景裁剪 以文字形式裁剪

color: transparent;文本填充颜色为透明

这三段代码一定要加！！！

1.3 盒子影子（box shadow）

box-shadow 属性用于在元素的框架上添加阴影效果。

使用场景

1. 盒子添加阴影，效果更立体。
2. 鼠标经过元素显示阴影，更加突出元素

语法

box-shadow: X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色;

• 多个属性用空格隔开
• X轴偏移量和Y轴偏移量是必须要写，其余可以省略采取默认值。
• 默认是外阴影，如果改为内阴影要写 inset

一般都是鼠标经过出现阴影，于是可以写

.box:hover{

box-shadow: 0px 15px 30px rgba(0,0,0,0.1)；这里的0.1，越小越接近透明

}

但是鼠标未经过到鼠标经过这个过程会不够丝滑，因此要加入下面的过渡（使丝滑）

1.4 过渡（transition）

过渡效果（Transition） 用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。

场景

1. 鼠标经过图片放大。
2. 表单获得焦点，输入框变宽。

语法

transition: 过渡属性（宽度，高度，大小，阴影） 过渡时间;

• 属性值中间空格隔开。
• 过渡属性如果都要变化可以写all
• 过渡时间单位是秒s，比如 0.2s 等

注意：过渡写到盒子身上， 谁要过度给谁加。eg: A过渡到B，A加过渡

过渡经常和hover搭配使用

1.5 字体图标（iconfont）

字体图标是一种将图标以字体形式嵌入网页的技术，允许开发者像是用文字一样通过CSS控制图标的样式（如颜色、大小、阴影）

使用场景

1. 导航菜单图标。 2. 按钮操作图标。 3. 结合动画效果。

优势

1. 矢量缩放：无损放大缩小

2. 样式灵活：通过 CSS 直接修改颜色、大小、阴影等属性。

3. 减少 HTTP 请求：一个字体文件可包含多个图标，比多张图片更高效。

4. 兼容性好：支持所有现代浏览器，甚至部分旧版浏览器。

使用步骤（以iconfont为例）

1.下载字体图标文件去官网或者设计师准备字体图标文件， 保存到项目目录下。

2.引入html文件中根据提供的压缩包，引入CSS文件 （link方式）

3.使用字体图标一般情况下，我们通过标签调用类名选择对应字体图标。根据实际需求，调整字体样式，比如颜色、大小、位置等

字体图标要么设计师提供，要么去字体库下载。

注意：

<span class="iconfont icon-xihuan"></span>

• .iconfont：基础图标类，通常写字体族、通用大小、抗锯齿等

• .icon-xihuan：具体图标类，通常写这个图标的content、单独颜色/大小等

想做的事	用哪个
所有 iconfont 图标统一字体、大小	.iconfont
只改“喜欢”图标颜色/大小	.icon-xihuan
同时限定是 iconfont 里的“喜欢”图标	.iconfont.icon-xihuan
图标内容content	.icon-xihuan::before

标签辨识：<i></i>

1.<i>是 HTML 的行内元素，原本表示“斜体文本”（italic），浏览器默认会给它加斜体样式.

2.实际开发中<i>常用做图标容器

<i class="iconfont icon-xihuan"></i>

3.使用时一般要把默认斜体去掉：

i { font-style: normal; }

4.和<em>区别

<em>表示强调，默认也是斜体，但语义比<i>强。

1.6 样式初始化

浏览器对 HTML 元素有默认样式（如 margin、padding、font-size），不同浏览器的默认样式可能不一致，导致跨浏览器兼容性问题。

• 统一浏览器默认样式，消除差异。
• 减少后续开发中的冗余代码。
• 提高代码可维护性。

​

1.7 综合案例总结

1. img是特殊的行内可替换元素，可以使用margin-top实现与上方元素或父元素顶部之间的间距。
2. 单行文本溢出显示省略号

overflow: hidden;/* 溢出隐藏 */

text-overflow: ellipsis;/* 文本溢出显示省略号 */

white-space: nowrap;/* 强制文字一行显示，不换行 */

3.多行文本溢出显示省略号

display: -webkit-box;/* 旧版弹性盒子布局*/

-webkit-box-orient: vertical; /* 文本垂直排列*/

-webkit-line-clamp: 3; /* 限制显示行数，即第几行显示省略号*/

overflow: hidden; /* 隐藏溢出内容*/

text-overflow: ellipsis; /* 文本溢出显示省略号*/

注意：重点要修改盒子高度为 正好显示行数的高度。（改height）

1.8 精灵图（CSS Sprite）

CSS 精灵图（CSS Sprites）是将多个小图标或图像合并到一张大图中，通过调整background-position属性来显示特定部分的图像技术。

使用场景

1. 导航菜单图标。 2. 按钮操作图标。 3.复杂彩色小图标更适合精灵图。

优势

1. 减少 HTTP 请求：多个小图标合并为一张图片，只需一次请求。

2. 提升性能：减少网络开销，尤其适合移动端或低带宽场景。

3. 统一管理：方便维护图标集，避免文件分散。

通过合理使用 CSS 精灵图，可以有效优化网页性能。对于复杂场景（如高清屏适配），建议结合SVG或字体图标使用。

原理

1. 给盒子添加背景图片。

2. 通过背景定位（background-position）移动位置对齐（通过移动背景图片是里面的图对准盒子，一般是中下方向左上移动，这样的话一般为负值）。

3. 注意网页坐标不同。

在线测量工具：https://www.tugaigai.com/online_ps/

注意：精灵图的核心是作为背景，要用到background-position，一般都是负值（往左上移）。