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>
<!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>
（2）box-sizing的属性为content-box时：盒子大小为width+padding+border（默认值）
div{ width: 200px; height: 200px; background-color: black; border: 30px solid red; box-sizing: content-box; }
（3）box-sizing的属性为border-box时，盒子的大小为width，border和padding不会影响盒子的实际大小：
div{ width: 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 {
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>
效果：
- 100%代表父盒子的大小
- 要注意运算符前后加空格