CSS学习(二)---盒子模型，字体图标，精灵图-洪萨配资

文章目录

一、盒子模型
1. 盒子分类
(1) 区块盒子（block）
(2) 行内盒子（inline）
2. 盒子模型组成
（1）边框 border
（2）过渡效果 Transition
（2）内边距 padding
（3）外边距 margin
（4）外边距折叠
（5）外边距塌陷
3. 尺寸计算
4. 盒子背景
5.背景渐变
6. 盒子阴影
二、字体图标
三、精灵图

一、盒子模型

所有的元素都被一个个的“盒子”包围着，学会盒子模型可以实现准确布局、处理元素排列的关键。

1. 盒子分类

在 CSS 中，我们有几种类型的盒子，一般分为区块盒子（block boxes）和行内盒子（inline boxes）

(1) 区块盒子（block）

盒子会产生换行。
width 和 height 属性可以发挥作用。
不设置宽度则默认和是父元素空间的 100%。
内边距、外边距和边框会撑大元素。
常见的比如： div、p、h、ul、table等

(2)行内盒子（inline）

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距不起效果。
水平方向的内边距、外边距会有效果。
常见的比如： span、em、a、strong等

2. 盒子模型组成

CSS 盒模型整体上适用于区块盒子，包含盒子内容、内边距、外边距、边框四部分。

盒子内容。显示内容的区域，由内容或者指定宽度高度来决定内容大小。
内边距 padding。内容距离边框之间的距离。
边框 border。边框盒子包住内容和内边距。
外边距 margin。该盒子与其他元素之间的距离。

（1）边框 border

border 属性用于设置盒子边框。

属性值：

border： 边框粗细 边框样式 边框颜色； border: 1px solid red;

边框有三部分属性值组成，中间必须空格隔开。
三部分属性值没有先后顺序。

使用场景：
1. 设置盒子四条或者单独边框。

边框样式：

dotted 点状边框圆点组成的虚线
dashed 虚线边框短横线组成的虚线
solid 实线边框单一线条

属性：根据方位名词。 top bottom left right

border-top: 1px solid pink；
border-bottom: 1px solid pink;
border-left: 1px solid pink;
border-right: 1px solid pink;

.box4 { border-top: 2px solid red; border-bottom: 3px dotted green; border-left: 4px dashed blue; border-right: 5px solid pink; }

使用场景：
1. 四个边框不同。
2. 底部一条线做分割线

圆角边框：

border-radius 允许你设置元素的外边框圆角。

border-radius: 属性值； border-radius: 50%; border-radius: 20px;/* 胶囊按钮 设置圆角为 宽度或者高度较小值的一半 就可以实现 */

使用场景：
1. 盒子设置圆角更好看。
2. 盒子或者图片设置为圆形。
特殊场景：
1. 胶囊圆角。
2. 盒子或者图片设置为圆形。
胶囊圆角：长方形设置圆角为宽度的一半。
圆形：正方形设置圆角为高度一半或者50%。

border-radius: 左上角右上角右下角左下角；

顺时针记忆
中间空格隔开
不需要圆角的设置为0即可

border-radius: 10px; border-radius: 10px 20px; 左上 右下是10px，右上 左下 20px border-radius ：10px 20px 30px; 左上是10px，右上 左下是20px，右下30px border-radius： 10px 20px 30px 40px; 左上10px，右上20px，右下30px，左下40px

特殊场景：
1. 淘宝侧边栏左上角和右下角有圆角其余没有。

（2）过渡效果 Transition

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

语法：

transition: 过渡属性 过渡时间;

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

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

（2）内边距 padding

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

padding: 10px; 上下左右4个内边距都是10px padding: 10px 20px; 上下内边距是10px，左右内边距是20px padding: 10px 20px 30px; 上是10px，左右是20px，下是30px padding： 10px 20px 30px 40px; 上10px，右20px，下30px，左40px（顺时针）

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

（3）外边距 margin

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

margin: 10px; 上下左右4个外边距都是10px margin: 10px 20px; 上下外边距是10px，左右外边距是20px margin: 10px 20px 30px; 上是10px，左右是20px，下是30px margin： 10px 20px 30px 40px; 上10px，右20px，下30px，左40px（上右下左）

注意：
1.行内元素左右外边距生效，上下外边距无效。
2. 行内元素设置宽度和高度也无效。
使用场景：
1. 让元素与元素保留一定距离，更美观

技巧：
区块元素可以利用marign实现水平居中。
块级盒子必须有宽度
只需要设置左右外边距为auto就可以

（4）外边距折叠

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

