css：css3新特性（盒子模型的box-sizing属性、图片模糊处理、calc函数）

1、盒子模型

（1）border属性和padding属性会影响盒子的实际大小：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <script></script>
       <style>
           div{
                200px;
               height: 200px;
               background-color: black;
               border: 30px solid red;
           }
       </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <script></script>
       <style>
           div{
                200px;
               height: 200px;
               background-color: black;
               padding: 30px;
           }
       </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

（2）box-sizing的属性为content-box时：盒子大小为width+padding+border（默认值）

     div{
                200px;
               height: 200px;
               background-color: black;
               border: 30px solid red;
               box-sizing: content-box;
           }

（3）box-sizing的属性为border-box时，盒子的大小为width，border和padding不会影响盒子的实际大小：

       div{
                200px;
               height: 200px;
               background-color: black;
               border: 30px solid red;
               box-sizing:border-box;
           }

2、图片模糊处理

（1）处理前：

（2）模糊处理：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <script></script>
       <style>
           img{
               filter: blur(3px);
           }
       </style>
    </head>
    <body>
        <img src="img/hua.png" />
    </body>
</html>

3、calc函数

在声明css属性的值的时候能够进行一些计算

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <style>
            .father {
                 300px;
                height: 300px;
                background-color:aqua;
            }
            
            .son {
                 calc(100% - 50px);
                height: calc(100% - 50px);
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
        
    </body>

</html>

效果：

100%代表父盒子的大小
要注意运算符前后加空格