伪类选择器和盒模型

‘’’
html

伪类选择器

1.结构伪类
分组结构伪类：用于选择子元素，所以应该给它一个查询的起点
.list>li:nth-of-type(){}
倒数
.list>li:nth-last-of-type(){}
第一个
.list:first-of-type{}
最后一个
.list:last-of-type{}
:nth-of-type(an+b)
a:系数，【0.1.2….】
n:权数【0.1.2…】
b:偏移量，从0开始
匹配单个，a=0
:nth-of-type(b)
匹配一组
a=1
:nth-of-type(n){}全选
:nth-of-type(n+3){}从第3个开始匹配
a=-1,反向取
：nth-of-type(-n+3)
：nth-last-of-type(-n+b)取最后几个
a=2:匹配：奇偶位置的元素 2n:even 2n+1:odd
:nth-of-type(2n+0)偶数位元素
:nth-of-type(2n+1)奇数位元素
2.状态伪类，表单伪类
disabled 禁用
enabled 有效的，允许提交
input:disabled{}
input:anabled{}
单选按钮，选中后，将标签改变
input:checked+lable{}
hover悬停
focus获取焦点
‘’’

字体图标

iconfont.cn-需要的图标选入购物车-添加至项目-下载至本地-解压后文件夹-拖到项目中-打开-font class
第一步引入字体图标的css

<link rel="stylesheet"href="./iconfont.css">
第二步：引入图标class
<span class="iconfont icon-**"></span>

盒模型的5个属性

1.width
2.height
3.border
4.padding 内边距，呼吸区
5.margin外边距
box-sizing:border-box;
改变盒子大小的计算方式，使用户设置width,height就是盒子的实际大小，以方便计算与布局。

em,rem的区别

em=font-size 默认字号16px
em:永远和当前或父级的font-size进行绑定
rem:永远和html中的font-size绑定