css3三

发表于 | 分类于

box-sizing

box-sizing

box-sizing属性可以设置width和height属性中包含padding(内边距)和border(边框)

不使用box-sizing 情况

html

1
2
3
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}

使用box-sizing

html

1
2
3
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">菜鸟教程!</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

transition 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容

1
2
指定要添加效果的CSS属性
指定效果的持续时间

常见效果,实例无法在 Internet Explorer 9 及更早 IE 版本上工作
html

1
<div></div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
div
{
	width:100px;
	height:100px;
	background:red;
	transition: 2s;
	-webkit-transition: 2s; /* Safari */
}
div:hover
{
	width:300px;
}

transform 转换

html

1
<div>Hello</div>

css

1
2
3
4
5
6
7
8
9
div{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

animation 动画

html

1
<div></div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@media 媒体查询

如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变
css

1
2
3
4
5
6
7
8
9
body {
    background-color: pink;
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

用户界面

CSS3 调整尺寸(Resizing)
resize属性指定一个元素是否应该由用户去调整大小
html

1
<div>调整属性指定一个元素是否由用户可调整大小的。</div>

css

1
2
3
4
5
6
7
div{
	border:2px solid;
	padding:10px 40px;
	width:300px;
	resize:both;
	overflow:auto;
}