一、CSS3的新特性
1.1、CSS3盒子模型
css3中可以通過來指定盒子模型，有2個值：即可指定為
、
，這樣我們計算盒子大小的方式就發(fā)生了改變。
可以分為兩種情況：
- box-sizing:content-box 盒子大小為 width + padding + border （以前默認的）
- box-sizing:border-box 盒子大小為width
如果盒子模型我們改為了box-sizing:border-box，那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）
<!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>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最終的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小豬喬治
</div>
<p>
小豬佩奇
</p>
</body>
</html>
image.png
1.2、CSS3其他特性（了解）
-
圖片變模糊
filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。
image.png
<!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>圖片模糊處理filter</title>
<style>
img {
/* blur是一個函數(shù) 小括號里面數(shù)值越大，圖片越模糊 注意數(shù)值要加px單位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
</html>
image.png
-
計算盒子寬度 width:calc 函數(shù)
image.png
<!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>CSS3屬性calc函數(shù)</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我們的子盒子寬度永遠比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
image.png
1.3、CSS過濾（重點）
transition: 要過濾的屬性 花費時間 運動曲線 何時開始;
1. 屬性：想要變化的CSS屬性，寬度高度 背景顏色 內(nèi)外邊距都可以。如果想要所有的屬性都變化過濾，寫一個all就可以。
2.花費時間：單位是秒（必須寫單位）比如0.5s。
3.運動曲線：默認是ease（可以省略）。
4.何時開始：單位是秒(必須寫單位)可以設置延遲觸發(fā)時間 默認是0s（可以省略）
image.png
<!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>CSS3 過渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 變化的屬性 花費時間 運動曲線 何時開始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要寫多個屬性，利用逗號進行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多個屬性都變化，屬性寫all就可以了 */
/* transition: height .5s ease 1s; */
/* 誰做過渡，給誰加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image.png
1.4、進度條練習
image.png
<!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>CSS3過渡練習-進度條</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
/* 誰做過渡給誰加 */
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
二、總結
狹義的HTML5 CSS3
image.png
廣義的HTML5
image.png
