前端HTML编程4：深入学习CSS
CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）
作者：燐妤
来源：CSDN
目录
CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）
前言
在上一篇文章中我们初步了解了什么是CSS，以及初步的了解了他的一些知识点，今天我们更深入的去挖掘CSS里面更为重要的知识点，包含了CSS高级选择器、伪类选择器、背景属性等等核心知识点，还没了解什么是CSS的建议看看我上一篇的文章，初识CSS，对你有帮助！！！
OK，废话不多说，正片开始
一、CSS 高级选择器（重点）
这一部分是真正的核心。
很多兄弟看到这里开始懵。
没关系，我给你拆开讲。
1.1 后代选择器
ul a{
color:red;
}意思：
选中 ul 里面所有的 a 标签注意：
不仅儿子能选中。
孙子、重孙都能选中。
比如：
<ul>
<li>
<a>链接</a>
</li>
</ul>也会生效。
1.2 子选择器
ul>a{
color:blue;
}意思：
只选中 ul 的亲儿子 a如果 a 在 li 里面：
<ul>
<li>
<a></a>
</li>
</ul>则不会生效。
这就是：
后代选择器 和 子选择器 的区别1.3 并集选择器
h1,p,.box{
color:red;
}意思：
h1
p
.box
同时使用同一套样式适合减少重复代码。
1.4 复合选择器
div.box{
color:red;
}意思：
选中 class 为 box 的 div注意：
<p class="box"></p>不会生效。
二、伪类选择器（超级重要）
伪类：
元素特殊状态下的样式。
2.1 hover（最常用）
a:hover{
color:red;
}效果：
鼠标移入时变红这个效果你每天都在网页上看到。
比如：
- 淘宝
- 京东
- B站
- GitHub
全部都在用。
2.2 active
a:active{
color:green;
}点击时生效。
2.3 visited
a:visited{
color:gray;
}访问过后的链接颜色。
2.4 focus
input:focus{
border:1px solid blue;
}输入框获得焦点时触发。
企业开发中非常常见。
三、结构伪类（重点）
结构伪类：
不需要 class，也能精准选中元素。
3.1 first-child
ul li:first-child{
color:red;
}选中：
第一个 li3.2 last-child
ul li:last-child{
color:blue;
}选中最后一个元素。
3.3 nth-child()
这个是核心中的核心。
选中第几个
ul li:nth-child(2){
color:red;
}选中第二个。
选中奇数
ul li:nth-child(odd)等于：
2n+1选中偶数
ul li:nth-child(even)等于：
2n前三个
ul li:nth-child(-n+3)第四个以后
ul li:nth-child(n+4)企业开发中：
- 表格隔行变色
- 商品列表
- 卡片布局
都会大量使用。
四、伪元素选择器
伪元素：
相当于创建一个虚拟元素。
4.1 before
div::before{
content:"★";
}会在 div 最前面添加内容。
4.2 after
div::after{
content:"";
}最经典的用途：
清除浮动
.box::after{
content:"";
display:block;
clear:both;
}这是企业开发高频面试题。
五、背景属性
5.1 背景颜色
background-color:red;5.2 背景图片
background-image:url(img/1.jpg);5.3 背景平铺
background-repeat:no-repeat;取值：
| 值 | 作用 |
|---|---|
| repeat | 默认平铺 |
| repeat-x | 横向平铺 |
| repeat-y | 纵向平铺 |
| no-repeat | 不平铺 |
5.4 背景定位
background-position:center center;常用值：
- left
- right
- center
- top
- bottom
5.5 background 简写
background:url(img/1.jpg) no-repeat center center;六、display 显示模式（重点）
HTML 元素默认分两类：
6.1 块级元素
特点：
- 独占一行
- 可以设置宽高
例如：
div
p
h1-h66.2 行内元素
特点：
- 不独占一行
- 不能设置宽高
例如：
span
a
b6.3 inline-block（重点）
display:inline-block;特点：
既能同行显示
又能设置宽高这是前端布局神技。
七、盒子模型（核心）
网页中的所有元素：
本质上都是盒子。
盒子由：
content 内容
padding 内边距
border 边框
margin 外边距组成。
7.1 border 边框
border:1px solid red;三部分：
粗细
样式
颜色7.2 padding 内边距
内容与边框之间的距离。
padding:20px;7.3 margin 外边距
盒子与盒子之间的距离。
margin:20px;7.4 水平居中（超重点）
margin:0 auto;注意：
必须是块级元素
必须设置宽度八、浮动 float（经典布局）
float:left;作用：
让元素横向排列8.1 左浮动
float:left;8.2 右浮动
float:right;8.3 浮动塌陷问题
浮动后：
父元素高度消失这是经典问题。
8.4 清除浮动（必会）
推荐方案：
.box::after{
content:"";
display:block;
clear:both;
}企业开发标准写法。
九、定位 position（超级重点）
定位：
可以精准控制元素位置。
9.1 relative 相对定位
position:relative;
left:20px;
top:10px;特点：
- 不脱离文档流
- 相对自身移动
9.2 absolute 绝对定位
position:absolute;特点：
- 脱离文档流
- 相对于最近定位父级
注意：
父元素通常要加：
position:relative;9.3 fixed 固定定
position:fixed;
right:0;
bottom:0;特点：
固定在浏览器某个位置典型案例：
- 返回顶部
- 客服按钮
- 悬浮广告
9.4 z-index 层级
z-index:999;值越大：
层级越高注意：
只有定位元素有效。
十、overflow 溢出处理
当内容超出盒子：
overflow:hidden;常用值：
| 值 | 作用 |
|---|---|
| visible | 默认 |
| hidden | 隐藏 |
| scroll | 强制滚动条 |
| auto | 自动滚动条 |
十一、表格样式优化
CSS 中表格最经典属性：
border-collapse:collapse;作用：
合并表格边框示例：
table{
border-collapse:collapse;
}十二、CSS 优先级（必考）
优先级规则：
!important
>
行内样式
>
id选择器
>
class选择器
>
标签选择器
>
*十三、企业开发建议（非常重要）
很多兄弟学 CSS 时容易踩坑。
这里给你几个建议。
1、少用 ID
企业开发：
99% 使用 class2、优先使用 Flex 布局
虽然 float 很经典。
但现在：
Flex 才是主流3、养成 reset 习惯
浏览器默认样式不统一。
通常会：
*{
margin:0;
padding:0;
}4、命名规范
不要：
.a
.b
.c推荐：
.header
.nav
.banner
.product-list十四、学习路线建议
如果你现在刚学完 HTML + CSS。
建议你：
第一阶段
练习：
- 登录页
- 注册页
- 新闻页面
- 商品卡片
第二阶段
练习：
- 淘宝首页
- 京东首页
- B站首页
第三阶段
学习：
- Flex
- Grid
- 响应式布局
- Bootstrap
第四阶段
进入：
- JavaScript
- Vue
- React
十五、总结
这篇文章我们学习了：
✅ CSS 基础语法
✅ 高级选择器
✅ 伪类与伪元素
✅ 背景属性
✅ display 显示模式
✅ 盒子模型
✅ 浮动与清除浮动
✅ 定位 position
✅ overflow 溢出处理
✅ CSS 优先级
这些内容：
是整个前端开发的根基。
只要把这些学扎实。
后面的：
- Flex
- Vue
- React
- UniApp
- 小程序
你都会轻松很多。
最后
学习前端最重要的不是看懂。
而是：
多敲代码！！！
CSS 真的是：
看一遍：会了
自己写：不会所以一定要：
- 多临摹页面
- 多做布局
- 多拆网页
- 多练 hover 效果
坚持一段时间后，你会明显发现：
“原来网页真的是一个个盒子拼出来的。”
如果这篇文章对你有帮助的话，动动发财的小手点个免费的赞赞吧，谢谢各位兄弟！！！
推荐练习项目
建议你自己尝试实现：
- 登录页面
- QQ 音乐导航栏
- 京东商品卡片
- 哔哩哔哩顶部导航
- 后台管理系统布局
- 响应式商品列表
这些项目能让你的 CSS 水平飞速提升。
每日励志文案：
没有天赋，那就一直重复
持续努力，也是一种天赋
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)