CSS3 基礎入門02
邊框相關屬性
border-radius
通過這個屬性我們可以設置邊框圓角，即可以將四個角設置為統一的圓角，也可以單獨的設置具體的某一個角的圓角。
grammer：
border-radius: 1-4 length|% / 1-4 length|%;
注釋：按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。
length :定義圓角的具體值
% ： 通過百分比來設置圓角
demo1:
border-radius:2em;
上面的代碼等價於：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
demo2:
border-radius: 2em 1em 4em / 0.5em 3em;
上面的代碼等價於：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
瀏覽器支持情況：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。
demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.yinyang {
width: 200px;
height: 99px;
border:1px solid #000;
border-bottom-width:100px;
border-radius:100px;
position: relative;
cursor: pointer;
transition: all 1s linear;
}
.yinyang:hover {
transform:rotate(360deg);
}
.yinyang:before {
content:"";
position: absolute;
left: 0;
top:50px;
width: 20px;
height: 20px;
border:40px solid #000;
border-radius: 50px;
background: #fff;
}
.yinyang:after{
content: "";
position: absolute;
right:0;
top: 50px;
width: 20px;
height: 20px;
border:40px solid #fff;
background: #000;
border-radius:50px;
}
</style>
</head>
<body>
<div class="yinyang"></div>
</body>
</html>
demo2:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
margin:50px auto;
transition:5s linear;
}
.box div {
width: 180px;
height: 180px;
margin:10px;
border:1px solid #000;
box-sizing:border-box;
float: left;
background: url("new_bg.png") no-repeat;
}
.box div:nth-child(1),.box div:nth-child(4){border-radius: 0 70%;}
.box div:nth-child(2),.box div:nth-child(3){border-radius: 70% 0;}
.box:hover {
transform:rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
border-image
通過這個屬性，可以用來給網頁的元素設置邊框圖片。
nternet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 屬性。
Safari 5 支持替代的 -webkit-border-image 屬性。
介紹:
border-image 屬性是一個簡寫屬性，用於設置以下屬性：
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值，會設置其默認值。
border-image-source:
grammer:
border-image-source:none|url
這個屬性主要是用來給標簽引入邊框圖片。
border-image-slice:
grammer:
border-image-slice:numer | 百分比 {1,4}
通過這個屬性，可以指定邊框圖像頂部，右側，底部，左側內偏移量。沒有具體的單位值，px ``em rem都不可以。只可以用數字或者百分比。
使用border-image-slice會將邊框圖像切成九個區域:4個角，4個邊，和一個中間區域。[中間區域如果不設置fill屬性，則不會顯示]
假如我們設置了四個值：border-image-slcie : 27 27 27 27 ,則分別代表了上右下左四個方向分別向內偏移27px像素。
最后分隔成的效果如下:
當
border的寬度小於偏移量，那么邊框圖片會進行收縮。當border的寬度大於偏移量，那么邊框圖片會進行放大。
border-image-width:
grammer:
border-image-width:lenght | number | 百分比 {1,4}
邊框圖片寬度，代替盒子本身的邊框寬度。
border-image-outset:
grammer:
border-image-outset:length |number {1,4}
通過這個屬性，可以讓邊框屬性延伸到盒子外部。
border-image-repeat:
grammer:
border-image-repeat:stretch | repeat | round{1,2}
這條屬性的作用是設置邊框背景是否重復。
默認值：stretch 拉伸 ，四個角，四個區域分別做水平和垂直方向的拉伸，來填補邊框的間隙。
repeat 讓四個角四個區域做復制運動
round 把四個角和四個區域分成均等區域，然后用背景圖像切好能平鋪滿整個 邊框空隙。
box-shadow
通過box-shadow屬性，可以給盒子設置陰影。
grammer:
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow : 水平陰影的位置 允許負值
v-shadow : 垂直陰影的位置 允許負值
blur : 模糊距離
spread : 陰影的大小
color : 陰影的顏色
inset ：將陰影轉換為內部陰影。
CSS3 彈性盒子模型
在
css2當中，存在標准模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在
css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的布局方案。
傳統的盒子模型:
所有的頁面元素我們都可以稱之為是盒子模型。整個頁面就是由一個又一個盒子模型構建而成。
而標准盒子模型中包含有五個主要元素：width、height、padding、border和margin。
怪異盒子模型:
怪異盒子模型同樣存在上述五個元素，但是在怪異盒子模型當中，存在着一個與盒子模型很大的差異性，就是盒子實際所占的位置大小。
標准模式下的盒子模型，實際所占據的寬度為: width+ padding2 + border2
而怪異盒子模型實際所占據的寬度就是:width。
布局當中，哪一種更加的理想：
怪異盒子模型的狀態其實更加的理想。所以我們可以通過box-sizing:border-box;將盒子模型變為怪異盒子模型的
渲染形式，從而方便布局。
box-sizing:border-box;采用怪異盒子模型進行渲染
box-sizing:content-box;默認屬性，采用標准的盒子模型進行渲染
什么是彈性盒子模型
彈性盒子模型是css3中新提出的一種布局方案。是一種為了應對針對不同屏幕寬度不同設備的一整套新的布局方案。主要是對一個容器中的子元素進行排列、對齊和分配空白空間的方案的調整。
新舊版本的彈性盒子
在之前，css3曾經推出過舊版本的彈性盒子模型。相對於新版本的彈性盒子模型而言，舊版本的內容與新版本還是有些出入。
而且，從功能上來講，舊版本的彈性盒子模型遠遠沒有新版本的盒子模型強大，從兼容性來講，二者在pc端ie9以下都存在着兼容性問題，但是在移動端，舊版本的彈性盒子模型兼容性則更好一點。但是對於我們來說，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因為舊版本的彈性盒子模型淘汰是必然，隨着手機端的兼容性逐漸提升，舊版本必將被淘汰。
另外，新版本具有更加強大的功能，也值得我們進行深度的學習。
那么我們對於新舊兩個版本的彈性盒子模型，我們只需要抱着對比的心態學習即可，掌握新版本，了解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學習舊版本的彈性盒子模型。
相關概念
主軸:
我們以元素排在一行為例，當元素排列在一行的時候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因為我們元素默認是從左向右排列，那么我們可以說在默認的情況下，元素的主軸的起始位置是在左，而方向為右，終點也為右。
側軸:
元素垂直的方向即為側軸。默認上為起點，下為終點。
彈性容器:
我們想要使用彈性盒子模型，就需要將容器轉換為彈性容器，我們說一個包含於子元素的容器設置了display:flex，那么這個容器也就變成了彈性容器。
彈性子元素：
當子元素的父元素變成了彈性容器，那么其中的所有的子元素也自然而然的變成了彈性子元素。
彈性容器屬性
為了便於學習，我們可以將彈性盒子模型的各種屬性加以區分，分為容器屬性和子元素屬性。
如何將一個容器變為彈性容器呢？
display:flex|inline-flex
具體的彈性容器屬性列表:
- flex-direction:彈性容器中子元素的排列方式(主軸排列方式)
- flex-wrap:設置彈性盒子的子元素超出父容器時是否換行
- flex-flow:flex-direction 和 flex-wrap 的簡寫
- align-item:設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
- align-content:修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊(行與行的對其方式)
- justify-content:設置彈性盒子元素在主軸（橫軸）方向上的對齊方式
屬性詳解:
flex-direction
flex-direction:彈性容器中子元素的排列方式(主軸排列方式)
屬性值：
row:默認在一行排列
row-reverse:反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。）
column：縱向排列。
column-reverse：反轉縱向排列，從下往上排，最后一項排在最上面
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction</title>
<style>
html,body {
margin:0;
padding:0;
}
nav {
height: 500px;
background-color: lightcyan;
display: flex;
flex-direction: row-reverse;/*居左1234 變成居右4321*/
flex-direction: column;/*居左1234變成上下1234*/
flex-direction: column-reverse;/*變成下上1234*/
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<nav>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
</nav>
</body>
</html>
flex-wrap
flex-wrap:設置彈性盒子的子元素超出父容器時是否換行
Tip:橫軸的方向決定了新行堆疊的方向。
屬性值：
nowrap: 默認值。規定元素不拆行或不拆列。
wrap:規定元素在必要的時候拆行或拆列。
wrap-reverse:規定元素在必要的時候拆行或拆列，但是以相反的順序。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*設置了屬性為wrap，那么一行放不下的時候會自動的去下一行*/
/*flex-wrap:wrap;*/
/*設置了屬性為wrap-reverse會讓排序發生一個反轉，雖然同樣是多行，但是會變成從下到上*/
flex-wrap: wrap-reverse;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--此時元素如果不換行，那么當一行的整體放不下時，每個元素就會相應的縮小-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
flex-flow
flex-flow:flex-direction 和 flex-wrap 的簡寫
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-wrap</title>
<style>
.box {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
flex-flow: row wrap;
}
.box div {
width: 100px;
height: 100px;
background-color: lightblue;
line-height: 100px;
text-align: center;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<!--此時元素如果不換行，那么當一行的整體放不下時，每個元素就會相應的縮小-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
align-items
align-items:設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
相關屬性：
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-item</title>
<style>
.box {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*默認 側軸起點橫向排列*/
/*align-items: flex-start;*/
/*側軸終點橫向排列*/
/*align-items: flex-end;*/
/*側軸終點橫向排列*/
/*align-items: center;*/
align-items: baseline;
}
.box div{
width: 100px;
height: 100px;
background-color: lightsalmon;
text-align: center;
line-height: 100px;
font-weight: bold;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
align-content
align-content:修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊(行與行的對其方式).
相關屬性：
說明：
當伸縮容器的側軸還有多余空間時，本屬性可以用來調准「伸縮行」在伸縮容器里的對齊方式，這與調准伸縮項目在主軸上對齊方式的 <' justify-content'> 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。
- flex-start 沒有行間距
- flex-end 底對齊沒有行間距
- center 居中沒有行間距
- space-between兩端對齊，中間自動分配
- space-around自動分配距離
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>align-content</title>
<style>
nav {
height: 600px;
background-color: lemonchiffon;
display: flex;
/*開啟多行*/
flex-wrap: wrap;
/*側軸起點上下兩行對齊，沒有行間距*/
/*align-content: flex-start;*/
/*側軸終點上下兩行對齊，沒有行間距，第一行依然在上*/
/*align-content: flex-end;*/
/*側軸終點對齊，第一行依然在上，沒有行間距*/
/*align-content:center;*/
/*兩端對齊，中間自動分配*/
/*align-content: space-between;*/
/*自動分配距離*/
align-content:space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightcoral;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
</nav>
</body>
</html>
justify-content
justify-content:設置彈性盒子元素在主軸（橫軸）方向上的對齊方式
說明：
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊
■ flex-start默認，頂端對齊
■ flex-end末端對齊
■ center居中對齊
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>justify-content</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
/*justify-content: flex-start;*/
/*主軸對齊，貼右 1234*/
/*justify-content: flex-end;*/
/*主軸對齊，居中*/
/*justify-content: center;*/
/*兩端對齊，中間自動分配*/
/*justify-content: space-between;*/
/*自動分配距離*/
justify-content: space-around;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</nav>
</body>
</html>
彈性子元素相關屬性
下面是彈性子元素相關屬性列表:
- order：設置彈性盒子的子元素排列順序。 number排序優先級，數字越大越往后排，默認為0，支持負數。
- flex-grow:設置或檢索彈性盒子元素的擴展比率。
- flex-shrink:指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候才會發生 收縮，其收縮的大小是依據 flex-shrink 的值。
- flex-basis:用於設置或檢索彈性盒伸縮基准值。
- flex:設置彈性盒子的子元素如何分配空間。
- align-self:在彈性子元素上使用。覆蓋容器的 a lign-items 屬性。
屬性詳解:
order:
order:設置彈性盒子的子元素排列順序。 number排序優先級，數字越大越往后排，默認為0，支持負數。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>order</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
nav div:nth-of-type(1) {
order: 5;
}
nav div:nth-of-type(2) {
order: 4;
}
nav div:nth-of-type(3) {
order: 3;
}
nav div:nth-of-type(4) {
order: 2;
}
nav div:nth-of-type(5) {
order: 1;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div >3</div>
<div>4</div>
<div>5</div>
</nav>
</body>
</html>
flex-grow:
flex-grow:設置或檢索彈性盒子元素的擴展比率。
參數：
<integer>：一個數字，規定項目將相對於其他靈活的項目進行擴展的量。默認值是 0。
用來瓜分容器的剩余空間。
什么是剩余空間？
假設父元素的寬度是500px，
有三個子元素，每個寬度是100，那么剩余空間就是500 - 100 * 3 = 200。
而flex-grow就是用來瓜分剩余空間的。
例如第一個盒子屬性為flex-grow:1;那么剩余空間就會被分成一份，第一個盒子額外的占據了這一份。
如果這個時候第二個盒子flex-grow:2;那么此時剩余空間就被分成三分，第一個盒子占一份，第二個盒子占兩份。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-grow</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
nav div:nth-of-type(2) {
flex-grow: 3;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div >3</div>
<div>4</div>
<div>5</div>
</nav>
</body>
</html>
flex-shrink
參數：<integer>：一個數字，規定項目將相對於其他靈活的項目進行收縮的量。默認值是 1。
當父容器的剩余空間為0的時候，並且默認處於非換行狀態的情況下，子元素是沒有辦法利用彈性容器的剩余空間進行擴展的。
如果如容器的剩余寬度為負數的情況下(子元素的寬度之和大於父容器的寬度)，那么子元素就會被收縮。
收縮的比例為1:1.
例如，一個彈性容器中有三個子元素，那么他們的收縮比例就為1:1:1.
如果這個時候，第一個子元素設置了flex-shrink:2;那么我們就會發現，這個元素比其他兩個元素收縮的幅度更大。
同時呢，因為第一個子元素空間的更多收縮，所以第二個和第三個元素就會獲得更多的空間。
我們假設第二個和第三個盒子收縮比例為x1,那么第一個盒子的收縮比例就為x2.
舉個例子：
父元素 500px。三個子元素分別設置為 150px，200px，300px。
三個子元素的 flex-shrink 的值分別為 1，2，3。
首先，計算子元素溢出多少：150 + 200 + 300 - 500 = -150px。
那這 -150px 將由三個元素的分別收縮一定的量來彌補。
具體的計算方式為：每個元素收縮的權重為其 flex-shrink 乘以其寬度。
所以總權重為 1 * 150 + 2 * 200 + 3 * 300 = 1450
三個元素分別收縮：
150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
150 * 3(flex-shrink) * 300(width) / 1450 = -93.1
三個元素的最終寬度分別為：
150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9
同樣，當所有元素的 flex-shrink 之和小於 1 時，計算方式也會有所不同：
此時，並不會收縮所有的空間，而只會收縮 flex-shrink 之和相對於 1 的比例的空間。
還是上面的例子，但是 flex-shrink 分別改為 0.1，0.2，0.3。
於是總權重為 145（正好縮小 10 倍，略去計算公式）。
三個元素收縮總和並不是 150px，而是只會收縮 150px 的 (0.1 + 0.2 + 0.3) / 1 即 60% 的空間：90px。
每個元素收縮的空間為：
90 * 0.1(flex-shrink) * 150(width) / 145 = 9.31
90 * 0.2(flex-shrink) * 200(width) / 145 = 24.83
90 * 0.3(flex-shrink) * 300(width) / 145 = 55.86
三個元素的最終寬度分別為：
150 - 9.31 = 140.69
200 - 24.83 = 175.17
300 - 55.86 = 244.14
flex-basis
flex-basis:用於設置或檢索彈性盒伸縮基准值。
參數：
<integer>：一個長度單位或者一個百分比，規定元素的初始長度。
auto：默認值。長度等於元素的長度。如果該項目未指定長度，則長度將根據內容決定。
flex-basis是width的替代品。如果子元素設置了flex-basis或者width，那么在分配空間之前，就會跟父容器預約這么多的空間，然后剩下的才歸到剩余空間，然后父容器再把剩余空間分配給flex-grow的容器。如果同時設置了flex-basis和width，那么width的屬性就會被覆蓋，也就是說flex-basis的優先級比width高。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-grow</title>
<style>
nav {
height: 600px;
background-color: lightgoldenrodyellow;
display: flex;
}
nav div {
width: 100px;
height: 100px;
background-color: lightblue;
margin:10px;
}
nav div:nth-of-type(2) {
/*縮小為0，即使寬度縮小，也不縮小*/
flex-basis: 200px;
}
</style>
</head>
<body>
<nav>
<div>1</div>
<div>2</div>
<div >3</div>
<div>4</div>
<div>5</div>
</nav>
</body>
</html>
flex
flex:設置彈性盒子的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
簡介：
flex是flex-grow,flex-shrink和flex-basis的縮寫，flex屬性值可以只指定一個屬性的值，而另外的屬性值采
用各自在flex屬性中的的初始值，但是有一點要注意的是：flex屬性中flex-grow和flex-basis的初始值和它們原始
的默認值不同，至於為什么不同，mdn中有明確的說過這樣的設計是為了讓「flex」縮寫在最常見的情景下比較好用。
flex中對應各屬性的初始值：
flex-grow
flex-grow用於設置各item項按對應比例划分剩余空間，若flex中沒有指定flex-grow,則相當於設置了
flex-grow:1
flex-shrink
flex-shrink用於設置item的總和超出容器空間時，各item的收縮比例，若flex中沒有指定flex-shrink,
則等同於設置了flex-shrink:1
flex-basis
flex-basis用於設置各item項的伸縮基准值，可以取值為長度或百分比，如果flex中省略了該屬性，則相當
於設置了flex-basis:0.
flex的不同取值
flex的值的完整寫法是[<flex-grow> <flex-shrink> <flex-basis>],不過它的取值還有可能是單個數字
或者單個百分比等，不同種類的取值所表示的意思是大有不同的。
flex值為none
當flex為none時,等同於flex: 0 0 auto;
flex值為auto
當flex為auto時，等同於flex: 1 1 auto;
flex值為一個非負數字
當flex取值為一個數字，則該數字是設置的flex-grow值，其它兩個屬性用初始值，如flex:1時，
等同於flex: 1 1 0%
flex值為兩個非負數字
當flex取值為2個數字時，相當於設置的flex-grow和flex-shrink值，flex-basis取值為初始值，
如flex:1 0時，等同於flex: 1 0 0%
flex值為一個數字和一個長度或百分比時
當flex取值為1個數字和1個長度或百分比時，設置的是flex-grow和flex-basis的值，flex-shrink值
時初始值，如flex:1 20%,等同於flex: 1 1 20%
align-self
align-self:在彈性子元素上使用。覆蓋容器的 align-items 屬性。
值與容器屬性一樣，只是這個是單獨的設置某個元素。
新舊盒子對比
demo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;}
.all{
display:flex;
justify-content:center;
align-items:center;
height:400px;
background:#fff;
margin-top:100px;}
.all>div{
display:flex;
width:100px;
height:100px;
background:#e7e7e7;
margin:26px;
padding:7px;
border-radius:10px;
box-shadow:inset 0 5px 0 #fff,inset 0 -5px 0 #bbbbbb,inset 5px 0 0 #d7d7d7,inset -5px 0 0 #d7d7d7;}
.all>div div{
width:26px;
height:26px;
background:#333333;
border-radius:50%;
box-shadow:inset 0 5px 0 #111,inset 0 -5px 0 #555;}
.all>div:nth-child(1){
justify-content:center;
align-items:center;
}
.all>div:nth-child(2){
justify-content:space-between;
align-items:flex-start;
}
.all>div:nth-child(2) div:nth-child(2){
align-self:flex-end;
}
.all>div:nth-child(3){
justify-content:space-between;
align-items:flex-start;
}
.all>div:nth-child(3) div:nth-child(2){
align-self:center;
}
.all>div:nth-child(3) div:nth-child(3){
align-self:flex-end;
}
.all>div:nth-child(4),.all>div:nth-child(5),.all>div:nth-child(6){
flex-direction:column;
justify-content:space-between;
}
.all>div:nth-child(4)>div{
display:flex;
justify-content:space-between;
width:100%;
height:26px;
border-radius:0;
box-shadow:none;
background:none;}
.all>div:nth-child(5)>div{
display:flex;
justify-content:space-between;
width:100%;
height:26px;
border-radius:0;
box-shadow:none;
background:none;}
.all>div:nth-child(5)>div:nth-child(2){
justify-content:center;
}
.all>div:nth-child(6)>div{
display:flex;
justify-content:space-between;
width:100%;
height:26px;
border-radius:0;
box-shadow:none;
background:none;}
</style>
</head>
<body>
<div class="all">
<div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>
</body>
</html>
實現的效果如下：
多列布局
多列布局是css3當中新增加的布局屬性，目的是讓網頁的布局變得更加的靈活。
利用多列布局，可以實現之前在css2中難度比較大的布局。
例如：
相關屬性：
-
column-count 規定元素應該被分隔的列數. 值：number |auto
-
column-fill 指定如何填充列(兼容性較差，了解就好) 值： balance(所有列的高度與其中最高的一列統一)|auto(列高度自適應內容)
-
column-gap 指定列與列之間的間隙 值：length(用長度值來定義列與列之間的間隙。不允許負值 )|normal(與 <' font-size '> 大小相同。假設該對象的font-size為16px，則normal值為16px，類推。 )
-
column-rule 所有column-rule-*的屬性的簡寫 語法：column-rule: column-rule-width column-rule-style column-rule-color
-
column-rule-color 指定兩列間邊框的顏色
-
column-rule-style 指定兩列間邊框的樣式
-
column-rule-width 指定兩列間邊框的寬度 值：thin|medium|thick|length;
-
column-span 指定元素要跨的列數語法：column-span: 1(1或者none,橫跨一列)|all(橫跨所有列);
-
column-width指定列的寬度 語法：auto(瀏覽器將決定列的寬度)|length(指定列寬的長度，column-count會產生影響);
-
columns 設置column-width和column-count的簡寫
兼容性:
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:#352323 url(img/a.png);
}
img{
display:block;
}
section{
max-width:95%;
margin:0 auto;
overflow:hidden;
column-count: 5;
column-gap:0;
column-fill: auto;
}
figure{
border:2px solid pink;
margin:0 5px 10px;
break-inside: avoid;/*避免列斷層*/
padding:5px;
}
figure img{
width:100%;
}
figcaption{
padding:10px 0;
text-align:center;
font-weight:900;
color:#a77869;
}
</style>
</head>
<body>
<section>
<figure>
<img src="img/1.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/2.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/3.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/4.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/5.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/6.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/7.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/8.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/9.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/10.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/11.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/12.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/13.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/14.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/15.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/16.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/17.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/18.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/19.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/20.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/21.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/22.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/23.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/24.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/25.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/26.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/27.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/28.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/29.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/30.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/31.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/32.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
<figure>
<img src="img/33.jpg" alt="">
<figcaption>往后余生，風雪是你</figcaption>
</figure>
</section>
</body>
</html>
響應式布局
伊桑·馬科特（Ethan Marcotte）在2010年提出了響應式網頁設計（RWD,Responsive Web Design）這個術語。
在他的一篇文章《Responsive Web Design · An A List Apart Article》中他將已有的三種發開技巧（彈性圖片，彈性網格布局，媒體與媒體查詢） 進行了整合，命名為響應式網頁設計。
那什么才是真正的響應式設計？馬科特說，真正的響應式設計方法不僅僅是根據可視區域大小而改變網頁布局，而是要從整體上顛覆當前網頁的設計方法，是針對任意設備的網頁內容進行完美布局的一種顯示機制。
當時伊桑·馬科特根據當時的比較火熱的夏洛克為例：
當屏幕發生變化時：
如果屏幕略窄：
如果屏幕達到很窄的時候：
三要素
響應式設計主要是包括三個要素：彈性布局、媒體查詢和彈性圖片。
下面針對這三個要素進行闡述。
彈性圖片
彈性圖片也稱之為叫做響應式圖片，是指圖片能夠跟隨父容器的變化而變化，同時寬度受限於父容器，並不能夠按照圖片原始尺寸展示。
因此，最簡單的響應式圖片將max-width設置為100%即可。
img {
max-width:100%;
}
需要注意的是，如果只有一張圖片，采用上面的方案即可。但是如果提供了高清圖，要根據不同設備大小加載不同的圖片，則需要額外的處理。
例如可以采用媒體查詢的形式進行處理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.container{
width:100%;
margin:0 auto;
background:#ccc;
}
@media(min-width:768px) {
.container{
width:750px;
}
}
@media(min-width:992px){
.container{
width:970px;
}
}
@media(min-width:1200px) {
.container{
width:1170px;
}
}
/***/
.shocase1 img{
/* width:100%;*/
max-width:100%;
}
.showcase2{
margin-top:20px;
padding-top:56%;
background: url('./images/banner01-small.jpg');
background-size:cover;
}
@media (min-width:992px) {
.showcase2{
background: url('./images/banner01_middle.jpg');
}
}
@media (min-width:1200px){
.showcase2{
background: url('./images/banner01.jpg');
}
}
</style>
<script src="../source_js/picturefill.js"></script>
</head>
<body>
<div class="container">
<h1>圖片響應式</h1>
<hr>
<div class="shocase1">
<img src="./images/banner01.jpg" alt="">
</div>
<div class="showcase2">
</div>
</div>
</body>
</html>
當然除了上述的媒體查詢以外，還可以采用下面的這種形式：
<picture>
<source media="(min-width:50em)" srcset="img/l.jpg">
<source media="(min-width:30em)" srcset="img/m.jpg">
<img src="img/s.jpg" alt="#">
</picture>
媒體查詢
一說到響應式設計，肯定離不開媒體查詢media。一般認為媒體查詢是CSS3的新增內容，實際上CSS2已經存在了，CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支持)。下面將詳細的介紹一下媒體查詢。
媒體查詢的缺點：媒體查詢的開發方案並不適用於過於復雜的網頁。
媒介類型：
在CSS2中，媒體查詢只使用於<style>和<link>標簽中，以media屬性存在。
media屬性用於為不同的媒介類型規定不同的樣式
screen 計算機屏幕（默認值）
tty 電傳打字機以及使用等寬字符網格的類似媒介
tv 電視類型設備（低分辨率、有限的屏幕翻滾能力）
projection 放映機
handheld 手持設備（小屏幕、有限的帶寬）
print 打印預覽模式 / 打印頁
braille 盲人用點字法反饋設備
aural 語音合成器
all 適合所有設備
真正廣泛使用且所有瀏覽器都兼容的媒介類型是'screen'和'all'
<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}
</style>
<div class="box"></div>
媒體屬性:
媒體屬性是CSS3新增的內容，多數媒體屬性帶有“min-”和“max-”前綴，用於表達“小於等於”和“大於等於”。這避免了使用與HTML和XML沖突的“<”和“>”字符
注意：媒體屬性必須用括號()包起來，否則無效
下表中列出了所有的媒體屬性:
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
- 設備寬高比（device-aspect-ratio）
設備寬高比描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例
向寬高比為16:9的特殊寬屏設備應用樣式表
<style>
@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}
</style>
<div class="box"></div>
- 高度
高度描述了輸出設備渲染區域（如可視區域的高度或打印機紙盒的高度）的高度
向高度大於800px的可視區域的設備應用樣式表
<style>
@media (min-height:800px) {
.box{ height: 100px; width: 100px;background-color: lightgreen; }
}
</style>
<div class="box"></div>
- 寬度
寬度描述了輸出設備渲染區域的寬度
向寬度大於800px的可視區域的設備應用樣式表
<style>
@media (min-width:800px) {
.box{ height: 100px;width: 100px; background-color: lightgreen;}
}
</style>
<div class="box"></div>
- 方向orientation
方向指定了設備處於橫屏（寬度大於寬度）模式還是豎屏（高度大於寬度）模式
值：landscape(橫屏) | portrait(豎屏)
向豎屏設備應用樣式表：
<style>
@media (orientation: portrait) {
.box{height: 100px;width: 100px;background-color: lightgreen; }
}
</style>
<div class="box"></div>
基礎語法內容
媒體查詢包含了一個CSS2已有的媒介類型(或稱為媒體類型)和CSS3新增的包含一個或多個表達式的媒體屬性，這些媒體屬性會被解析成真或假
當媒體查詢為真時，相關的樣式表或樣式規則就會按照正常的級聯規則被應用。即使媒體查詢返回假， 標簽上帶有媒體查詢的樣式表仍將被下載（只不過不會被應用）
<link rel="stylesheet" href="style.css" media="print">
<div class="box"></div>
media即使不是'print'，所以媒體查詢為假。但是，style.css文件依然被下載
邏輯操作符
操作符not、and、only和逗號(,)可以用來構建復雜的媒體查詢。
- and
and操作符用來把多個媒體屬性組合起來，合並到同一條媒體查詢中。只有當每個屬性都為真時，這條查詢的結果才為真
注意：在不使用not或only操作符的情況下，媒體類型是可選的，默認為all
滿足橫屏以及最小寬度為700px的條件應用樣式表
@media all and (min-width: 700px) and (orientation: landscape) { ... }
由於不使用not或only操作符的情況下，媒體類型是可選的，默認為 all，所以可以簡寫為
@media (min-width: 700px) and (orientation: landscape) { ... }
- or
將多個媒體查詢以逗號分隔放在一起；只要其中任何一個為真，整個媒體語句就返回真，相當於or操作符
滿足最小寬度為700像素或是橫屏的手持設備應用樣式表
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- not
not操作符用來對一條媒體查詢的結果進行取反
注意：not關鍵字僅能應用於整個查詢，而不能單獨應用於一個獨立的查詢
@media not all and (monochrome) { ... }
//等價於
@media not (all and (monochrome)) { ... }
- only
only操作符表示僅在媒體查詢匹配成功時應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用.
media="only screen and (max-width:1000px)"{...}
上面這行代碼，在老式瀏覽器中被解析為media="only"，因為沒有一個叫only的設備，所以實際上老式瀏覽器不會應用樣式.
media="screen and (max-width:1000px)"{...}
上面這行代碼，在老式瀏覽器中被解析為media="screen"，它把后面的邏輯表達式忽略了。所以老式瀏覽器會應用樣式
所以，在使用媒體查詢時，only最好不要忽略.
斷點
我們通過媒體查詢的形式來進行網頁布局，原理就是設置好幾個區間范圍，當瀏覽器的寬度符合了條件區間后就執行響應的css代碼。
而響應的斷點設置應該根據具體的實際情況來定，也可以參照一些常用框架的斷點，例如bootstrap的斷點。
針對於移動端的響應式頁面設計
我們開發響應式的網站，經常需要適配移動端的內容，那么我們在開發網友的過程中可以給我們的網頁里面加上下面兩句代碼，讓我們的網頁能夠在移動端顯示的更好。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
在上面的兩句代碼中，第一句代碼是將寬度設置為設備寬度，禁止縮放，將初始縮放比例、最大縮放比例以及最小縮放比例都設置為了1.0。
而第二句則是開啟ie瀏覽器最新的內核，主要針對的是ie新版本瀏覽器或者國內的雙核瀏覽器。
擴展：為什么要設置上面的第一句代碼？
上面的代碼其實是設置視口。將視口的寬度設置為瀏覽器的寬度。
一般情況下，
viewport表示的是瀏覽器顯示內容的區域，在pc端當中只有一個視口，而到了移動端，就出現了三個概念：布局視口、可視視口、和理想視口。布局視口相當於是網頁的內容，而移動端的屏幕則相當於可視視口。當我們將布局視口設置為與可視視口相同時，則變成了理想視口。
而所謂的理想視口，就是布局視口在一個設備上的最佳尺寸，理想視口下的頁面便於瀏覽器 瀏覽 閱讀。
例如下面的案例，如果刪除掉兩條設置語句顯示效果就會出現問題：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100%;
height: 600px;
background: url("./images/photo4.jpg") no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<header class="page_header">
<!-- 1 -->
<div class="logo">
<h1>響應式導航</h1>
</div>
<!-- 2 -->
<nav class="navbar">
<!-- 3 -->
<!-- 將圖標設置出來 -->
<span class="toggle open">
<a href="#navlist">
<i class="fa fa-bars fa-lg"></i>
</a>
</span>
<!-- 3-結束 -->
<ul id="navlist">
<li><a href="">首頁</a></li>
<li><a href="">博客</a></li>
<li><a href="">論壇</a></li>
<li><a href="">商城</a></li>
<li><a href="">購物車</a></li>
</ul>
<!-- 將圖標設置出來 -->
<span class="toggle close">
<a href="">
<i class="fa fa-close fa-lg"></i>
</a>
</span>
<!-- 3-結束 -->
</nav>
</header>
</div>
</body>
</html>
相應的css代碼：
/*設置默認字體和寬度*/
body{
font-size: 16px;
font-family: "KaiTi";
}
.container{
width: 100%;
margin: 0 auto;
}
/*根據屏幕寬度的變化而去改變container的寬度*/
@media(min-width:768px) {
.container{
width:750px;
}
}
@media(min-width:992px){
.container{
width:970px;
}
}
@media(min-width:1200px) {
.container{
width:1170px;
}
}
/*1*/
/*設置page_header整體樣式*/
.page_header{
width: 100%;
height: 48px;
/*目的是讓導航欄始終在頂部*/
position: fixed;
top: 0;
left: 0;
/*導航欄變為黑色*/
background: #333;
/*字體變為白色*/
color: #f9f9f9;
}
/*設置頭部樣式*/
.logo h1{
font-size: 1.2em;
line-height: 48px;
padding: 0 8px;
}
/*給導航欄下面加一條線*/
.logo{
border-bottom: 1px solid #000;
}
/*2*/
/*設置Navbar里面的樣式*/
.navbar{
background: #333;/*將navbar整體顏色設置為黑色*/
overflow: hidden;/*准備將元素浮動起來，所以設置overflow備用*/
}
/*具體設置元素里面的a元素*/
.navbar>ul>li>a{
color:#fff;/*將a元素里面的字體變為白色*/
height: 38px;
line-height: 38px;
float:left;
width: 100%;
padding: 0 20px;/*設置好以上三點樣式之后發現沒有變化
可以將navbar中的overflow注釋看效果*/
}
/*設置li的寬度*/
.navbar>ul>li{
width: 100%;
float: left;
}
/*讓鼠標懸浮在每個選項上時有一個變色*/
.navbar>ul>li>a:hover{
background: #000;
}
/*3*/
/*讓我們添加的圖標位置變成右上角*/
.navbar .toggle{
position: absolute;
top: 0;
right: 0;
line-height: 48px;
padding: 0 10px;
background: #333;
/*設置好之后看效果發現圖標重疊，並且a的顏色顯示不對*/
}
/*設置圖標上一層a的顏色*/
.toggle a {
color:#f9f9f9;
}
/*我們默認的讓第一個圖標顯示在上面*/
.open{
z-index: 2;
}
/*我們讓選項默認為消失*/
#navlist{
display: none;
}
/*當我們點擊的時候顯示選項*/
#navlist:target{
display: block;
/*這個時候，只有當錨點觸發的時候才會顯示選項*/
}
/*當選項卡顯示的時候，我們讓另一個圖標顯示*/
#navlist:target+.close{
z-index: 3;
}
/*當選項卡顯示的時候就是觸發錨點的時候，我們讓display為none*/
/*大屏幕的時候*/
/*大屏幕導航*/
@media(min-width:768px) {
.page_header{
position:static;
background: #fff;
color:#000;
}
.logo h1{
color:red;
font-size:2em;
padding-top:20px;
padding-bottom:20px;
}
#navlist{
display:block;
}
#navlist li{
width:auto;
}
#navlist li a{
width:auto;
}
.toggle{
display:none;
}
}
pc端顯示的效果如下：
移動端顯示效果如下:
移動布局應該知道的必備
像素：
像素，又稱畫素，是圖像顯示的基本單位，譯自英文“pixel”，pix是英語單詞picture的常用簡寫，加上英語單詞“元素”element，就得到pixel，故“像素”表示“圖像元素”之意，有時亦被稱為pel(picture element)
像素是網頁布局的基礎。一個像素就是計算機能夠顯示一種特定顏色的最小區域。當設備尺寸相同但像素變得更密集時，屏幕能顯示的畫面的過渡更細致，網站看起來更明快。
ppi是指屏幕上每英寸可以顯示的像素點的數量，即屏幕像素密度
像素分類:
實際上像素分為兩種：設備像素和CSS像素
1、設備像素(device independent pixels): 設備屏幕的物理像素，任何設備的物理像素的數量都是固定的
2、CSS像素(CSS pixels): 又稱為邏輯像素，是為web開發者創造的，在CSS和javascript中使用的一個抽象的層
縮放：
在桌面端，css的1個像素往往都是對應着電腦屏幕的1個物理像素。
//一個CSS像素完全覆蓋了一個設備像素
而在手機端，由於屏幕尺寸的限制，縮放是經常性的操作。
//設備像素(深藍色背景)、CSS像素(半透明背景)
//左圖表示當用戶進行縮小操作時，一個設備像素覆蓋了多個CSS像素
//右圖表示當用戶進行放大操作時，一個CSS像素覆蓋了多個設備像素
不論我們進行縮小或放大操作，元素設置的CSS像素(如width:300px)是始終不變的，而一個CSS像素對應多少個設備像素是根據當前的縮放比例來決定的
DPR
設備像素比DPR(devicePixelRatio)是默認縮放為100%的情況下，設備像素和CSS像素的比值
DPR = 設備像素 / CSS像素(某一方向上)
在早先的移動設備中，並沒有DPR的概念。隨着技術的發展，移動設備的屏幕像素密度越來越高。從iphone4開始，蘋果公司推出了所謂的retina視網膜屏幕。之所以叫做視網膜屏幕，是因為屏幕的PPI(屏幕像素密度)太高，人的視網膜無法分辨出屏幕上的像素點。iphone4的分辨率提高了一倍，但屏幕尺寸卻沒有變化，這意味着同樣大小的屏幕上，像素多了一倍，於是DPR = 2
以iphone5為例，iphone5的CSS像素為320px568px，DPR是2，所以其設備像素為640px1136px
設計圖和DPR
在進行項目開發的時候，我們需要額外的注意，如果設計圖寬度為640px，那么我們需要考慮的dpr為2.
如果設計圖寬度為1080px的時候，我們考慮的DPR就為3
移動端網頁demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動端項目測試</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<header>
<span>熱點</span>
<span>關注</span>
</header>
<nav>
<li>足球現場</li>
<li>足球生活</li>
<li>足球美女</li>
</nav>
<main>
<!--main是容器，最好不要直接操作他-->
<section>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
<figure>
<img src="./images/img_03.jpg" alt="">
<figcaption>小丸子小丸子...</figcaption>
</figure>
</section>
</main>
<footer>
<div>
<i class="iconfont icon-home"></i>
<span>首頁</span>
</div>
<div>
<i class="iconfont icon-fangdajing"></i>
<span>發現</span>
</div>
<div>
<img src="./images/img_03.png" alt="">
</div>
<div>
<i class="iconfont icon-wode"></i>
<span>我的</span>
</div>
<div>
<i class="iconfont icon-tuichu1"></i>
<span>退出</span>
</div>
</footer>
</body>
</html>
css:
/*基礎設置*/
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul,li {
list-style:none;
}
a {
text-decoration: none;
}
html,body {
/*當前的app頁面在網頁中占據的高度為100%*/
height:100%;
}
/*網頁主要布局方向為上下布局，所以可以使用彈性盒子來進行布局*/
/*可以將body變為彈性盒子模型*/
body {
display: flex;
/*元素上下排列，可以將排列方式改為沿着側軸排列*/
/*也可以說將y軸變為主軸*/
flex-direction:column;
}
/*從設計圖上量出元素的高度為88px，*/
/*量出了高度我們要將具體像素值變為rem，但是我們為什么要
使用rem呢？
是為了當我們需要的時候，只需要更改html的font-size值就可以
更改rem的大小。
所以，我們需要設置具體的html的font-size值
如何更改html的font-size值？
方法1是通過媒體查詢
媒體查詢的范圍：
640px寬度針對iphone5 的設計圖
750px寬度針對iphone6、iphone7 的設計圖(使用頻率較高)*/
/*又因為iphone5和iphone6等手機的dpr為2*/
/*所以此時的媒體查詢范圍應該為320-350之間*/
@media all and (max-width:320px) {
html {
font-size:12px;
}
}
@media all and (min-width:321px) and (max-width:375px) {
html {
font-size:14px;
}
}
@media all and (min-width:376px) {
html {
font-size:16px;
}
}
/*布局開始*/
/*測量header部分的高度*/
header {
background-color: #0dc441;
/*設計圖中量出的高度為88px
那么代碼的高度應該如何計算呢?
css中的rem= ps量出的px / dpr(2) / 對應的font-size值[此時
media中設置的值為12px]
所以高度應該為：
88px / 2 / 12 = ?rem*/
height:3.67rem;
/*讓header也變成彈性盒子*/
display: flex;
justify-content: center;
align-items:center;
}
header span {
display: block;
width:5.04rem;
height:2rem;
background-color: #64d985;
text-align: center;
line-height: 2rem;
color: #fff;
/*字體大小使用具體值就可以，使用
rem偏差較大*/
font-size:12px;
}
header span:nth-child(1) {
border-radius:1rem 0 0 1rem ;
}
header span:nth-child(2) {
border-radius:0 1rem 1rem 0 ;
background-color: #3dd067;
}
nav {
height: 2.95rem;
/*background-color: orange;*/
border-bottom:1px solid #d9d9d9;
display: flex;
}
nav li {
flex:1;
height:2.95rem;
text-align: center;
line-height:2.95rem;
font-size:14px;
color: #666666;
}
nav li:nth-child(1){
color: #0dc441;
border-bottom:2px solid #0dc441;
}
main {
/*使用flex:1后會將剩余的區域都分配給main*/
flex:1;
background-color: lightblue;
overflow: auto;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section figure {
/*寬度不要設置具體值*/
/*width:13.125rem;*/
width:49%;
border:1px solid #e5e5e5;
margin-bottom:0.41rem;
}
section figure img {
width: 100%;
}
section figure figcaption {
height: 2.46rem;
border-top:1px solid #e5e5e5;
text-align: center;
line-height:2.46rem;
font-size:12px;
}
footer {
height: 3.67rem;
/*background-color: pink;*/
display: flex;
padding:0 1.25rem;
justify-content: space-between;
}
footer div {
/*background-color: orange;*/
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
footer div i {
font-size:1.33rem !important;
color: #d6d6d6;
}
div span {
font-size:12px;
color: #d6d6d5;
}
footer div:nth-of-type(3){
width:4.37rem;
/*background-color: red;*/
position: relative;
}
footer div:nth-of-type(3) img {
width: 100%;
position: absolute;
bottom:0;
}
字體圖標使用的是iconfont。