一、结构伪类选择器
通过使用结构伪类选择器,可以根据元素在HTML中的结构关系查找元素,常用于查找父级选择器中的子元素。
1.查找单个
查找第一个子元素,并且为li标签 ,两个条件要同时满足。
li:first-child{
background-color: bule;
}//找到第一个子元素并且为li标签
li:nth-child(4){
background-color:bule;
}//找到第四个子元素并且为li标签
li:nth-last-child(4){
background-color:bule;
}//找到倒数第四个子元素并且为li标签
2.查找多个
要想准确查找子标签中的孙标签
li:first-child a{
background-color: bule;
}//找到第一个子元素li标签中的a标签
二、伪元素
使用伪元素来表示网页中的的非主体内容,他与HTML设置出来的标签不同,伪元素是CSS模拟出来的标签效果
<style>
.father{
width: 300px;
height: 400px;
background-color: blue;
}
.father::before{
/*必加属性*/
content: "伪元素";
/* 伪元素是一个行内元素是设置不了宽高的 */
/* 转换显示方式 */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father"></div>
</body>
before是在父元素内容最前添加一个伪元素
after是在父元素内容最后添加一个伪元素
三、标准流
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
块级元素:从上往下,垂直布局,独占一行
行内元素 或 行内块元素:从左往右,水平布局,空间不够自动折行
四、浮动
作用:进行网页的布局,让垂直布局的盒子变成水平布局
属性名:float
属性值:left、right
浮动的特点
1.浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
相当于从地面飘到了空中
2.浮动元素比标准流高半个级别,可以覆盖标准流中的元素
3.浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
6.浮动元素不能水平居中。
五、清除浮动
含义:清除浮动带来的影响
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:子元素浮动后脱标 一不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
清除浮动的方法
1.直接给父元素设置高度;
2.额外标签法:
步骤:1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素 设置 clear:both
<style>
.father{
width: 300px;
background-color: blue;
}
.son{
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="clear"></div>
</div>
</body>
3.单伪元素清除法
<style>
.father{
width: 300px;
background-color: blue;
}
.son{
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.father::after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
4.双伪元素清除法
<style>
.father{
width: 300px;
background-color: blue;
}
.son{
float: left;
width: 300px;
height: 300px;
background-color: pink;
}
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son"></div>
</div>
</body>
与单伪元素清除法不同的是,双伪元素的after用来清除浮动,before用来解决盒子上部margin的塌陷。
5.给父元素设置overflow:hidden
直接给父元素添加overflow:hidden
六、定位
通过使用定位,可以让元素摆放在网页的任意位置,一般用于盒子之间的层叠情况
1.定位的基本使用
属性名:position
属性值:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
.box{
position:absolute;
top:300px;
left:300px;
}
①相对定位
相对于自己之前的位置进行移动
代码:position:relative;
②绝对定位
非静态定位的父元素进行定位移动,相对于整个网页来移动的
代码:position:absolute;
③字绝父相
可以让子元素相对于父元素进行自由移动
含义:子元素绝对定位、父元素相对定位
因为相对定位在布局中是占位置的,所以使用相对定位不会使网页的布局变得混乱。
特殊使用:让子元素在父元素中水平居中
.father{
position:relative;
top:300px;
left:300px;
}
.box{
position:absolute;
left:50%
margen-left:-100
width:200px;
}
/*或者*/
.box{
position:absolute;
left:50%
transform:translateX(-50%)
width:200px;
}
④固定定位
他会相对于浏览器进行定位移动,在上下移动中是不会随着网页的移动而移动的,被固定在屏幕中的某一位置。
代码:position:fixed
⑤元素的层级关系
标准流<浮动<定位,
在定位中,绝对、相对、固定的层级相同,但是写在下面的会覆盖掉上面的
如何更改定位元素的层级呢?
属性名:z-index
属性值:数字,数字越大层级越高
七、装饰
1.垂直对齐方式
用来解决行内/行内块元素垂直对齐的问题,当图片和文字在一行中显示时,他的底部是不对齐的。
还可以用来解决文本框和表单按钮无法对齐的问题、input和img无法对齐的问题、div文本框无法贴顶的问题……
属性名:vertical-align
属性值:baseline(默认、基线对齐)、top(顶部对齐)、middle(中部对齐)、bottom(底部对齐)
2.光标类型
设置鼠标光标类型在元素上显示的样式
属性名:cursor
属性值:default(默认)、pointer(小手)、text(工字形)、move(十字光标)
3.边框圆角
让盒子的四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
取值:数字+px、百分比
从左上角开始赋值、没赋值的看对角。
3.overflow溢出部分显示效果
溢出部分指的是盒子内容部分所超出盒子范围的区域。控制内容溢出部分的显示效果,如:显示、隐藏、滚动条…
属性值:overflow
常见取值:
4.元素本身隐藏
场景:让某元素本身在屏幕中不可见。如:鼠标hover之后元素隐藏
常见属性:
1.visibility: hidden
2.display: none
区别:
1.visibility: hidden 隐藏元素本身,并且在网页中 占位置
2.display:none 隐藏元素本身,并且在网页中 不占位置
八、链接伪类选择器
用于选中超链接的不同状态