持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
本章内容
1.结构伪类选择器
2.伪元素
3.浮动
4.清除浮动
5.定位
结构伪类选择器nth-child || nth-of-type
根据HTML结构选择标签,减少对类名的依赖.
结构伪类选择器的权重是0010
<ul>
<li>我是li里的第1个孩子</li>
<li>我是li里的第2个孩子</li>
<li>我是li里的第3个孩子</li>
<li>我是li里的第4个孩子</li>
<li>我是li里的第5个孩子</li>
<li>我是li里的第6个孩子</li>
<li>我是li里的第7个孩子</li>
<li>我是li里的第8个孩子</li>
<li>我是li里的第9个孩子</li>
<li>我是li里的第10个孩子</li>
</ul>
/* 匹配父元素里面的第一个孩子 */
ul li:first-child {
background-color: red;
}
/* 匹配父元素里面的最后一个孩子 */
ul li:last-child {
background-color: skyblue;
}
/* 匹配父元素里面的某一个孩子 */
ul li:nth-child(6){
background-color: purple;
}
/* 匹配父元素里面倒数第几个孩子 */
ul li:nth-last-child(3){
background-color: pink;
}
nth-child(n)
1.n 可以是数字， 数字是几，就选择第几个孩子。
ul li:nth-child(6) { } 选择第6个孩子
2.n 还可以是 关键字 比如 odd even
/* 选中偶数的孩子 */
ul li:nth-child(even) {
background-color: pink;
}
/* 选中奇数的孩子 */
ul li:nth-child(odd) {
background-color: skyblue;
}
3.n 还可以是 公式。
- n 是从 0开始 012345...
- 2n 是 偶数
- 2n + 1 是 奇数
- 5n 5的倍数
- n+5 从第五个开始 包含第五个 一直到最后.
- -n+5 选中前5个 包含第五个
/*2n */
ol li:nth-child(2n) {
background-color: tomato;
}
/*2n+1 */
ol li:nth-child(2n+1){
background-color: violet;
}
/*5n */
ol li:nth-child(5n){
background-color: yellowgreen;
}
/* n+5 从第五个开始 包含第五个 一直到最后.*/
ol li:nth-child(n+5) {
background-color: yellowgreen;
}
/*-n+5 选中前5个 包含第五个*/
ol li:nth-child(-n+5) {
background-color: yellowgreen;
}
伪元素
伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素
在父元素内容的最前面添加一个伪元素
E:::before{
content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{
content: '';
}
使用委员插入必须要指定content属性
浮动
浮动的特点
- 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 右浮动 */
float: right;
background-color: red;
}
.box3 {
background-color: green;
}
- 浮动的元素比标准流高半个级别,可以覆盖标准流的元素
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 左浮动 */
float: left;
background-color: red;
}
.box3 {
padding: 40px;
background-color: green;
}
3.浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: red;
}
.box3 {
background-color: green;
}
- 浮动的元素会受到上面元素边界的影响
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
float: left;
background-color: pink;
}
.box2 {
/* 右浮动 */
float: right;
background-color: red;
}
.box3 {
background-color: green;
}
5.浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐)
一行可以显示多个,可以设置宽高
块级元素浮动之后不设置宽高,默认由内容撑开
行内元素浮动之后设置宽高有效
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>设置宽高有效</span>
<p>块级元素浮动之后不设置宽高默认由内容撑开</p>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: red;
}
.box3 {
background-color: green;
}
span {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
p {
width: 200px;
height: 200px;
float: left;
background-color: yellow;
}
浮动注意事项:
1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)
2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.
3 子浮父不浮 子一起浮
后期还是以(Flex布局)为主
清除浮动
清除浮动本质
清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
注意：
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了
清除浮动样式
选择器{clear:属性值;}
我们实际工作中， 几乎只用 clear: both;
清除浮动的策略是: 闭合浮动
清除浮动的多种方式
额外标签法
额外标签法也称为隔墙法，是 W3C 推荐的做法
使用方式：
额外标签法会在浮动元素末尾添加一个空的标签。
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
overflow:hidden | auto | scroll;
优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码
父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
父级添加双伪元素
给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
定位
定位的应用场景
为什么需要使用定位?
1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面
2 页面滚动,盒子固定在页面某个位置不动.
定位的使用步骤:
1 设置定位的方式
2 设置偏移值
定位的语法
.blue {
/* 定位的使用步骤 */
/* 1 设置定位的方式 绝对定位*/
position: absolute;
/* 2 设置偏移值 */
top: 150px;
left: 150px;
background-color: blue;
}
静态定位
position: static;
特点:
1 静态定位就是普通的标准流
2 静态定位设置偏移值无效.
相对定位
position: static;
特点:
1 静态定位就是普通的标准流
2 静态定位设置偏移值无效.
相对定位
position: relative;
特点:
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标
绝对定位
position: absolute;
特点
1 需要配合方位属性来移动位置
2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置.
3 在页面中不占位置-已经脱标
子绝父相
子绝父相:
子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.
子绝父绝:
实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.
绝对定位的盒子水平垂直居中
绝对定位使盒子居中(记得设置宽高)
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
固定定位
position: fixed;
特点
1 需要配合方位属性来移动位置
2 相对于浏览器的可视区域进行移动位置
3 不占位置-脱标
定位的特殊性
行内元素加了绝对/固定定位可以设置宽高
块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开
嵌套块级元素加了绝对/固定定位,不会有塌陷问题.
元素层级
不同布局方式元素的层级关系：
标准流 <浮动 <定位
定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)
z-index属性可以修改定位元素之间的层级关系
z-index: 数字(默认值是auto );
z-index属性的属性值千万不要加单位
数字越大,层级越高.只有定位的盒子才有 z-index属性
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
}
.red {
/* 相对定位 */
position: relative;
left: 0;
top: 0;
z-index: 2;
background-color: red;
}
.blue {
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
background-color: blue;
}
.green {
/* 固定定位 */
position: fixed;
left: 200px;
top: 200px;
z-index: 9999;
background-color: green;
}
最后是原图(●ˇ∀ˇ●)
