前端基础-CSS3和CSS2的区别
二、css3和css2的区别
css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画
H5=html5 + css3 +js
大前端：js
1.内减模式
可以将padding内边距和边框带来增大盒子的影响去掉
语法：box-sizing:border-box;
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#099;
border:20px solid #333;
padding:50px;
box-sizing:border-box;/* 设置内减模式 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>效果图 |
|---|
总结：不能去margin带来盒子大小的影响
2.新增属性选择器
a) 语法：元素[属性^=值]
选择以指定字符开头的属性值的元素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
[name^='user']{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>效果图 |
|---|
b) 语法：元素[属性$=值]
选择以指定字符结尾的属性值的元素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* 属性值以指定字符结尾的元素 */
[name$="e"]{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>效果图 |
|---|
3.新增伪类选择器
伪类选择器 | 作用 |
|---|---|
:root | 可以理解为根 |
li:first-child | 代表找出父元素中第一个li子元素 |
li:last-child | 代表找出父元素中最后一个li子元素 |
li:nth-child(n) | 找出父元素中的第n个li子元素 |
li:nth-child(even) | 代表找出父元素中奇数的li子元素 |
li:nth-child(odd) | 代表找出父元素中偶数的li子元素 |
li:empty | 代表找出父元素中li子元素内容为空的标签 |
li:nth-of-type(n) | 找出li标签中第几个 |
li:first-of-type | 找出li标签中第一个 |
li:last-of-type | 找出li标签中最后一个 |
li:only-child | 唯一子元素 |
总结：重点：li:first-child li:last-child li:nth-child(n) li:nth-child(2n+1)奇数元素
4. 2d变换效果
可以设置移动，旋转，大小
语法：transform:值
a)移动
语法：transform:translate(值1,值2);
取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:translate(50px,20px); /* 横线移动和纵向移动 */
/*transform:translateY(50px);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>效果图 |
|---|
多学一招：只设置x轴或者y轴的移动可以使用translateX和translateY，里面只设置一个值即可
b)旋转
语法：transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
取值：
1.角度写法：数字deg。
2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
margin:200px;
border-left:10px solid #0f0;
border-bottom:10px solid #00f;
}
.box:hover{
transform:rotate(45deg);/* 设置旋转和角度 */
transform-origin:left top;/* 设置旋转的圆心 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>效果图 |
|---|
c)缩放
语法：transform:scale(值)
取值：倍数，可以是整数，也可以是小数
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
</div>
<p>asdf</p>
</body>效果图 |
|---|
多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例
5.过渡效果
是一个动画的效果
语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
display:block;
margin:50px auto;
border:1px solid #000;
/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
transition:transform 2s linear;
}
img:hover{
transform:scale(1.5);
}
</style>
</head>
<body>
<img src="img/meinv.jpg" />
</body>效果图 |
|---|
