CSS(3的特性)

最新推荐文章于 2024-10-25 17:02:44 发布

JLAU Veritas

最新推荐文章于 2024-10-25 17:02:44 发布

阅读量167

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_52621162/article/details/132278534

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”"]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val 结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择器示素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child ( n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始…
n可以是关键字:even偶数，odd奇数
n可以是公式︰常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ……
n+5	从第5个开始（包含第5个）到最后
-n+5	前5个（包含第5个）……

区别:

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

3. 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意∶

before和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法: elementbefore {}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为1

4. CSS3 盒子模型

CSS3中可以通过 box-sizing来指定盒模型，有2个值∶即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况︰

box-sizing:content-box盒子大小为width + padding + border (以前默认的)
box-sizing: border-box盒子大小为width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

5. 其他特性

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如: filter: blur(5px); blur模糊处理数值越大越模糊

calc 函数：

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);

括号里面可以使用+ - * /来进行计算。

6. CSS3 过渡

transition: 要过渡的属性1 花费时间 运动曲线 何时开始，要过渡的属性2 花费时间 运动曲线 何时开始;/*多种属性变化用逗号隔开，也可以用all*/

属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
花费时间:单位是秒(必须写单位）比如0.5s
运动曲线:默认是ease (可以省略)
何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)

7. 2D转换

7.1 移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点︰不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

7.2 旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数)

重点：

rotate里面跟度数，单位是deg 比如rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

7.3 中心点 transform-origin

设置元素旋转的中心点

语法：

transform-origin: x y;

重点:

注意后面的参数x和y用空格隔开
x y 默认转换的中心点是元素的中心点(50% 50%)
还可以给x y设置像素或者方位名词 ( top bottom left right center )

7.4 缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform: scale(x,y);/* x,y表示倍数不跟单位 */
/*宽高等比例缩放*/
transform: scale(n);

重点：

缩放不影响其他盒子；
可以设置缩放中心点

7.5 综合写法

注意∶

同时使用多个转换，其格式为: transform:translate() rotate() scale() …等，
其顺序会影转换的效果。(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前

8. 动画

8.1 动画的基本使用

制作动画分为两步：

先定义动画
在调用动画

1. 用keyframes 定义动画

@keyframes 动画名称 {
    0%{
        width: 100px;
    }
    100%{
        width: 200px;
    }
}

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种祥式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。

2. 调用动画

div {
    /*调用动画*/
    animation-name: 动画名称;
    /*持续时间*/
    animation-duration: 持续时间;
}

简写：

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

8.2动画常见属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。(必须的)
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的)
animation-timing-function	规定动画的速度曲线，默认是“ease”。steps(步长)
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards