CSS3盒子模型
CSS可通过box-sizing来指定盒子模型,有2个值:即可指定为content-box,border-box,这样我们计算盒子大小的方式就发生了改变.
可以分成两种情况:
box-sizing:content-box 盒子大小为width+padding+border(以前默认的).
box-sizing:border-box 盒子大小为width.
当我们选择box-sizing为border-box以后,它的盒子大小就不会因为边框大小而被撑开了,变成了内填充.
如果盒子模型我们改为了box-sizing:border-box,即padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
注意:
在使用border-box以后文字垂直居中要将line-height减去上下的margin值和padding值
CSS3其他特性(了解)
变模糊
计算盒子宽度:width:calc函数
1.CSS3滤镜:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素.
语法:
filter:blur( ); 里面的数值需带单位,数值越大越模糊
2.calc( )函数:
calc()此函数让你在声明CSS属性值时执行一些计算.
举个例子:
width:calc(100%-30px);
它的意思就是盒子的宽度永远比父盒子的宽度小30px,括号里的可以使用+-*/来进行计算,但是注意运算符之间一定要有空格!!!
CSS3过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不适用flash动画或JavaScript的情况下,当元素从一种样式转变成另一种样式时为元素添加效果.
过渡动画: 是从一个状态 渐渐地过渡到另一个状态.
可以让我们的页面更加好看,更动感,虽然低版本浏览器不支持(ie9以下版本),但是不会影响页面布局
我们现在经常和:hover一起使用.
transition:要过渡的属性 花费时间 运动曲线 何时开始
记住过渡的口诀:给谁过渡给谁加.
尝试了一下,特别有意思.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 给谁过渡给谁加 */
/* 如果所有属性都要更改,就用all */
transition: all 2s ;
}
.box:hover {
width: 500px;
height: 300px;
background-color: salmon;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这也太丝滑了吧!!
最后还做了一下老师布置的作业.
今天就先学到这里,明天要做一个项目了!现在先去看书咯，晚上再复习一遍，觉得自己学的好慢好慢！！但是只要学会就行(但是真的要勤快点了！！！)
发表评论 取消回复