一、结构伪类选择器
通过使用结构伪类选择器，可以根据元素在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 隐藏元素本身，并且在网页中 不占位置
八、链接伪类选择器
用于选中超链接的不同状态
