CSS3的新特性

1.盒子模型：

新增了box-sizing属性，通过该属性可以控制元素的尺寸和边框。

1.1有两种盒模型：

标准盒模型：宽度只包括content部分，padding、border、margin会额外增加到总宽高(box-siezing：content-box切换 )；IE盒模型：宽度包含content、padding和border部分，设置的width就包含了border和padding(box-sizing： border-box 切换)。

2.背景与边框：

如多种背景图片、边框图片(border-image)等。

3.变形(transform)和过渡(transition)：

transform属性：对元素进行平移(translate)、旋转(rotate)、缩放（scale）等变形操作。

transition属性：可以为元素属性变化添加动态效果。

4.动画(animation)：

使用@keyframes规则定义动画的关键帧，然后通过animation引用这些动画。

5.Flex和Grid布局：

Flex布局：flex布局是一维的，通过控制主轴和交叉轴对元素进行排列。专注于对行或列的布局。

Grid布局：grid布局是二维的，可以同时控制行和列进行布局。

6.媒体查询：

使得网页设计可以相应不同设备的尺寸和特性。

<style>
    .....

    /*媒体查询，检测视口宽度，满足375px才能执行其中的CSS属性*/
    @media(width:375px){
        html {
          ....css属性

        }
    }
</style>

7.伪类和伪元素：

伪类：用于选择那些特殊状态下的元素。常见的伪类： :hover、:focus、:nth-child等。

伪元素：用于选取和样式化某个元素的一部分。常见的伪元素： ::before、::after、::first-line等。