CSS进阶指南：装饰与样式补充-CSDN博客

本文链接：https://blog.csdn.net/m0_73198722/article/details/126458889

本文详细探讨了CSS的进阶技巧，包括垂直对齐方式、光标类型、边框圆角、overflow溢出效果和元素隐藏。同时介绍了CSS样式补充，如精灵图、背景图片缩放、文字阴影、盒子阴影和过渡效果。此外，还涉及项目前置认知，如网页与网站的关系、SEO三大标签等，以及项目结构搭建的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的进阶

CSS的装饰

1 垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）。

当图片和文字在一行中显示时，其实底部不是对齐的，解决行内/行内块元素垂直对齐问题时，使用垂直对齐方式。

属性名：vertical-align。

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中间对齐
bottom	底部对齐

（拓展）项目中 vertical-align 可以解决的问题：

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

2 光标类型

场景：设置鼠标光标在元素上时显示的样式。

属性名：cursor。

在这里插入图片描述

3 边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验。

属性名：border-radius。
常见取值：数字+px 、百分比。

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角。

边框圆角的常见应用：

画一个正圆：盒子必须是正方形，设置边框圆角为盒子宽高的一半 → border-radius:50%。
胶囊按钮：盒子要求是长方形，设置 → border-radius：盒子高度的一半。

4 overflow溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域。

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

在这里插入图片描述

5 元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏。

常见属性：
visibility：hidden；隐藏元素本身，并且在网页中占位置。
display：none；隐藏元素本身，并且在网页中不占位置。

注意：开发中经常会通过 display属性完成元素的显示隐藏切换，display：none；（隐藏）、 display：block；（显示）。

拓展：

1 元素整体透明显示

场景：让元素整体（包括文字）一起显示透明。
属性名：opacity
属性值:0–1之间，0表示完全透明，1表示完全不透明。

2 边框合并

让相邻表格边框进行合并，得到细边框。
代码：border-collapse: collapse;

3 用CSS书写三角形

书写一个盒子给，盒子宽高设为0，仅保留边框。得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明。盒子添加四个方向的border, 颜色设置不同，保留其中一个方向的border, 其他方向颜色是transparent。

4 焦点伪类选择器

只能用于表单标签。

语法：

input:focus {
            background-color: pink;
        }

获得焦点的状态。获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来。

5 属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签。

选中页面中所有的文本框，使用属性选择器如何实现：

input[type="text"] { }

CSS样式补充

1 精灵图

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图。优点是减少服务器发送次数，减轻服务器的压力，提高页面加载速度。

精灵图使用步骤：创建一个盒子，设置盒子大小为小图片大小，设置精灵图为盒子的背景图片，将小图片左上角坐标取负值，设置给盒子的background-position：x y。

精灵图的标签一般使用行内标签，如span，i 等。

2 背景图片缩放

作用：设置背景图片的大小。

语法：background-size：宽度高度；

在这里插入图片描述

3 文字阴影

作用：给文字添加阴影效果，吸引用户注意。

阴影可以叠加设置，每组阴影取值之间以逗号隔开。

属性名：text-shadow

参数	作用
h-shadow	必选，水平偏移量，可为负值
v-shadow	必选，垂直偏移量，可为负值
blur	可选，模糊度
color	可选，阴影颜色

4 盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节。

属性名：box-shadow。

在这里插入图片描述

5 过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验。

属性名：transition

在这里插入图片描述

注意点：过渡需要：默认状态和 hover状态样式不同，才能有过渡，transition属性给需要过渡的元素本身加，transition属性设置在不同状态中，效果不同的：给默认状态设置，鼠标移入移出都有过渡效果，给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。

项目前置认知

1 网页与网站的关系

网站是提供特定服务的一组网页集合。网页是网站中的每一“页”。

在互联网中，网站类似于是一本书，网页就是这本书的每一页。

2 骨架结构标签

在这里插入图片描述

文档类型声明，告诉浏览器该网页的 HTML版本。DOCTYPE需要写在页面的第一行，不属于HTML标签。

<html lang="en">，标识网页使用的语言。常见语言：zh-CN 简体中文 / en 英。

<meta charset="UTF-8">，标识网页使用的字符编码。作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码。

3 SEO三大标签

SEO（Search Engine Optimization）：搜索引擎优化，作用：让网站在搜索引擎上的排名靠前。

title：网页标题标签。
description：网页描述标签。
keywords：网页关键词标签。

常见有语义的布局标签有哪些：
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章

4 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标。

代码如下：
在这里插入图片描述

5 版心

场景：把页面的主体内容约束在网页中间，作用：让不同大小的屏幕都能看到页面的主体内容。版心类名常用：container、wrapper、w 等。

6 书写顺序

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯。

在这里插入图片描述

项目结构搭建

文件和目录准备

新建项目文件夹 xtx-pc-client，在VScode中打开
• 在实际开发中，项目文件夹不建议使用中文
• 所有项目相关文件都保存在 xtx-pc-client 目录中

复制 favicon.ico 到 xtx-pc-client 目录
• 一般习惯将ico图标放在项目根目录

复制 images 和 uploads 目录到 xtx-pc-client 目录中
• images ：存放网站固定使用的图片素材，如：logo、样式修饰图片… 等
• uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等

新建 index.html 在根目录

新建 css 文件夹保存网站的样式，并新建以下CSS文件：
• base.css：基础公共样式
• common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
• index.css：首页样式