一、结构伪类选择器
1.作用与优势
- 作用:根据元素在HTML中的结构关系查找元素
- 优势:减少对于HTML中类的依赖,有利于保持代码整洁
- 场景:常用于查找某父级选择器中的子元素
2.选择器
选择器 | 说明 |
E:first-child { } | 匹配父元素中第一个子元素,并且是E元素 |
E:last-child { } | 匹配父元素中最后一个元素,并且是E元素 |
E:nth-child(n) { } | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child(n) { } | 匹配父元素中倒数的第n个子元素,并且是E元素 |
注意:括号里可以填公式
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1、odd |
找到前五个 | -n+5 |
找到从第五个往后 | n+5 |
二、伪元素
伪元素:一般页面中的非主体内容可以使用伪元素
区别:
- 元素:HTML设置的标签
- 伪元素:由CSS模拟出的标签效果
种类:
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意点:
- 必须设置content属性才能生效
- 伪元素默认是行内元素
三、标准流
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素(标签默认排列方式)
常见标准流排版规则:
- 块级元素:从上往下,垂直布局,独占一行
- 行内元素 或 行内块元素:从左往右,水平布局,空间不够自行折行
四、浮动
浏览器解析行内块或行内标签时,如果标签换行书写会产生一个空格的距离
如果不换行书写,会使得代码可读性非常低,为解决这个问题需要使用浮动
4.1 浮动的作用
- 图文环绕
- 网页布局
(1)图文环绕
CSS样式设置:
float: left;
效果:
(2)网页布局
CSS样式设置:
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
float: left;
}
效果:
4.2 浮动的特点
- 浮动元素会脱离标准流的控制(简称:脱标),在标准流中不占位置
- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右移动
- 浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
→→
注意点:
- 浮动的元素不能使用text-align:center或者margin:0 auto
五、综合案例
1.网页布局
设置:
CSS书写顺序:(好处:浏览器执行效率更高)
1.浮动 / display
2.盒子模型相关属性: margin border padding 宽度高度背景色
3.文字样式
2.小米模块案例
先把框架做好,设置背景色,便于后续观察和设置
接着一步步设置
代码展示:
<style>
*{
margin: 0;
padding: 0; /* 清除初始默认样式 */
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; 刚开始给背景设置颜色,方便观察 */
}
.left {
float: left;
width: 234px;
height: 614px;
/* background-color: #800080; */
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
list-style: none;/*清除无序列表前面的*/
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
} /* 如果父级的宽度不够,子级会自动换行 */
.right li:nth-child(4n) {
margin-right: 0;/*给每行最后一个盒子设置*/
}
</style>
3.网页导航案例
需求:使用浮动,完成设计图中布局效果
代码展示(有详细注释):
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 640px;
height: 50px;
background-color: #ffc0cb;/*设置背景大小和颜色*/
}
ul {
list-style: none;/*清除li标签前的符号*/
}
.nav li a {
display: block; /*转成块级元素使得a标签内容能一行展示*/
float: left;
width: 80px; /*盒子宽高*/
height: 50px;
text-align: center; /*文本水平居中*/
line-height: 50px; /*设置行高使得文本内容垂直居中*/
color: white; /*设置文字颜色*/
text-decoration: none; /*清除下划线*/
}
a:hover{background-color: green;}/*鼠标悬停时改变颜色*/
</style>
<!-- 做主导航要li标签里面套a标签(提高浏览器渲染效率) -->
六、清除浮动
6.1 清除浮动介绍
含义:清除浮动带来的影响
- 影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:
- 子元素浮动后脱标 → 不占位置
目的:
- 需要父元素有高度,从而不影响其他网页元素的布局
例子:
此时.top父级元素添加了高度,给两个子元素添加了浮动,但如果把高度去掉则会出现如下情况:
这就是浮动带来的影响,如果希望父级元素没有设置高度的情况下,仍然希望.bottom的位置不变的话,就需要清除浮动带来的影响。
6.2 解决方案:
1.直接设置父元素高度
- 优点:简单粗暴,方便
- 缺点:有些布局中不能固定父元素高度,如:新闻列表、京东推荐模块
2.额外标签法:
在最后一个子元素的后面再添加一个块级子元素div,然后内容为空,同时设置clear属性
- 缺点:在页面中添加额外的标签,会让页面的HTML结构复杂
3.单伪元素清除法:
操作:用伪元素替代了额外标签
写法:
/* 单伪元素清除浮动 */
.clearfix::after {/* 常用 */
content: '';
/* 伪元素添加的标签是行内,要求块 */
display: block;
clear:both;
/* 补充代码:在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
优点:项目中使用,直接给标签添加类即可清除浮动
4.双伪元素清除法:
写法:
/* .clearfix::before 作用:解决外边距塌陷问题】
外边距塌陷:父子标签,都是块级,子级加margin会影响父级的位置 */
/* 双伪元素清除浮动 */
.clearfix::before{
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after{
clear: both;
}
优点:项目中使用,直接给标签添加类即可清除浮动
5.给父元素设置overflow:hidden
操作:直接给父元素设置overflow:hidden
优点:方便
6.不知道叫什么的方法
给当前元素设置css属性clear值可为left、right,both。作用分别为清除左浮动元素带来的影响,清除右浮动元素带来的影响,清除左右两侧浮动元素带来的影响