CSS之box-sizing、图片模糊、计算盒子宽度clac、（重点含小米、进度条案例）过渡
一、Box-sizing
在使用盒子模型时往往会出现由于border\ padding设置过大，从而导致的盒子被撑大的情况。
此时可以设置box-sizing: border-box (padding和boeder加起来设置的值不可超出width)
此时不会撑大盒子。可在初始化时一起设置
* {
padding:0;
maigin: 0;
box-sizing: border-box;
}二、 图片模糊
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片模糊处理filter</title><style>img {/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */filter: blur(15px);}img:hover {filter: blur(0);}</style>
</head>
<body><img src="images/pink.jpg" alt="">
</body>
</html>三、盒子宽度的计算（calc函数）
例如：width: calc (100%-80px) [括号内可以使用+-*/符号]
四、过渡效果
4.1 进度条案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background-color: #fff;font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;color: #666;}/* 取出盒子的默认内外边距 */* {margin: 0;padding: 0;}ul {/* 取消无序列表前面小圆点 */list-style: none;}/* 取消a标签下划线 */a {text-decoration: none;}/* 让斜体不倾斜 */em {font-style: normal;}/* li 的样式 */.goods {position: relative;float: left;width: 288px;height: 458px;}/* 2号盒子标题的样式 */.goods_title {font-size: 14px;color: #666;font-weight: normal;padding: 10px;}/* 3号盒子价格样式 */.goods_price {padding: 0 10px;}/* 3号盒子里面 左侧价格样式 */.goods_price em {font-size: 22px;color: #e60012;}/* 3号盒子里面 右侧价格样式 */.goods_price del {font-size: 14px;font-weight: 700;color: #a4a4a4;}/* 4号盒子样式 */.goods_progress {padding: 0 10px;}/* 4号盒子中间进度条外层盒子样式 */.bar {display: inline-block;width: 130px;height: 10px;border: 1px solid #b1191a;vertical-align: middle;margin: 0 5px;border-radius: 5px;}/* 4号盒子中间进度条内层盒子样式 */.bar_in {width: 87%;height: 10px;background-color: #f24349;}/* 设置4号盒子里面文字颜色 */.goods_progress em,.goods_progress i {color: #f24349;}/* 5号盒子 a 标签的样式 */.goods_buy {position: absolute;bottom: 0;width: 100%;height: 50px;background-color: #b1191a;color: #fff;text-align: center;line-height: 50px;font-size: 20px;}</style>
</head><body><ul><li class="goods"><img src="images/mobile.jpg" alt=""><h5 class="goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><p class="goods_price"><em>¥6088</em> <del>￥6988</del></p><div class="goods_progress">已售<i>87%</i><div class="bar"><div class="bar_in"></div></div>剩余<em>29</em>件</div><a href="#" class="goods_buy">立即抢购</a></li></ul>
</body></html>4.2 仿小米logo
滑动效果 ： 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.header-logo {position: relative;}/* 设置a标签的样式 */.logo {display: block;width: 55px;height: 55px;overflow: hidden;background-color: #ff6700;text-align: left;text-indent: -9999em;}/* mi logo的样式 */.logo::before {/* 定位 */position: absolute;/* 伪元素必须要设置content属性 */content: '';/* 左偏移 */left: 0;/* 上偏移 */top: 0;width: 55px;height: 55px;/* 设置过渡 */transition: all .3s;/* 背景图片 */background: url(./images/mi-logo.png) no-repeat center center;/* 透明度 */opacity: 1;}/* mi home 的样式 */.logo::after {position: absolute;content: '';left: 0;top: 0;width: 55px;height: 55px;transition: all .3s;background: url(./images/mi-home.png) no-repeat center center;margin-left: -55px;opacity: 0;}/* 鼠标移入 让mi logo 往右侧进行滑动 */.logo:hover::before {opacity: 0;margin-left: 55px;}/* 鼠标移入 让mi home 回到盒子中间 */.logo:hover::after {opacity: 1;margin-left: 0;}</style>
</head><body><div class="header-logo"><a href="" class="logo" title="小米官网">小米官网</a></div>
</body></html>