:nth-child()函数
可以接收一个形如an+b的表达式作为参数，其中a和b是整数，n是从0开始的自然数列
div:nth-child(0n+7)，选择第7个元素，可以简写为div:nth-child(7)
div:nth-child(1n+3)，此时的数列为{3，4，5，6，...}，表示选择第3个元素及其后所有元素
div:nth-child(2n+1)，此时的数列为{1，3，5，7，...}，表示选择第奇数个元素，可以简写为div:nth-child(odd)
div:nth-child(2n+0)，此时的数列为{2，4，6，8，...}，表示选择第偶数个元素，可以简写为div:nth-child(2n)或div:nth-child(even)
div:nth-child(5n)，此时的数列为{5，10，15，20，...}，表示选择第5的倍数的元素
div:nth-child(6n+3)，此时的数列为{3，9，15，21，...}，表示从第3个元素开始，其后每隔6个元素被选中一个
:not()伪类用于排除掉一些元素，例如:not(:first-child)表示排除掉第1个元素
em是相对于font-size
先要确定一个基准，其他尺寸都以这个基准来计算，只要改基准，其他的按比例就变了
如font-size:10px; 那么1em=10px 1.5em=15px
<figure class="magnifier">
<div class="lens"></div>
<div class="handle"></div>
</figure>
.magnifier{
position: relative;
color:dodgerblue;
font-size: 10px;
}
.lens{
position: absolute;
width: 10em;
height: 10em;
border:1em solid;
border-radius: 50%;
}
.handle{
position: absolute;
width:2em;
height: 10em;
border-radius: 0 0 1em 1em;
background-color:currentColor; //当前文字的颜色
left:10em;
top:10em;
transform:rotate(-45deg);
transform-origin:top;
}
布局
强调：float布局已经过时了
<flex布局>
1.display:flex
2.居中
align-items: center;垂直居中
justify-content: center;水平居中
3.横向排列元素
justify-content: flex-start; 居左
justify-content: flex-end; 居右
justify-content: space-between; 首尾的两个元素挨着容器边缘，中间的其他元素平均排列
justify-content: space-around; 首尾的两个元素与容器边框的距离是元素之间间距一半，各元素平均排列
4.纵向排列元素
flex-direction: column;
<grid布局>
如果子元素要布局成行列形式的矩阵，flex不能实现
grid布局是table布局的升级
display:grid
z-index是元素在z轴上所处的次序
z轴是一条垂直穿过屏幕的轴，以屏幕所在的平面为0，越靠近屏幕则值越大，越远离屏幕则值越小
序号大的叠加在序号小的图层之上
网友评论