前端学习笔记（五）2020.03.02

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型

有两个值：

content-box,border-box

1.box-sizinf: content-box 盒子大小为width + padding +border（以前默认的）

2.box-sizing: border-box 盒子大小为width

如果盒子模型我们为了box-sizing: border-box , 那padding和border就不会成大盒子了(前提是padding和border不超过盒子宽度)

 

 

CSS3的其他特性

CSS3滤镜filter

filter: 函数();

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

 

CSS3 calc函数

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

width: calc(100% - 30px); 子盒子永远比父亲小30px

括号里可以进行+ - * /的计算

 

 

CSS3新特性（重点）

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

过渡动画：时从一个状态渐渐过渡到另外一种状态

PS：常和:hover一起使用

 

transition：要过度的属性 花费时间 运动曲线 何时开始

 

 

 

如果多个属性变化，可用“，”隔开

 

广义的HTML5：

HTML5+CSS3+Javascript