css3盒子模型、filter滤镜、calc函数、过渡

1.21

目录

css3盒子模型

filter滤镜

calc函数

过渡

---

css3盒子模型

CSS3中可以通过box- sizing来指定盒模型,有2个值:即可指定为content- box、border-box ,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:
1. box-sizing: content- box ；  盒子大小为width + padding + border ( 以前默认的)
2. box-sizing: border-box；     盒子大小为width（重要）

如果盒子模型我们改为了box- sizing: border-box，那padding和border就不会撑大盒子了

使用padding和margin不会改变盒子规定的大小。

(前提padding和border不会超过width的宽度)

---

filter滤镜

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter:函数();    （使用方法）

例如: filter: blur(5px);          blur模糊处理 数值越大越模糊

添加模糊效果（blur）函数

例如：

 

---

calc函数

calc（） 此CSS函数让你在声明CSS属性值时执行一些计算。

例如：

width: calc(100% - 80px);   （运算符号前后必须有空格）注意包含单位

（此处意思为继承父盒子宽度，然后再减去80px，即父盒子发生变化，                                                子盒子总相对父盒子少80px）

括号里面可以使用    + - * /      来进行计算。

---

过渡(transition）***重点***

过渡( transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或
JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持( ie9以下版本)但是不会影响
页面布局。.

我们现在经常和:hover 一起搭配使用。

transition:  要过渡的属性  花费时间  运动曲线   何时开始;

1.属性:        想要变化的css属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个   all   就可以。
2.花费时间:        单位是秒(必须写单位)比如0.5s
3.运动曲线:        默认是ease ( 可以省略)
4.何时开始:         单位是秒(必须写单位)可以设置延迟触发时间默认是0s ( 可以省略)

记住过渡的使用口诀:谁做过渡给谁加

运动曲线：

 

 例如：

transition: width 0.5s linear 0s;