1. box-sizing属性解决了什么问题
答案;通过box- sizing属性来指定内容区的边界在哪里
2伪类选择器的参数 an+b的经典应用场景,实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪类选择器的参数</title>
</head>
<body>
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<style>
/*:nth-0f-type(参数)*/
/*大参数=an+ba,n,b=[0,1,2,3,4,..]*/
/*a:系数, n:计算器乘, b:偏移量*/
/*元素的有效编号: 必须从1开始,n是从0开始,b也是从0开始*/
/* nth-of-type(3) h-of-type(on+3)*/
.list > :nth-of-type(0n + 3) {
/* background-color: darkkhaki; */
}
/* 1n+b: */
.list > :nth-of-type(1n + 3) {
/* background-color: red; */
}
/*k10+3=3*/
/*1*1+3=4*/
/*1*2+3=5*/
/*大因为1乘任何数都不变,所以1可以不写*/
.list > :nth-of-type(n + 3) {
/* background-color: rebeccapurple;*/
}
/*匹配所有的偶数元素*/
/*.list > :nth-of-type(2n) {
background-color: rebeccapurple;
}*/
/* even表示偶数
.list > :nth-of-type(even) {
background-color: rebeccapurple;
}*/
/* 2 * 1 = 2 2*2 = 4 */
/*奇数
.list > :nth-of-type(2n + 1) {
background-color: rebeccapurple;
}*/
/*.list > :nth-of-type(odd) {
background-color: rebeccapurple;
}*/
/*前三个*/
.list > :nth-of-type(-n + 3) {
background-color: rebeccapurple;
}
/*-1*0+3=3
1*1+3=2
1*2+3=1
1*3+3=0(非法索引,匹配就结束了)*/
/*后三个*/
.list > :nth-last-of-type(-n + 3) {
background-color: rebeccapurple;
}
/*大总结一下
1.获取指定的某一个:(
2,获取前几个,(n-b)
3.获取指定位置后的全部元素,(n+b)
4.获取全部偶数(2n/even)或奇数(2n+1/0dd)元素*/
html {
background-color: royalblue;
}
/*:root = html */
:root {
background-color: saddlebrown;
}
</style>
<input type="text" />
<input type="text" disabled />
<style>
input:disabled {
background-color: red;
}
input:enabled {
background-color: royalblue;
}
</style>
</body>
</html>
. 3媒体查询移动优先与PC优先的区别与联系,实例演示
/* 我只要动态的改变rem的大小,就可以动态的调整每个按钮的大小 */
/* 移动优先,从最小的屏幕开始进行媒体查询 */
/* @media (min-width:480px) {
html {
font-size: 12px;
}
}
@media (min-width:640px) {
html {
font-size: 14px;
}
}
@media (min-width:720px) {
html {
font-size: 16px;
}
}*/
/* 桌面优先/pc优先 由大屏到小屏幕 */
@media (max-width:720px) {
html {
font-size: 16px;
}
}
@media (min-width:640px) {
html {
font-size: 14px;
}
}
@media (min-width:480px) {
html {
font-size: 12px;
}
}
@media (min-width:720px) {
html {
font-size: 16px;
}
}