HTML伪类、盒子模型学习与应用

1. 伪类

:nth-of-type(3)	分组匹配，匹配前根据元素类型进行分类后在匹配，参数为分组的第几个元素
:not(p:nth-of-type(3)）	排除p分组中第3个p元素
:first-of-type	选择分组第1个元素
:last-of-type	选择分组的最后1个元素
:nth-last-of-type(3)	选择分组倒数第3个元素

伪类的参数计算
参数 = an + b
a : 系数 从1开始
n : 计数器 从0开始
b : 偏移量 从0开始

总结：
1.获取指定的某一个元素：(b)
2.获取前几个元素：(n-b)
3.获取指定位置后的全部元素：(n+b)
4.获取全部偶数：(2n/even)或奇数(2n+1/odd)元素

伪类示例：

.lest > :nth-of-type(3){background: darksalmon;}/*选择分组的第三个元素*/

.lest > li:nth-of-type(3){background: darksalmon;}/*选择li分组的第3个li元素*/

.lest > :nth-of-type(3):not(p:nth-of-type(3)){background: darksalmon;}/*排除p分组中第3个p元素*/

.lest > :first-of-type{background: darksalmon;}/*选择分组第1个元素*/

.lest > :last-of-type{background: rgb(109, 46, 25);}/*选择分组最后一个元素*/

.lest > :nth-last-of-type(3){background: rgb(231, 140, 110);}/*选择分组倒数第几个元素*/

.lest > :nth-of-type(3n+2){background: rgb(112, 37, 13);}

分别作用于第2,5..个
/*计算：
3 * 0 + 2 = 2
3 * 1 + 2 = 5
...
 */

/*获取前几个元素*/
.lest > :nth-of-type(-n+2){background: rgb(112, 37, 13);}

/*获取最后几个元素*/
.lest > :nth-last-of-type(-n+3){background: rgb(231, 140, 110);}

/*获取偶数位置元素[2,4,6,...]*/
.lest > :nth-of-type(2n){background: darksalmon;}
.lest > :nth-of-type(even){background: darksalmon;}

/*获取奇数位置元素[1,3,5,...]*/
.lest > :nth-of-type(2n+1){background: rgb(112, 37, 13);}
.lest > :nth-of-type(odd){background: rgb(112, 37, 13);}

2. 字体图标应用

/*引入字体图标文件*/
<link rel="stylesheet" href="./tubiao/iconfont.css">

/*应用实例*/
<span class="iconfont icon-pay-jingdong"><samp>京东</samp></span>
<style>
.iconfont{ font-size: 4rem;color: deeppink;}
</style>

3.盒模型常用属性与应用

常用属性

width:;/*宽*/
height:;/*高*/
border: ;/*边框*/
margin: 0 0 0 0;/*外边距，顺序：上右下左*/
padding:0 0 0 0 ;/*内边距，顺序：上右下左*/
box-sizing: content-box;/*指定内容区边界*/
box-sizing: border-box;/*通过收缩内容区大小，保证盒子在页面中占据的空间大小不变*/
cursor: pointer;/*改变光标形状，使光标变成手指*/
opacity: 0.8;/*变透明*/
transition: 0.3s;/*控制变化时间*/
@media/*查询语法*/
@media (min-width:480px) {}/*最小480px*/
@media (max-width:720px) {}/*最大720px*/

样式常用单位

px/*绝对定位*/
em，rem/*相对定位*/
vw,vh/*可视化窗口大小*/

16px = 1em
16px = 1.6rem
width:10vw;/*相当于占据当前可视窗口的10%*/

元素样式重置解决方案

margin: 0;
padding:0;
box-sizing: border-box;

应用：

<button class="moxing bj-1">imte</button>
<button class="moxing bj-2">imte</button>
<button class="moxing bj-3">imte</button>

<style>
html{font-size: 10px;}
.moxing{
border: 1px solid #777;
background: burlywood;
}
.moxing.bj-1{font-size: 1.2rem;}
.moxing.bj-2{font-size: 1.6rem;}
.moxing.bj-3{font-size: 1.8rem;}
@media (min-width:480px) {html{font-size: 12px;}}
@media (min-width:640px) {html{font-size: 14px;}}
@media (min-width:720px) {html{font-size: 16px;}}
</style>