【前端從入門到精通：第九課：CSS3新增屬性及伸縮盒布局】

彈性盒模型

介紹
伸縮盒模型也叫彈性盒模型，或flex。它決定一個盒子在其它盒子中的分布，以及如何處理可用的空間。使用該模型，可以輕松的創建“自適應”瀏覽器窗口的流動布局。
flexbox是一個很新的東西，在w3c希望可以使用flexbox實現一些更復雜的布局和應用。傳統盒模型基于HTML文檔流排列，使用彈性盒模型可以規定特定的順序。要開啟彈性盒模型，只需要設置display的屬性值 flex，因為它是CSS3中為display新添加的值類型。
目的

在瀏覽器窗口變化時，盒子相應改變大小。設置了彈性盒模型后，float，clear和vertical-align在flex中不起作用。
display:flex 定義父容器是一個彈性盒。

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>flex</title><style>.one{width:980px;height: 500px;border:1px solid #ddd;margin: 20px auto;/*伸縮盒屬性需要給容器設置*/display: flex;}.one>div{width: 400px;height: 300px;border:1px solid tomato;;}</style></head><body><!--父容器--><div class="one"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div></body>
</html>

display:inline-flex 定義父容器時行內彈性盒

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>flex</title><style>.one{width:980px;height: 500px;border:1px solid #ddd;margin: 20px auto;/*伸縮盒屬性需要給容器設置*/display: inline-flex;}.one>div{width: 400px;height: 300px;border:1px solid tomato;;}</style></head><body>a<!--父容器--><div class="one"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div>a</body>
</html>

Justify-content 設置活檢索彈性盒子元素在(主軸)方向上的對齊方式。

flex-start 默認值。項目位于容器的開頭
flex-end 項目位于容器的結尾
center 項目位于容器的中心
space-between 項目位于各行之間留有空白的容器內。
space-around 項目位于各行之前、之間、之后都留有空白的容器內。
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>flex</title><style>.one,.two,.three,.four{width:980px;height: 500px;border:1px solid #ddd;margin: 20px auto;/*伸縮盒屬性需要給容器設置*//*display: inline-flex;*/display: flex;/*設置主軸對齊方式*//*設置結尾*/justify-content: flex-end;}.one>div,.two>div,.three>div,.four>div{width: 200px;height: 300px;border:1px solid tomato;;}.two{/*設置主軸居中*/justify-content: center;}.three{/*設置主軸兩端對齊中間留有對應的空白*/justify-content: space-between;}.four{/*兩端留有對應的空白 中間留有對應的空白*/justify-content: space-around;}</style></head><body><!--父容器--><div class="one"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div><div class="two"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div><div class="three"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div><div class="four"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div></body>
</html>

align-items 定義flex子項在flex容器的當前行的側軸(縱軸)方向的對齊方式

stretch 默認值，項目被拉伸以適應容器
center 項目位于容器的中心
flex-start 項目位于容器的開頭
flex-end 項目位于容器的結尾
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>flex</title><style>.one,.two,.three,.four{width:980px;height: 500px;border:1px solid #ddd;margin: 20px auto;/*伸縮盒屬性需要給容器設置*//*display: inline-flex;*/display: flex;/*設置主軸對齊方式*//*設置結尾*/justify-content: flex-end;/*設置側軸對齊方式 垂直(默認)*/align-items: flex-end;}.one>div,.two>div,.three>div,.four>div{width: 200px;height: 300px;border:1px solid tomato;;}.two{/*設置主軸居中*/justify-content: center;/*設置側軸居中*/align-items: center;}.two>div:nth-child(2){display: flex;justify-content: center;align-items: center;}.three{/*設置主軸兩端對齊中間留有對應的空白*/justify-content: space-around;/*設置開頭*/align-items: flex-start;}.four{/*兩端留有對應的空白 中間留有對應的空白*/justify-content: space-around;/*默認的*/align-items: stretch;}</style></head><body><!--父容器--><div class="one"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div><div class="two"><!--每一個被包含的就是一個項目--><div>左</div><div>中</div><div>右</div></div><div class="three"><!--每一個被包含的就是一個項目--><div>flex-start左</div><div>中</div><div>右</div></div><div class="four"><!--每一個被包含的就是一個項目--><div>stretch左</div><div>中</div><div>右</div></div></body>
</html>

flex-direction 設置主軸的方向

row：主軸與行內軸方向作為默認的書寫模式。即橫向從左到右排列（左對齊）。
row-reverse：對齊方式與row相反。
column：主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列（頂對齊）。
column-reverse：對齊方式與column相反。
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width: 980px;height: 800px;border: 1px solid #ddd;margin: 10px auto;display: flex;/*flex-direction:row-reverse ;*//*設置縱軸為主軸*//*flex-direction: column;*//*flex-direction: column-reverse;*/flex-direction: column;/*設置縱軸的對齊方式*/justify-content: center;/*設置側軸的對齊方式*/align-items: center;}.one>div{width: 200px;height: 200px;border: 1px solid tomato;}</style></head><body><div class="one"><div>第一塊</div><div>第二快</div><div>第三塊</div></div></body>
</html>

flex-wrap 控制flex容器是單行或者多行。

nowrap： flex容器為單行。該情況下flex子項可能會溢出容器
wrap： flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉 wrap 排列。
案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 980px;height: 500px;border: 1px solid #ddd;margin: 10px auto;display: flex;/*設置為多行*//*flex-wrap: nowrap;*/flex-wrap:wrap;/*flex-wrap: wrap-reverse;*/}.one>div{width: 300px;height: 200px;border: 1px solid orange;}</style>
</head>
<body><div class="one"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>

flex-flow:‘flex-direction’ || ‘flex-wrap’

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 980px;height: 500px;border: 1px solid #ddd;margin: 10px auto;display: flex;/*設置為多行*//*flex-wrap: nowrap;*//*flex-wrap:wrap;*//*flex-wrap: wrap-reverse;*//*簡寫屬性*/flex-flow: row-reverse wrap;}.one>div{width: 300px;height: 200px;border: 1px solid orange;}</style>
</head>
<body><div class="one"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>

align-content 與align-items類似，主要用來調準伸縮行在伸縮容器里的對齊方式(多行時)

flex-start ：各行向伸縮容器的起點位置堆疊。
flex-end ：各行向伸縮容器的結束位置堆疊。
center ：各行向伸縮容器的中間位置堆疊。
space-between ：各行在伸縮容器中平均分布。
space-around ：各行在伸縮容器中平均分布，在兩邊各有一半的空間。
stretch ： align-content 的默認值，各行將會伸展以占用額外的空間。
案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 980px;height: 500px;border: 1px solid #ddd;margin: 10px auto;display: flex;/*設置為多行*//*flex-wrap: nowrap;*/flex-wrap:wrap;/*flex-wrap: wrap-reverse;*//*簡寫屬性*//*flex-flow: row-reverse wrap;*//*align-items: center;*//*作用與align-items類似 適用于多行*//*align-content: flex-start;*//*align-content: flex-end;*/align-content: center;/*align-content: space-around;*//*align-content: space-between;*/justify-content: space-between;}.one>div{width: 300px;height: 200px;border: 1px solid orange;}</style>
</head>
<body><div class="one"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>

flex-grow:number 規定項目將相對于其他靈活的項目進行擴展的量。默認是0。

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width: 980px;height: 200px;border: 1px solid #ddd;margin: 10px auto;display: flex;align-items: center;justify-content: space-between;}.one>div{border: 1px solid tomato;}.one>div:first-child{flex-grow: 1;}.one>div:nth-child(2){flex-grow: 2;}.one>div:nth-child(3){flex-grow: 1;}</style></head><body><div class="one"><div>1</div><div>2</div><div>3</div></div></body>
</html>

CSS3新增屬性

瀏覽器私有前綴

-moz- Firefox
-webkit- chrome safari
-ms- IE
-o- Opear
作用
用于區分不同瀏覽器的內核，當CSS屬性是實驗性質的時候，可以加瀏覽器私有前綴，讓對應瀏覽器兼容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width:800px;height:300px;background:pink;display: flex;/*-webkit-display:flex;*/display: -o-flex;display: -webkit-flex;display: -moz-flex;display:-ms-flex;justify-content: space-between;-o-justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;-webkit-align-items: center;}.one>div{width:200px;height:200px;background:tomato;}</style></head><body><div class="one"><div></div><div></div><div></div></div></body>
</html>

圓角、陰影、漸變

border-radius 圓角

border-radius:左上角水平右上角水平右下角水平左下角水平 / 左上角垂直右上角垂直右下角垂直左下角垂直
border-radius:4個角水平半徑/4個角垂直半徑
關于圓角的形成
從指定角的頂端向內部引出垂直半徑和水平半徑
將水平半徑和垂直半徑相較于元素內部的一點(圓心點)
以該點為圓心，指定的垂直半徑和水平半徑畫圓或者橢圓
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width:100px;height:100px;border:1px solid #000;/*最完整格式：2個參數8個值*//*border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;*//*2個參數 4個值*//*border-radius: 10px 20px / 10px 20px;*//*1個參數 4個值*//*border-radius: 10px 20px 30px 40px;*//*1個參數 2個值*//*border-radius: 10px 20px;*//*1個參數 1個值*//*border-radius: 10px;*//*1個參數 3個值*//*border-radius: 10px 20px 15px;*//*border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;*//*border-radius: 50px;*//*border-radius: 50%;*/border-radius: 61px;}</style></head><body><div class="one"></div></body>
</html>

圓角邊框案例(太極)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.tj{width: 100px;height: 50px;border:1px solid red;border-bottom:50px solid red;border-radius: 50%;position: relative;}.tj:before{width: 10px;height: 10px;background: #fff;content: ' ';border:20px solid red;position: absolute;top:25px;left:0px;border-radius: 50%;}.tj:after{width: 10px;height: 10px;background: red;content:" ";border:20px solid #fff;position: absolute;top:25px;right:0px;border-radius: 50%;}</style></head><body><div class="tj"></div></body>
</html>

陰影

盒子陰影 box-shadow：陰影1，陰影2……；

陰影格式:水平偏移位置垂直偏移位置模糊度外延值顏色內置陰影；
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{font-size: 100px;text-shadow: -5px -5px 5px red,-10px -10px 5px orange;}.two{width:100px;height:100px;margin:50px;border:1px solid #000;border-radius: 50%;display: flex;align-items: center;/*box-shadow: 5px 5px red;*//*box-shadow: 5px 5px 5px red;*//*box-shadow: -5px 5px 5px red;*//*box-shadow: 0px 0px 5px red;*//*外延值*//*box-shadow: 0px 0px 5px 10px red;*//*內置陰影*//*box-shadow: 0px 0px 5px 10px red inset;*//*彩虹*/box-shadow: 0px 0px 5px 5px red,0px 0px 5px 10px orange,0px 0px 5px 15px yellow,0px 0px 5px 20px green;}</style></head><body><div class="one">我是文字陰影</div><div class="two">我是盒子陰影</div></body>
</html>

文字陰影 text-shadow：陰影1，陰影2……；

陰影格式:水平偏移位置垂直偏移位置模糊度顏色 ;
案例

```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{font-size: 100px;text-shadow: -5px -5px 5px red,-10px -10px 5px orange;}</style></head><body><div class="one">我是文字陰影</div></body></html>```

漸變

linear-gradients 線性漸變

/* 從上到下，藍色漸變到紅色 */ linear-gradient(blue, red); /* 漸變軸為45度，從藍色漸變到紅色 */ *linear-gradient(45deg, blue, red); /* 從右下到左上、從藍色漸變到紅色 */*linear-gradient(to left top, blue, red); /* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */linear-gradient(0deg, blue, green 40%, red);

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*線性漸變*/.one{width: 200px;height: 200px;/*background: linear-gradient(to bottom,red,blue);*//*background: linear-gradient(to top,red,blue);*//*background: linear-gradient(to left,red,blue);*//*background: linear-gradient(to right,red,blue);*//*background-color:linear-gradient(to top,red,blue);*//*background-image:linear-gradient(to right bottom,red,blue);*/background-image: linear-gradient(120deg,red,green,blue);}</style></head><body><div class="one">線性漸變</div></body>
</html>

radial-gradient 徑向漸變

/*形狀 大小 as 位置*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 取值
- ellipse(默認)：指定橢圓形的徑向漸變
- circle:指定圓形的徑向漸變
size 取值
- farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
- closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
- closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角
- farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
position 取值
- center（默認）：設置中間為徑向漸變圓心的縱坐標值。
- top：設置頂部為徑向漸變圓心的縱坐標值。
- bottom：設置底部為徑向漸變圓心的縱坐標值。
- left:設置左為徑向漸變圓心的縱坐標值。
- right:設置右為徑向漸變圓心的縱坐標值。
- 也可使用百分比
案例

 ```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*線性漸變*/.one{width: 200px;height: 200px;/*background: linear-gradient(to bottom,red,blue);*//*background: linear-gradient(to top,red,blue);*//*background: linear-gradient(to left,red,blue);*//*background: linear-gradient(to right,red,blue);*//*background-color:linear-gradient(to top,red,blue);*//*background-image:linear-gradient(to right bottom,red,blue);*//*background-image: linear-gradient(120deg,red,green,blue);*/background-image: repeating-linear-gradient(red 15%,green 20% ,blue 30%);}/*徑向漸變*/.two{width: 200px;height: 200px;border:1px solid #000;margin: 50px;/*background-image:radial-gradient(ellipse farthest-side,red,orange,blue);*//*background-image: radial-gradient(circle closest-corner at top,red,blue);*//*background-image: radial-gradient(circle closest-corner at left,red,blue);*//*background-image: radial-gradient(circle closest-corner at right,red,blue);*/background-image: radial-gradient(circle closest-corner at 50% 50%,red,blue);/*background-image: repeating-radial-gradient(circle at 50% 50%,red 10%,green 20%,blue 30%);*/}</style></head><body><div class="one">線性漸變</div><div class="two">徑向漸變</div></body></html>

轉換Transform

transform2D

translate(x,y) 2D轉換轉換
scale(x,z) 2D縮放
rotate(angle) 2D旋轉
skew(x-angle,y-angle) 2D傾斜
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2D轉換</title><style>#box1,#box2,#box3{width: 200px;height: 200px;border:1px solid blue;}#box1:hover{/*transform: translateX(50px) translateY(50px);*//*transform: translate(50px,100px);*//*水平和垂直方向移動函數：translate,支持一個參數，代表水平移動*/transform: translate(50px);}#box2,#box4{width: 200px;height: 200px;border:1px solid tomato;}#box2:hover{/*transform: scaleX(0.5) scaleY(0.5);*//*支持一個參數，水平和垂直等于一個值支持兩個參數，代表水平方向縮放和垂直方向縮放*//*transform: scale(0.5);*/transform: scale(0.5,1.5);}/*過度*/#box3{transition: all 3s linear;}#box3:hover{transform: rotate(360deg);}/*傾斜*/#box4{transition: all 3s linear;}#box4:hover{/*transform: skewX(30deg) skewY(50deg);*/transform: skew(40deg,30deg);}</style></head><body><div id="box1"></div><div id="box2"></div><div id="box3"></div><div id="box4"></div></body>
</html>

transform3D

translate3d(x,y,z) 定義3D轉換
translateZ(z) 定義3D轉換，只適用Z軸的值
scale3d(x,y,z) 定義3D縮放
scaleZ(z) 通過設置Z軸的值來定義3D縮放轉換
rotate3d(x,y,z,angle) 定義3D旋轉
rotateZ(angle) 定義沿著Z軸的3D旋轉
perspective(n) 為D3轉換元素定義透視視圖

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.parent{width: 200px;height: 200px;background: pink;/*透視 呈現出偽3D*/perspective: 500px;}.son{width: 100%;height: 100%;background: blue;transform: translateZ(-100px);/*transform: translate3d(-10px,-10px,-100px);*/transition: all 3s;}.son:hover{transform: perspective(400px) scaleZ(1);}img{transition: all 3s;}img:hover{/*transform: rotate(180deg);*/transform: rotateZ(180deg);}</style></head><body><div class="parent"><div class="son"></div></div><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></body>
</html>

過渡Transition

過渡指定四要素

transition-property 過渡屬性，如background,color等。
transition-duration 過渡所需要時間。
transition-timing-function 過渡函數。既過渡的速度，方式等。
ease 默認值，規定慢速開始，然后變快，然后慢速結束過渡效果
linear 勻速
ease-in 規定以慢速開始，加速效果。
ease-out 規定以慢速結束，減速效果。
ease-in-out 規定以慢速開始和結束，先加速后減速效果。
transition-delay 過渡延遲時間。表示開始執行的時間。
transition 過渡屬性簡寫屬性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 200px;height: 200px;background: tomato;/*要過度的屬性*//*transition-property: width;*//*!*過度完成時間*!*//*transition-duration: 3s;*//*!*過度函數*!*//*transition-timing-function: ease;*//*!*延時執行時間*!*//*transition-delay: 3s;*//*簡寫屬性*/transition: all 3s linear;}#box:hover{width: 300px;height: 300px;transform: translate(3px,-10px);background: green;box-shadow: 0px 0px 10px 10px #ccc;}</style>
</head>
<body><div id="box"></div>
</body>
</html>

動畫animation

animation 屬性用于控制動畫

調用由@keyframes定義的動畫

animation屬性是一個簡寫屬性

animation動畫子屬性

animation-name 調用動畫，規定需要和keyframes的名字一致
animation-duration 動畫完成一個周期所需要的時間
animation-timing-funtion 規定動畫的速度變化類型
animation-delay 播放之前的延遲時間
Animation-iteration-count:數值|infinite 播放次數
infinite 表示無限次播放
animation-direction:normal|alternate 動畫播放方向
normal 為默認值，表示正常播放
alternate 表示輪流播放，既動畫會在奇數次正常播放，而在偶數次向后播放。
animation-fill-mode:forwards 動畫停在最后一幀
默認值為none
animation-play-state:paused | running 屬性規定動畫正在運行還是停止
默認是為running
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width:200px;height:200px;border: 1px solid #000;/*transition: background-color 3s linear;*/}.one:hover{/*background-color: red;*//*background-color: green;*//*background-color: blue;*/}.one{animation-name: myname;animation-duration: 5s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes myname {0%{background-color: red;}30%{background-color: green;}60%{background-color: blue;}100%{background-color: red;}}</style></head><body><div class="one"></div></body>
</html>

動畫案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>section{width: 500px;height: 300px;border:1px solid red;margin: 10px auto;overflow: hidden;}section>div{width: 2000px;height: 300px;border:1px solid tomato;animation: myname 10s infinite 1s;}section>div>img{width: 500px;height: 300px;float:left;}@keyframes myname {35%{margin-left: -500px;}70%{margin-left: -1000px;}100%{margin-left: -1500px;}}</style></head><body><section><div><img src="./img/1.png" alt=""><img src="./img/2.png" alt=""><img src="./img/1.png" alt=""><img src="./img/2.png" alt=""></div></section></body>
</html>

媒體查詢

使用Media Query的基本語法

@media mediatype and | not | only (media feature) {CSS-Code
}