CSS盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box 这样我们计算盒子大小的方式就发生了变化
可以分成两种情况：
-
box-sizing:content-box 盒子大小为width+padding+border （以前默认的）
-
box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box, 那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
CSS3其他特性（了解）
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法：
filter: 函数 例如：filter: blur(5px); blur模糊处理 数值越大越模糊
<style>
img {
/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
CSS3 calc 函数：
calc()此时CSS函数让你在声明CSS属性值时执行一些计算
width: calc(100%-80px);
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
括号里面可以使用+ - */来计算
CSS3还增加了一些动画2D3D等新特性，就业班继续学习
CSS3过渡（重点）
过渡（transition）是CSS3中具有颠覆性的特性之一，我们可以在不使用flash动画或JavaScipt的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态，渐渐的过渡到另一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局
我们现在经常和：hover一起搭配使用
transition: 要过渡的属性 话费时间 运动曲线 何时开始
-
属性：想要变化CSS属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡 写一个all就可以
-
花费时间：单位是 秒（必须写单位）比如0.5s
-
运动曲线：默认是ease（可以省略）
-
何时开始：单位 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
记住过渡使用的口诀：谁做过渡给谁加
进度条案例
-
进度条如何布局
-
过渡的使用
7773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
