HTML5新特性

HTML5新特性

header : 頁眉
footer : 頁腳
main : 主體
注：header footer main 語義化標籤在一個頁面中只能出現一次。
​
hgroup : 標題組合
nav : 導航
article : 獨立的內容
論壇帖子 報紙文章
博客條目 用戶評論
aside : 輔助信息的內容
section : 區域 , 跟div的功能以及語義是同樣的
​
figure : 描述圖像或視頻
figcaption : 描述圖像或視頻的標題部分

columns

指定列的寬度和數量!

當每列寬度大於 100px 時，就以 3 列分割顯示；當瀏覽器寬度縮小，致使在 3 列狀況下沒法知足每列大於 100px，就開始轉爲 2 列；當瀏覽器再縮小，2 列中每列沒法再保持 100px 每列時，再次轉爲 1 列

以此類推，"100px" 爲每列不可低於的寬值，"3" 表示指定要顯示的列。相對於單獨設置 column-width 或 column-count，columns 要更加靈活

columns

因爲 column 屬性集還沒有歸入標準，大多數瀏覽器必須使用廠商前綴才能訪問，好在主流的瀏覽器均可以很好的支持了。下面是主流瀏覽器的支持和前綴狀況。

columns 是一個複合屬性，包含 column-width 和 column-count 這兩種簡寫。意 爲同時設置分列列數和分列寬度。

//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: 150px 4;

column-rule 屬性

設置每列---中間的分割線 column-rule: 2px dashed gray;

列邊線不會影響到佈局，它會根據佈局的縮放自我調整是否顯示。若是咱們把頁面縮放 到只能顯示一列時，它自動消失了。

column-gap 屬性

//設置列間距
-moz-column-gap: 100px;

CSS3 彈性伸縮佈局

添加到父容器上的

任何一個容器均可以指定爲Flex佈局。
display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari，Chrome */
設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

flex-direction: row;----佈局的排列方向(主軸排列方向)
row默認值，顯示爲行。
方向爲當前文檔水平流方向，默認狀況下是從左往右。
column 顯示爲列
row-reverse顯示爲行。 但方向和row屬性值是反的,從右向左。
column-reverse顯示爲列。但方向和column方向相反
​
flex-wrap用來控制子項總體單行顯示仍是換行顯示。
flex-wrap：wrap;不進行換行處理。
nowrap;進行換行處理。
wrap-reverse;反向換行。
​
flex-flow屬性是flex-direction和flex-wrap的縮寫
表示flex佈局的flow流動特性。
第一個值表示方向，第二個值表示換行，中間用空格隔開。（有順序）
​
1.注:默認狀況下，在彈性盒子中的子元素的左右排列的。
2.注:
（1）水平是主軸的時候，當不寫寬高的時候，寬度是由內容決定，高度是由父容器決定。
（2）垂直是主軸的時候，當不寫寬高的時候，高度是由內容決定，寬度是由父容器決定。
3.注:當子項的總寬度大於父容器的時候，會自動收縮的(彈性的優先級是大於自身固定大小)
4.注:當子項的內容已經達到了父容器最小寬高的時候，就會出現溢出的現象。
5.注:彈性佈局中用的頻率比較多的語法:
6.注:彈性佈局的優點是作一維佈局，網格佈局作二維佈局。

justify-content屬性決定了主軸方向上子項的對齊和分佈方式。
flex-start:子項都去起始位置對齊。
flex-end:子項都去結束位置對齊。
center:子項都去中心位置對齊。
space-between:表現爲兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around:around是環繞的意思，意思是每一個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
space-evenly：evenly是勻稱、平等的意思。也就是視覺上，每一個flex子項兩側空白間距徹底相等。

align-items：每一行中的子元素上下對齊方式
align-items中的items指的就是flex子項們，所以align-items指的就是flex子項們相對於flex容器在側軸方向上的對 齊方式。
取值                   含義
stretch             默認值，flex子項拉伸。
flex-start         表現爲容器頂部對齊。
flex-end           表現爲容器底部對齊。
center             表現爲垂直居中對齊。
​
align-content：跟justify-content相反的操做。側軸的對齊方式。（最少須要兩行才能看到效果由於他是多行的一個上下對齊方式)）
默認：多行下，有幾行就會把容器劃分爲幾部分，默認爲stretch拉伸的值跟justify-content值相同。

添加到子容器上的

order：num   能夠經過設置order改變某個flex 子項的排序位置。 全部flex子項的默認order屬性值是0。
​
flex-grow:num   擴展（想看到擴展的效果，必須有空隙）
0:默認值，不擴展
1：去擴展，會把空白區域所有佔滿
注：子元素會按照設置的比例值來分配空隙，若是比例值總和小於1,那麼會有空隙，若是比列大於等於1，那麼就沒有空隙。
​
flex-shrink:1;默認值是1。屬性中的shrink是「收縮」的意思，
flex-shrink主要處理當容器空間不足時候，單個元素的收縮比例。
0表示不收縮，0.5收縮小一些，2收縮大一些

flex-basis ： 定義了在分配剩餘空間以前元素的默認大小。
flex-shrink是設置一個比例值，flex-basis是設置一個具體值
​
flex屬性是flex-grow, flex-shrink 和flex-basis的縮寫。
flex:1; 1（flex-grow）1（flex-shrink）0（flex-basis）
flex:0; 0（flex-grow）1（flex-shrink）0（flex-basis）
​
align-self ：跟align- items操做很像，指控制單獨某一個flex子項的垂 直對齊方式。

響應式佈局的方案

響應式佈局?
用一套代碼，去適配不一樣的設備。既能夠運行在PC端，也能夠運行在移動端。
注：比較適合小網站，我的博客，產品介紹頁...

viewport視口？
PC端就沒有視口。viewport視口是移動端纔有的概念。
兩個視口：

1. 可視視口：固定大小的，跟手機設備同樣。在上面。
2. 佈局視口：可調節大小的，默認980，壓縮到可視視口的大小，在下面。

須要讓佈局視口改爲跟可視視口同樣大？
調節佈局視口 375 -> 375 , 414 -> 414
​
width : 414 能夠給固定大小，99%網站不會這麼設置，由於很差適配。
width : device-width 動態的 ，設備414 -> 414 設備375 -> 375
height : 不去設置。
initial-scale : 1.0
minimum-scale : 1.0
maximum-scale : 1.0
user-scalable : no
建議viewport設置：<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no">

CSS3 媒體查詢?
即media queries，能夠針對不一樣的媒體類型定義不一樣的樣式，從而實現響應式佈局 。也能夠針對不一樣的分辨率設置不一樣的樣式。
1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 橫屏
450分辨率如下： mobile 豎屏

媒體查詢的語法？
常見的媒體類型：
all 用於全部設備
print 用於打印機和打印預覽。
screen 用於電腦屏幕，平板電腦，智能手機等。
speech 應用於屏幕閱讀器等發聲設備。
如何配置？
@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }
link的使用？
<link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)">

如何實現響應式佈局呢？

1. 先去適配手機端 -> 過渡到pad -> 過渡到pc (不是很推薦)
2. 先去適配PC端 -> 過渡到pad -> 過渡到手機端 (推薦的)

/* 正常的樣式 , 針對PC端的 */ 代碼 /* 針對pad pro */ @media all and (max-width:1024px){ 50行CSS } ​ /* 針對pad mini 和 mobile 橫屏 */ @media all and (max-width:768px){ 50行CSS } ​ /* 針對 mobile 豎屏 */ @media all and (max-width:450px){ 50行CSS }