css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

1、盒子模型

(1)border属性和padding属性会影响盒子的实际大小:

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

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 

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

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 (2)box-sizing的属性为content-box时:盒子大小为width+padding+border(默认值)

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

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 (3)box-sizing的属性为border-box时,盒子的大小为width,border和padding不会影响盒子的实际大小:

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

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 

2、图片模糊处理

(1)处理前:

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 (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>

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

 

 3、calc函数

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

<!DOCTYPE html>
<html>

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

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

</html>

效果:

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

 

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

 

css:css3新特性(盒子模型的box-sizing属性、图片模糊处理、calc函数)

上一篇:web Magic报错NoSuchMethodError


下一篇:《架构即未来 现代企业可扩展的Web架构流程和组织》