☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
CSS学习(二)---盒子模型，字体图标，精灵图
2026/6/9 11:23:00 网站建设 项目流程

文章目录

  • 一、盒子模型
  • 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）外边距塌陷

区块元素上下外边距会出现塌陷情况。
  • 嵌套关系(父子）的区块元素。
  • 给子盒子设置上下外边距会让父盒子塌陷移动。、
解决方案：
  1. 给父盒子添加上边框。（父盒子本身有边框则不会出现问题）
  2. 给父盒子添加上内边距。（同理）
  3. 给父盒子添加：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 位置...) 线性渐变（方向可控）
  1. 方向。 可以是方位名词， 也可以是deg(角度）
  2. 位置。色标的位置。不是必须写的。
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属性来显示特定部分的图像技术。
优势：
  1. 减少 HTTP 请求：多个小图标合并为一张图片，只需一次请求。
  2. 提升性能：减少网络开销，尤其适合移动端或低带宽场景。
  3. 统一管理：方便维护图标集，避免文件分散。
原理：
  1. 给盒子添加背景图片。
  2. 通过背景定位（background-position）移动位置对齐。
  3. 注意网页坐标不同。
.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. 网坐标不同。
使用场景：
1. 导航菜单图标。
2. 按钮操作图标。
3. 复杂彩色小图标更适合精灵图。
标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询