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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,658评论 0 7
  • 初始CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大...
    llt00阅读 440评论 0 0
  • flex 布局是 css3 中使用最频繁也是最出色的功能,有点复杂,分为应用在容器上的属性和项目上的属性,即父元素...
    LaBaby_阅读 378评论 0 0
  • CSS3掷骰子动画 练习一下css3的弹性盒布局,做了一个骰子,随便扔一下吧骰子.gif 一、拆分模块,先分别做出...
    learninginto阅读 2,052评论 0 9
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,838评论 0 4