CSS3知识汇总1

: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，越靠近屏幕则值越大，越远离屏幕则值越小

序号大的叠加在序号小的图层之上