css3新添加的常用的特性有哪些?
1.邊框:border-radius、box-shadow、border-image
2.背景:背景漸變、background-image、background-size、background-origin、background-clip
3.2D轉換:transform,取值:translate、scale、screw、rotate、matrix合併前面幾項位移,3D轉換,即在前面幾個加 3d
4.動畫:transition、animation
5.彈性盒子:flex box
一、css3新特性
1.position新增:sticky,表現爲吸頂,當元素在視野範圍內時,與position:relative,表現相同,當元素不在視野範圍內時,與position:fixed表現相同。但是需要注意的一點是:sticky屬性必須與top、left、bottom、right任意之一結合纔可以生效。例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>postion-sticky</title>
<style>
.title {
position: sticky;
height: 30px;
width: 100%;
background: red;
top: 0;
}
.content {
height: 200px;
background: blue;
}
.content:nth-child(even) {
background: orange;
}
</style>
</head>
<body>
<div class="title"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>
</html>
2.flex彈性佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display-flex || inline-flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.flex {
display: flex;
border: 1px solid red;
background-color: grey;
flex-direction: column;
}
.item {
padding: 5px 10px;
background-color: white;
flex: auto;
}
.content-wrap {
display: flex;
flex-direction: row;
padding: 0;
}
.header,.footer{
background: red;
}
.side {
flex: 1;
background: blue;
}
.content {
flex: 3;
display: flex;
flex-direction: column;
}
.content1 {
flex: 1;
background: grey;
}
.content2 {
flex: 1;
background: pink;
}
.content3 {
flex: 1;
background: orange;
}
</style>
</head>
<body>
<div class="flex">
<div class="item header">header</div>
<div class="item content-wrap">
<div class="side">side</div>
<div class="content">
<div class="content1">
content1<br>content1<br>content1<br>content1<br>content1<br>content1<br>
</div>
<div class="content2">content2<br>content2<br>content2<br>content2<br>content2<br></div>
<div class="content3">content3<br>content3<br>content3<br>content3<br>content3<br>content3<br>content3<br>content3<br>content3<br></div>
</div>
</div>
<div class="item footer">footer</div>
</div>
</body>
</html>
結果: