css3新增特性

目录

1.css3新增选择器

2.css3新增盒子模型

3.css3新增其他特性

1.图像处理        filter：函数·

2.计算盒子宽度calc函数：

3.css3 过渡transition

---

1.css3新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

属性选择器：

属性选择器是[ ]

权重为0.0.1.0

选择器	介绍
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元素

结构伪类选择器

选择器	介绍
E：first-child	匹配父元素中的第一个子元素 E
E：last-child	匹配父元素中的最后一个子元素 E
E：nth-child（n）	匹配父元素中的第n子元素 E（n可以是数字， 可以是关键值”even“”odd“，也可以是公式，公式要带n，从0开始）
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：nth-of-type（n）	指定类型E的第n个 （n可以是数字， 可以是关键值”even“”odd“，也可以是公式，公式要带n，从0开始）

nth-child（n）和nth-of-type（n）的区别：

nth-child（n）先排列找到第n个，再匹配类型是否匹配，如果匹配就选择，如果不匹配就没有用。

nth-of-type（n）先选择匹配类型的，再在匹配类型中排序选择第n个。

伪元素选择器

伪元素选择器可以利用css创建新标签元素，而简化html结构

选择器	介绍
父元素::before	在父元素内部内容的前面插入内容
父元素::after	在父元素内部内容的后面插入内容

注意：

• before和after创建一个元素，属于行内元素
• 该元素在文档树中找不到所以称为伪元素
• 必须有content属性,添加内容，可以为空
• 该权重为0，0，0，1

使用场景：

1. 配合字体图标
2. 遮罩
3. 伪元素清除浮动

.clearfix:after {
            content: "";//必须的属性
            display: block;//需要是块级盒子
            height: 0;//不让人看见该元素
            clear: both;//清除浮动
            visibility: hidden;//不让人看见该元素
        }
        
        .clearfix {
            *zoom: 1；
        }

2.css3新增盒子模型

1. box-sizing：content-box（默认的，盒子大小为width+padding+border）
2. box-sizing：border-box（盒子大小为width，padding和border在不超过width的前提下就不会撑开盒子了）

3.css3新增其他特性

1.图像处理        filter：函数·

        例：filter：blur（5px）； blur模糊处理 数值越大越模糊

2.计算盒子宽度calc函数：

        例：

width：calc(100%-80px)

括号里可以使用    +  -  *   /计算

3.css3 过渡transition

从一个状态渐渐的过渡到另外的一个状态。2547**（常常与hover一起搭配使用）

谁做过度给谁加。

transition：要过渡的属性 花费的时间 运动曲线 何时开始;

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

例

div {
            height: 200px;
            width: 300px;
            background-color: red;
            transition: all 1s;
        }
        
div:hover {
            height: 300px;
            width: 200px;
            background-color: blue;
        }