【QT/C++】Qt样式设置之CSS知识（系统性概括）
(关注不迷路哈！！！)
文章目录
- 【QT/C++】Qt样式设置之CSS知识（系统性概括）
-
- 前言
- 一、CSS基础：语法与核心概念
- 二、CSS元素显示模式
- 三、CSS选择器
- 四、CSS背景样式
- 五、CSS盒子模型
- 六、CSS美化三剑客
- 七、CSS布局
- 八、CSS动画与过渡
- 九、CSS响应式设计
- 十、CSS高级特性
-
- [CSS变量（Radial Gradient）](#CSS变量（Radial Gradient）)
- [渐变（Repeating Gradient）](#渐变（Repeating Gradient）)
- [阴影（Box Shadow & Text Shadow）](#阴影（Box Shadow & Text Shadow）)
- 总结
前言
CSS（层叠样式表）是网页设计的核心技术之一，用于控制网页的外观和布局。本文将全面介绍CSS的基础知识、核心概念以及高级特性，帮助读者掌握CSS的精髓。
一、CSS基础：语法与核心概念
1.1 语法结构
CSS最小功能单位是规则集，由「选择器」「声明块」「属性」「值」组成，语法需严格遵循规范：
css
/* 规则集 = 选择器 + 声明块 */
选择器 {
属性1: 值1; /* 声明：冒号分隔属性与值，分号结尾（不可省略） */
属性2: 值2; /* 多声明换行书写，提升可读性 */
}
/* 实战示例：段落基础样式 */
p {
font-size: 16px; /* 非0值必须带单位（px/em/rem） */
color: #333; /* 十六进制颜色（缩写，等价#333333） */
line-height: 1.5; /* 无单位：当前字体大小的1.5倍 */
margin: 0; /* 0可省略单位 */
font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体族：优先使用前者 */
}关键语法规则
- 注释：仅支持
/* 内容 */（单行/多行），// 单行注释无效（会导致后续样式失效）。 - 大小写：属性/选择器不区分大小写（Color=,color），但值中路径（url(Image.jpg)）、字体名（"Microsoft YaHei"）区分大小写。
- 空格规范：选择器与
{之间必须加空格（p{不规范），冒号与值之间建议加空格（font-size:16px→font-size: 16px）。
1.2 四种引入方式
| 引入方式 | 语法示例 | 优先级 | 加载机制 | 适用场景 |
|---|---|---|---|---|
| 内联样式 | <div style="color: red;">内容</div> |
最高 | 随元素加载 | 动态元素、临时样式调整 |
| 内部样式 | <style>.box { width: 200px; }</style> |
中 | 随HTML头部加载 | 单页面网站、临时测试 |
| 外部样式 | <link rel="stylesheet" href="style.css"> |
中 | 并行加载 | 多页面网站、大型项目 |
| @import引入 | <style>@import url("reset.css");</style> |
最低 | 串行加载 | 样式模块化拆分 |
1.3 三大特性
CSS（层叠样式表）之所以能灵活控制网页样式，核心在于它的三大特性：层叠性、继承性和优先级。
这些特性决定了样式如何应用、冲突如何解决以及元素如何继承样式规则。
层叠性
当多个样式规则应用于同一元素时，CSS会根据"就近原则"决定使用哪个样式。
css
span {
color: red; /* 距离远，被覆盖 */
font-size: 42px; /* 不冲突，正常生效 */
}
span {
color: pink; /* 距离近，生效 */
}继承性
子元素会自动继承父元素的某些样式属性，如字体、颜色等。
- 文本相关：
text-开头的属性（如text-align、text-indent） - 字体相关：
font-开头的属性（如font-size、font-family） - 行高相关：
line-height - 颜色相关：
color
css
h3 {
/* 父元素设置 */
color: green;
font: 32px/1.5 "Microsoft YaHei"; /* 字体大小32px，行高1.5 */
}
div {
/* 子元素继承了h3的行高设置 */
font-size: 20px; /* 行高自动计算为 20px * 1.5 = 30px */
}优先级
CSS优先级由权重决定，从高到低为：
- !important（无穷大）
- 行内样式（1,0,0,0）
- ID选择器（0,1,0,0）
- 类选择器、伪类选择器（0,0,1,0）
- 元素选择器（0,0,0,1）
综合案例：理解三大特性的协同工作
css
/* 1. 继承性：设置基础样式，被所有子元素继承 */
body {
font-family: "Microsoft YaHei";
line-height: 1.5;
}
/* 2. 优先级：类选择器定义导航容器样式 */
.nav {
color: #333;
}
/* 3. 复合选择器权重叠加：.nav li (0,0,1,1) */
.nav li {
color: #666;
}
/* 4. 更高权重：.nav .active (0,0,2,0) */
.nav .active {
color: #ff6700;
}
/* 5. 层叠性：hover状态样式覆盖默认样式 */
.nav li:hover {
color: #f00; /* 鼠标悬停时生效 */
}1.4 字体样式属性
css
/* 设置字体 */
font-family: "Microsoft YaHei", Arial, sans-serif;
/* 设置字体大小 */
font-size: 16px;
/* 设置字体粗细 */
font-weight: bold; /* 或数字 700 */
/* 设置字体样式 */
font-style: italic;
/* 复合属性 */
font: italic 700 36px "Microsoft YaHei";1.5 文本属性
css
/* 文本颜色 */
color: #333;
/* 文本对齐 */
text-align: center;
/* 文本装饰 */
text-decoration: underline;
/* 文本缩进 */
text-indent: 2em;
/* 行高 */
line-height: 1.5;二、CSS元素显示模式
元素显示模式指的是HTML元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。
简单来说，就是元素"如何展示自己"以及"如何与其他元素相处"。
三大核心显示模式
- 块级元素：独占一行，可设置宽高
- 行内元素：与其他元素并排，不可设置宽高
- 行内块元素：并排显示且可设置宽高
显示模式转换
css
/* 转为块级元素 */
display: block;
/* 转为行内元素 */
display: inline;
/* 转为行内块元素 */
display: inline-block;综合代码演示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<!-- ------ 元素显示模式 ------ -->
<!-- 1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页
2.元素显示模式就是 元素(标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个
3.HTML元素一般分为 块元素 和 行内元素 两种类型
-->
<style>
/* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素
11.块元素特点：
1.独占一行
2.高度、宽度、外边距和内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器和盒子，里面可以放行内或块级元素
22.注意：
1.文字类元素不能使用块元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
例如： <p>
<div>这里有问题</div> (使用浏览器的审查器即可发现问题)
</p>
*/
.change {
/* width: 200px; */
height: 200px;
background-color: aqua;
}
/* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中<span>是最典型的行内元素（内联元素）
11.行内元素的特点：
1.相邻行内元素在一行上，即一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本后者其他行内元素
22.注意：
1.链接里面不能再放链接
2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全
*/
.span1 {
/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */
width: 100px;
height: 100px;
background-color: hotpink;
}
/* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*/
/* 11.行内块元素的特点
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定）
2.默认宽度就是它本身内容的宽度（行内元素的特点）
3.高度、行高、外边距和内边距都可以控制（块级元素的特点）
*/
input {
width: 249px;
height: 50px;
}
/* --- 元素显示模式的转换 --- (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*/
/*
1. 转换为块元素：display:block
2. 转换为行内元素：display:inline;
3. 转换为行内块元素：display:inline-block;
*/
/* 这里想要增加链接<a>的触发范围 */
.a1 {
width: 150px;
height: 50px;
/* 1.把行内元素<a>转换为块级元素 这样width和height的修改才能生效 */
display: block;
background-color: pink;
}
.change2 {
/* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */
display: inline;
}
.change3 {
/* 把行内元素转换为行内块元素 */
width: 300px;
height: 30px;
background-color: skyblue;
/* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */
display: inline-block;
}
/* 简洁版小米侧边栏案例 */
.a-change {
/* 设置字体颜色 */
color: white;
width: 230px;
height: 40px;
background-color: #535758;
/* 把行内元素转换为块元素 */
display: block;
/* 取消链接下划线 */
text-decoration: none;
font-size: 14px;
/* 空两个格子 */
text-indent: 2em;
/* ! 实现单行文字垂直居中 ! --> 解决方案：让文字的行高等于盒子的高度*/
/* 原理：行高由上空隙、文本本省的高度、下空隙组成
简单理解：行高的上空隙和下空隙把文字挤到中间了，
所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下
*/
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
del{
display:block;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<!-- 块元素测验 -->
<div class="change">比较霸道，自己独占一行</div>
<!-- 不能这么用！！用浏览器检查会发现有问题 -->
<p>
<div class="change">这里有问题</div>
</p>
<!-- 行内元素测验 -->
<span class="span1">pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
<span class="span1">pink老师</span> <strong>品如的衣服</strong>
<!-- 行内块元素测验 -->
<input type="text" />
<input type="text" />
<!-- 元素模式的转换测验 -->
<!-- 这里想要增加链接<a>的触发范围 -->
<a href="picture/img1.jpg" class="a1">夏至未至</a>
<a href="picture/img1.jpg" class="a1">夏至未至</a>
<!-- 使块级元素在一行显示多个 -->
<div class="change2">我是块级元素，将要通过元素转换模式(改为行内元素)</div>
<div class="change2">我是块级元素 </div>
<!-- 想行内元素的宽度和高度 -->
<span class="change3">把行内元素转换为行内块元素</span>
<span class="change3">把行内元素转换为行内块元素</span>
<br />
<!-- 简洁版小米侧边栏案例 主要思路
1.链接<a>要实现竖着显示(行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度)
2.链接有背景颜色，鼠标经过<a>时链接变色
-->
<a href="https://re.jd.com/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机
电话卡</a>
<a href="picture/img1.jpg" class="a-change">电视 盒子</a>
<a href="#" class="a-change" target="_blank">笔记本呢 平板</a>
<a href="#" class="a-change">出行 穿戴</a>
<a href="#" class="a-change">智能 路由器</a>
<a href="#" class="a-change">健康儿童</a>
<a href="#" class="a-change">耳机 音响</a>
<del>你好啊</del>
</body>
</html>三、CSS选择器
基础选择器
css
/* 元素选择器 */
p { color: red; }
/* 类选择器 */
.box { width: 100px; }
/* ID选择器 */
#header { height: 80px; }
/* 通配符选择器 */
* { margin: 0; padding: 0; }复合选择器
css
/* 后代选择器 */
.nav li { color: blue; }
/* 子选择器 */
.nav > a { color: red; }
/* 并集选择器 */
h1, h2, h3 { font-weight: bold; }伪类选择器
css
/* 状态伪类 */
a:hover { color: blue; }
input:focus { border-color: red; }
/* 结构伪类 */
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; }四、CSS背景样式
css
/* 背景颜色 */
background-color: #fff;
/* 背景图片 */
background-image: url(image.jpg);
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景位置 */
background-position: center center;
/* 背景固定 */
background-attachment: fixed;
/* 复合写法 */
background: #fff url(image.jpg) no-repeat center fixed;
/* 半透明背景 */
background-color: rgba(255, 0, 0, 0.5);五、CSS盒子模型
在网页布局的世界里，CSS盒子模型是一切布局的基础。
无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。
掌握盒子模型的工作原理，是成为前端开发者的必备技能。本文将从基础概念出发，通过实例代码详细解析盒子模型的核心要素及实战技巧。
CSS盒子模型由四部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
css
/* 边框 */
border: 1px solid #ccc;
/* 内边距 */
padding: 10px;
/* 外边距 */
margin: 20px auto;
/* 水平居中 */
.box {
width: 300px;
margin: 0 auto;
}综合代码演示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<!-- 页面布局三大核心：盒子模型、浮动、定位 -->
<!-- 谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素,包括：边框、外边距、内边距和实际内容
-->
<style>
/* 注意，这句话应为我们使用CSS时的第一句话
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
*/
/* <!-- 111.border -->
<!-- border可以设置元素的边框，边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色
border: border-width | border-style | border-color;
边框属性简写(复合写法)：border-width border-style border-color;(没有顺序要求)
-->
*/
#div1 {
width: 300px;
height: 200px;
/* 1.border-width 边框的粗细，一般情况下都用 px */
border-width: 10px;
/* 2.border-style 边框的样式 solid(实现边框) dashed(虚线边框) dotted(点线边框) */
border-style: solid;
/* 3.border-color */
border-color: pink;
/* 4.边框的简写 */
/* border: 10px solid pink; */
}
/* 5.边框分开写法： border-top/left/right/bottom: 5px solid red */
/* 注意：11.边框会额外增加盒子的实际大小,比如 width:100px的盒子,若有border: 5px solid red ，则盒子的实际宽度为100+2*5
解决方案：1. 测量盒子的时候不要量边框
2. 如果测量的时候包含了边框,则需要width/height减去边框宽度*2(若两边都有边框)
*/
#div2 {
width: 200px;
height: 200px;
/* 给定一个200*200的盒子,设置上边框为红色,其余边为蓝色 */
/* border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid blue;
border-right: 5px solid blue; */
/* 这种写法更好，合理运用层叠性(就近原则) */
border: 5px solid blue;
border-top: 5px solid red;
}
/* 6.表格细线边框 (边框与边框之间会有像素融合问题,5px+5px=10px)*/
/* 解决：border-collapse: collapse(合并) 相邻边框合并在一起*/
table {
width: 500px;
height: 250px;
text-align: center;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
}
/* 7.内边距 padding 盒子里面的内容默认适合盒子的边缘紧挨着的，这时就需要padding来进行调节
11.padding 属性用于设置内边距，即边框和内容之间的距离
1.padding-left 左内边距
2.padding-right 右内边距
3.padding-top 上内边距
4.padding-bottom 下内边距
22.padding复合写法(简写)
1.padding: 5px; 1个值，代表上下左右都有5像素内边距
2.padding: 5px 10px; 2个值，代表上下内边是5像素，左右内边距是10像素
3.padding: 5px 10px 20px; 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
4.padding: 5px 10px 20px 30px; 4个值，上是5像素，右10像素，下20像素，左30像素 顺时针(上右下左)
33.padding会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：如果要保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可(注意两边的内边距都要考虑进去)
*/
.div3 {
width: 200px;
height: 200px;
background-color: pink;
/* 在浏览器右键点击检查，把鼠标移动到对应的位置，内边距部分会变为跟背景不一样的颜色 */
/* padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px; */
/* 内边距简写 */
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
}
/* 7.1 内边距的应用：当网页中每个导航栏(盒子)里面的字数不一样多时，我们就不要统一给每一个盒子设定宽度了
直接用padding撑开盒子，就可以实现即使内容长度不一样，内容与盒子之间的边距也一样
*/
#nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
/* 运用了继承 a继承来自div的行高 */
line-height: 41px;
}
#nav a {
/* height: 41px; 由于a属于行内元素，这样设置无效，此时必须要转换 行内元素->行内块元素(不能装换成块级元素，因为其无法一行显示多个) */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 15px;
color: #4c4c4c;
text-decoration: none;
}
/* 伪类选择器 */
#nav a:hover {
background-color: #eee;
color: #ff8500;
}
/* 7.2 padding不会影响盒子大小的情况
如果盒子本身没有指定width/height属性，则此时padding就不会撑开盒子大小(对应没有设置的属性)
总结：孩子有边框，孩子变大了，但是父亲不受影响，也就是父盒子里面的子盒子会受内边框影响，但是父盒子不会发生变化
*/
.div5 {
width: 300px;
height: 100px;
background-color: pink;
}
.div5 p {
/* p的width不会变成300+30*2=360px，在自身width没有指定的情况下，不会超出父亲的范围 */
/* width: 100%; */
padding:30px;
}
/* 8. 外边距(margin) 控制盒子和盒子之间的距离
属性： 1.margin-left 左外边距
2.margin-right 右外边距
3.margin-top 上外边距
4.margin-bottom 下外边距
注意：margin简写方式代表的意义和padding完全一致
*/
.div6 {
height: 200px;
width: 100px;
background-color: pink;
}
/* #one {
margin-bottom: 20px;
} */
#two {
margin-top: 20px;
margin-left: 20px;
margin-bottom: 50px;
}
/* 8.1 外边距的典型应用
外边距可以让块级盒子水平居中(盒子默认左侧对齐)，但是必须满足两个条件：
1.盒子必须指定了宽度(width),否则它就跟浏览器/父盒子一样宽了
2.盒子左右的外边距都设置为 auto
以下三种写法都可以：
1.margin-left: auto; margin-right: auto;
2.margin: auto; (上下左右都auto了)
3.(常用)margin: 0px auto; (上下外边距为0px 左右auto)
注意：以上方法是让块级元素居中，行内元素或者行内块元素水平居中给其 父元素 添加 text-align: center; 即可
*/
.header {
width: 500px;
height: 200px;
background-color: skyblue;
/* 简写法：上下外边距为100px，左右外边距auto实现块级元素自动水平居中 */
margin: 100px auto;
/* text-align: center 使行内元素和行内块元素(img)都会居中对齐 */
text-align: center;
}
#span1 {
margin: 0 auto;
/* margin: 0 auto; 不起效果，其只对块级元素起作用
给其父元素添加 text-align: center才对
*/
}
/* 8.2 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷(父盒子跟者子盒子一起塌下来了)：
对于两个嵌套关系(父子关系)的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素添加 overflow: hidden
*/
#father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 父元素塌陷解决 */
/* 1. transparent(透明)*/
/* border: 1px solid transparent; */
/* 2. */
/* padding: 1px; */
/* 3. 最好，不会改变盒子的大小，上面两种都有影响*/
overflow: hidden;
/* 4.还有其他方法，比如 浮动、固定、绝对定位 这些的盒子不会有塌陷问题 */
}
#son {
width: 200px;
height: 200px;
background-color: pink;
/* 本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷) */
margin-top: 100px;
}
/* 9. 内外边距的清除 */
/* 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。
因此我们在布局前，要先清除网页元素的内外边距
*{
padding: 0; 清除内边距
margin: 0; 清除外边距
}
！注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(即使设置也不起效果)。但是转换为块级元素和行内元素就可以
*/
/* ！ 这句话也是我们CSS的第一行代码 ！*/
* {
padding: 0;
margin: 0;
}
#span2 {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<!-- 测试边框各属性 -->
<div id="div1"></div>
<br />
<!-- 测试边框分开写法 -->
<div id="div2"></div>
<!-- 测试表格细线边框 -->
<table align="center" border="1" cellpadding="0" cellspacing="0">
<thead> <!--注意不要把<thead>和<th>搞混 前一个是表结构标签，使表格层次看着更清晰，而后者是类似加粗版的<td>-->
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="picture/down.jpeg" /></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="picture/down.jpeg" /></td>
<td>124</td>
<td>123421</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="picture/up.jpeg" /></td>
<td>212</td>
<td>3213</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>甄嬛传</td>
<td><img src="picture/up.jpeg" /></td>
<td>2343</td>
<td>243343</td>
<td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
<!-- 盒子模型内边距测试 -->
<div class="div3">这是盒子模型的内边距测试 天王盖地虎，宝塔镇河妖妖怪阿斯蒂芬哈喽</div>
<!-- 内边距的应用 -->
<div id="nav">
<a href="">新浪微博</a>
<a href="">手机新浪网</a>
<a href="">移动客户端</a>
<a href="">微博</a>
<a href="">交友网</a>
</div>
<!-- 测试padding不会影响盒子大小的情况 -->
<div class="div5">
<p>
</p>
</div>
换行
<br>
<!-- 测试盒子模型之外边距 -->
<div class="div6" id="one"></div>
<div class="div6" id="two"></div>
<!-- 外边距的应用 -->
<div class="header">
<span id="span1">里面的文字，为行内元素</span>
<img src="picture/up.jpeg" />
</div>
<br>
<!-- 外边距的合并 -->
<div id="father">
<div id="son"></div>
</div>
<br />
<!-- 内外边距的清除 -->
<!-- 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。
因此我们在布局前，要先清除网页元素的内外边距
-->
12345
<ul>
<li>
你好
</li>
</ul>
<span id="span2">行内元素尽量只设置左右的内外边距</span>
</body>
</html>六、CSS美化三剑客
在网页设计中，细节决定品质。圆角边框、盒子阴影和文字阴影这三个CSS属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。
圆角边框
css
/* 圆角 */
border-radius: 10px;
/* 圆形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}盒子阴影
css
/* 外阴影 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 内阴影 */
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);文字阴影
css
/* 文字阴影 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);综合代码演示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框+盒子阴影+文字阴影</title>
<style>
/* 111.圆角边框 */
/* border-radius: length; 设置元素的外边框圆角 radius(圆的半径)，圆与边框的交集形成的圆角效果
参数值可以为 数值 或 百分比 的形式
1.如果盒子是个正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%
2.如果盒子是个矩形，设置为高度的一半就可以
3.该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
4.每个角分开写：border-top-left-radius、border-top-right-radius(top必须在前面)、
border-bottom-right-radius、border-bottom-lef-radius(bottom也要在前面)
*/
/* 圆形 radiu设置为盒子宽度的一半即可*/
.yuanxing {
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 150px; */
/* 50% 就是宽度和高度的一半 */
border-radius: 50%;
}
/* 圆角矩形 radius设置为盒子高度的一半*/
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
/* 每个角设置不同的radius */
.radius1 {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 10px 20px 30px 40px; */
/* border-radius: 10px 40px; */
border-top-left-radius: 30px;
}
/* 222.盒子阴影 */
/* 语法：box-shadow: h-shadow v-shadow blur spread color inset
h-shadow 必需。水平阴影的位置，允许负值(数值越大，影子越往右边偏移)
v-shadow 必需。垂直阴影的位置，允许负值(数值越大，影子越往下偏移)
blur 可选。模糊距离(影子是虚的还是实的,数值越大，影子越模糊)
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影(outset)改为内部阴影
注意；
1.默认是外阴影(outset),但是不可以书写这个单词，否则将导致阴影无效
2.盒子阴影不占空间，不会影响其他盒子的排列位置
*/
.shadow1 {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* rgba半透明化 */
/* box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); */
}
.shadow1:hover {
/* 原先盒子没有影子，当鼠标经过盒子时就添加阴影效果 */
box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}
/* 文字阴影 */
/* 语法: text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置，允许负值
v-shadow 必需。竖直阴影的位置，允许负值
blur 可选。模糊的距离)
color 可选。模糊的颜(数值越大阴影越虚)
*/
#character {
font-size: 50px;
color: orange;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
.glow-text {
color: aqua;
font-size: 100px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;
}
.product-card {
width: 300px;
padding: 20px;
background: orange;
border-radius: 10px; /* 圆角边框 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}
.product-card h3 {
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}
</style>
</head>
<body>
<!-- 圆形的做法 -->
圆形
<div class="yuanxing"></div>
<p>分隔</p>
<!-- 圆角矩形 -->
圆角矩形
<div class="juxing"></div>
<p>分隔</p>
<div class="radius1"></div>
<p>分隔</p>
<!-- 盒子阴影测试 -->
<div class="shadow1"></div>
<!-- 文字阴影测试 -->
<div id="character">你是阴影，我是火影</div>
<div class="glow-text">glow测试</div>
<div class="product-card">
<h3>大夏境内,诸神禁行</h3>
</div>
</body>
</html>七、CSS布局
布局是CSS核心应用，从传统布局到现代布局，覆盖所有页面结构需求。
定位布局
css
/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;
/* 粘性定位 */
position: sticky;实战案例：绝对定位实现弹窗居中
css
/* 弹窗容器（fixed定位，覆盖全屏） */
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* 半透明遮罩 */
display: flex;
align-items: center;
justify-content: center;
}
/* 弹窗内容（absolute定位，相对容器居中） */
.modal-content {
position: absolute;
width: 500px;
height: 300px;
background: #fff;
border-radius: 8px;
padding: 20px;
/* 居中关键：top/left 50% + 负margin（基于自身尺寸） */
top: 50%;
left: 50%;
margin-top: -150px; /* 自身高度的一半 */
margin-left: -250px; /* 自身宽度的一半 */
}Flex布局
css
/* 父容器 */
.flex-container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}
/* 子元素 */
.flex-item {
flex: 1; /* 扩张比例 */
}实战案例：Flex实现导航栏（水平居中+两端对齐）
css
/* 导航栏容器（Flex布局） */
.nav {
display: flex;
justify-content: space-between; /* 主轴（水平）两端对齐 */
align-items: center; /* 交叉轴（垂直）居中 */
height: 80px;
background: #fff;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 导航菜单（Flex布局，子项水平排列） */
.nav-menu {
display: flex;
gap: 30px; /* 菜单项之间间距30px */
}
/* 菜单项（弹性项，不收缩） */
.nav-item {
flex-shrink: 0;
color: #333;
text-decoration: none;
font-size: 16px;
}Grid布局
css
/* 网格容器 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
gap: 20px; /* 间距 */
}
/* 网格项 */
.grid-item {
grid-column: 1 / 3; /* 占据第1到第3列 */
}实战案例：Grid实现经典页面布局（头部+侧边栏+主体+底部）
css
/* 页面容器（Grid布局，占满视口高度） */
.page-container {
display: grid;
grid-template-columns: 250px 1fr; /* 2列：侧边栏250px，主体占剩余空间 */
grid-template-rows: 80px 1fr 60px; /* 3行：头部80px，主体占剩余空间，底部60px */
grid-template-areas:
"header header" /* 头部占第1行，跨2列 */
"sidebar main" /* 侧边栏占第2行第1列，主体占第2行第2列 */
"footer footer"; /* 底部占第3行，跨2列 */
height: 100vh; /* 占满视口高度 */
gap: 20px; /* 网格项之间间距20px */
padding: 20px;
box-sizing: border-box;
}
/* 各区域关联网格 */
.header {
grid-area: header;
background: #007bff;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
}
.sidebar {
grid-area: sidebar;
background: #f8f9fa;
padding: 20px;
}
.main {
grid-area: main;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.footer {
grid-area: footer;
background: #343a40;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}八、CSS动画与过渡
通过transition（过渡）和animation（动画）实现元素动态效果，提升页面交互体验，无需依赖JavaScript。
过渡（Transition）
实现元素"状态变化"的平滑过渡（如hover时颜色、尺寸、位置变化），仅需定义"过渡属性"和"过渡时长"，适用于简单的状态切换。
css
/* 过渡效果 */
.transition-box {
transition: all 0.3s ease;
}
.transition-box:hover {
transform: scale(1.1);
}动画（Animation）
通过@keyframes定义"关键帧"，实现更复杂的动态效果（如旋转、移动、循环动画），支持多阶段状态控制，适用于需自定义时序的复杂动画。
css
/* 定义关键帧 */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* 应用动画 */
.animated-box {
animation: slideIn 0.5s ease forwards;
}九、CSS响应式设计
通过技术手段让页面在不同屏幕尺寸（手机、平板、电脑）上自适应显示，核心是"根据设备特性调整样式"。
媒体查询
根据设备的屏幕宽度、分辨率、方向等特性，应用不同的CSS样式，语法为@media 媒体类型 and (媒体特性) { 样式 }。
css
/* 移动端优先 */
.container {
width: 100%;
}
/* 平板样式 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 桌面端样式 */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}实战案例：响应式导航栏
css
/* 桌面端导航栏（默认样式，屏幕>768px） */
.nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
height: 80px;
}
/* 桌面端菜单（显示） */
.nav-menu {
display: flex;
gap: 30px;
}
/* 移动端菜单按钮（隐藏） */
.nav-toggle {
display: none;
font-size: 24px;
cursor: pointer;
}
/* 移动端样式（屏幕≤768px） */
@media (max-width: 768px) {
.nav {
padding: 0 15px;
}
/* 隐藏桌面端菜单 */
.nav-menu {
display: none;
/* 移动端菜单展开样式（可通过JS控制显示） */
flex-direction: column;
position: absolute;
top: 80px;
left: 0;
width: 100%;
background: #fff;
padding: 15px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 显示移动端菜单按钮 */
.nav-toggle {
display: block;
}
}视口设置
必须在HTML头部添加<meta name="viewport">标签，确保移动端浏览器正确识别屏幕尺寸，避免页面缩放异常：
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">十、CSS高级特性
CSS变量（Radial Gradient）
定义可复用的变量，实现"一处修改，全局生效"，支持动态修改（通过JS），语法为--变量名: 值，使用时通过var(--变量名)调用。
css
:root {
--primary-color: #007bff;
--font-size: 16px;
}
.box {
color: var(--primary-color);
font-size: var(--font-size);
}渐变（Repeating Gradient）
生成平滑的颜色过渡效果，无需使用图片，分为线性渐变、径向渐变、重复渐变等。
css
/* 线性渐变 */
.linear-gradient {
background: linear-gradient(to right, #007bff, #6610f2);
}
/* 径向渐变 */
.radial-gradient {
background: radial-gradient(circle, #fff, #007bff);
}阴影（Box Shadow & Text Shadow）
添加阴影效果，增强元素层次感，支持多阴影叠加。
总结
CSS是现代Web开发不可或缺的技术，掌握其核心概念和高级特性对于创建美观、响应式的网页至关重要。通过本文的系统学习，相信读者能够熟练运用CSS的各种功能，创造出令人印象深刻的网页效果。
参考链接：https://blog.csdn.net/2401_86760859/article/details/154074924