并列关系(兄弟）的区块元素。
两个上下外边距将合并为一个外边距。其大小等于最大的单个外边距

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

（5）外边距塌陷

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

嵌套关系(父子）的区块元素。
给子盒子设置上下外边距会让父盒子塌陷移动。、

解决方案：

给父盒子添加上边框。（父盒子本身有边框则不会出现问题）
给父盒子添加上内边距。（同理）
给父盒子添加：overflow: hidden;属性

3. 尺寸计算

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

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

语法：

box-sizing: content-box; box-sizing: border-box;

content-box默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。理解： width = 内容的宽度
border-box 元素的 width 和 height包含内容、padding和 border。理解： width = border + padding + 内容的宽度

4. 盒子背景

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

属性	作用	常用值	示例代码
background-color	设置元素背景颜色	颜色名称，十六进制，RGB，透明度	background-color: #f0f0f0;
background-image	设置背景图片	url(bg.png)	background-image: url(bg.png);
background-repeat	控制背景图片是否重复	repeat（默认）， no-repeat、repeat-x、repeat-y	background-repeat: no-repeat;
background-position	定位背景图片位置	x y （如 center top，或者px、%单位）	background-position: center ;
background-size	调整背景图片尺寸	默认auto、cover（覆盖）、contain（包含）或者跟px、%	background-size: cover;
background-attachment	背景是否随页面滚动	scroll（默认滚动的）、fixed(固定）	background-attachment: fixed;

width: 400px; height: 400px; background-color: pink; /* 背景图片 */ background-image: url(./img/ldh.png); /* 背景平铺 */ background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; /* 背景位置 */ background-position: x y; background-position: 50px 10px; background-position: 50% 50%; /* 方位名词 top bottom left right center */ background-position: left top; background-position: right bottom; background-position: center center; /* 如果只写一个值，则第二个值是y省略了，默认是 center */ background-position: center; background-position: left; /* 背景缩放 尺寸 */ background-size: cover; 覆盖 background-size: contain; 包含 background-size: 300px; /* 背景固定 滚动的 scroll 滚动的 fixed 固定的 相对于当前视口 */ background-attachment: scroll; background-attachment: fixed; /* 复合写法 */ background: pink url(./img/ldh.png) no-repeat center center/200px;

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

使用场景：
1. 给盒子添加背景图片，更加精美
2. 给列表添加相同的小图标，装饰效果
3. 给页面添加大的背景图片展示更震撼
4. 纯CSS实现背景渐变效果

背景复合写法：

background: 颜色 图片 重复 固定 位置/尺寸

顺序无关

5.背景渐变

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

linear-gradient(方向, 颜色1 位置,颜色2 位置...) 线性渐变（方向可控）

方向。可以是方位名词，也可以是deg(角度）
位置。色标的位置。不是必须写的。

background: linear-gradient(to right, #ff6b6b, #4ecdc4) background-image:linear-gradient(90deg, #ff6b6b 30%, #4ecdc4 70%)

radial-gradient(形状,颜色1,颜色2... ) 径向渐变（形状和位置可控）

radial-gradient(circle, #ff9a9e, #fad0c4)

场景：
1. 文字底色渐变甚至动画，更吸引用户
2. 盒子添加更美观

文字背景线性渐变：

/* 渐变背景文字 */ background-image: linear-gradient(97deg, #0096FF, #BB64FF 42%, #F2416B 74%, #EB7500); /* -webkit- 前缀 谷歌浏览器老版本的兼容性写法 */ -webkit-background-clip: text; /* 背景裁剪 以文字的形式裁剪 */ background-clip: text; /* 文本填充颜色 为透明 */ -webkit-text-fill-color: transparent;

6. 盒子阴影

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

语法：

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

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

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

二、字体图标

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

1. 下载字体图标文件

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

2. 引入html文件中

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

3. 使用字体图标

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体图标</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> .icon-good { font-size: 140px; color: red; } </style> </head> <body> <span class="iconfont icon-good"></span> <i class="iconfont icon-xihuan"></i> </body>

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

三、精灵图

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

优势：

减少 HTTP 请求：多个小图标合并为一张图片，只需一次请求。
提升性能：减少网络开销，尤其适合移动端或低带宽场景。
统一管理：方便维护图标集，避免文件分散。

原理：

给盒子添加背景图片。
通过背景定位（background-position）移动位置对齐。
注意网页坐标不同。

.box { width: 27px; height: 26px; /* 精灵图的核心是作为背景 */ background: url(./img/wz.webp) no-repeat; } .box1 { background-position: 0 -169px; } .box2 { margin: 100px auto; background-position: -90px -170px; }

3. 网坐标不同。