CSS3與頁面佈局學習總結（四）——頁面佈局大全BFC、定位、浮動、7種垂直居中方法

時間  2019-11-11
標籤 css3 css 頁面 佈局 學習 總結 大全 bfc 定位 浮動 垂直 居中 方法 欄目 CSS 简体版
原文   原文鏈接

1、BFC與IFC

1.一、BFC與IFC概要

BFC（Block Formatting Context）即「塊級格式化上下文」， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你能夠把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生做用。css

BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也能夠說BFC就是一個做用範圍。html

在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型能夠是 block ，或者是 inline ，但不能同時屬於這二者。而且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 裏格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 裏格式化。html5

1.二、如何產生BFC

當一個HTML元素知足下面條件的任何一點，均可以產生Block Formatting Context：
a)、float的值不爲nonejava

b)、overflow的值不爲visiblenode

c)、display的值爲table-cell, table-caption, inline-block中的任何一個jquery

d)、position的值不爲relative和staticgit

CSS3觸發BFC方式則能夠簡單描述爲：在元素定位非static,relative的狀況下觸發，float也是一種定位方式。github

1.三、BFC的做用與特色

a)、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋web

若是一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態，當float不爲none時，position爲absolute、fixed時元素將脫離標準流。

沒有BFC的狀況：

示例代碼：

  View Code

運行結果：

此時的div1由於float已經產生了BFC，在div2中添加樣式overflow:hidden讓其產生BFC，代碼以下：

複製代碼 
            #div2{
                width: 300px;
                height: 300px;
                background: lightblue;
                overflow: hidden;
            }
複製代碼

運行結果：

b)、清除元素內部浮動，計算浮動元素的高度

只要把父元素設爲BFC就能夠清理子元素的浮動了，最多見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就能夠了(IE Haslayout)。

當一個元素的內部元素浮動時不會計算其高度，示例以下：

  View Code

運行結果：

修改div0讓其觸發BFC，還原高度，代碼以下：

複製代碼 
            #div0 {
                border: 2px solid lightsalmon;
                padding: 20px;
                width: 400px;
                overflow: hidden;  /*讓div0觸發BFC*/
            }
複製代碼

運行結果：

 

c）、外邊距將再也不與上下文以外的元素摺疊 

示例代碼：

  View Code

若是此時將腳本的div1與div2同時變成BFC環境，修改的css以下：

複製代碼 
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
                overflow: hidden;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
                overflow: hidden;
            }
複製代碼

執行時會發現效果仍是同樣，此時的div1與div2都是BFC上下文，可是要求的是：外邊距將再也不與上下文以外的元素摺疊，按照要求，咱們應該將div1與div2放在不一樣的上下文中，修改後的腳本以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
            }
            #div2-outer
            {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>BFC與IFC</h2>
        <div id="div1">div1
        </div>
        <div id="div2-outer">
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>
複製代碼

運行結果以下：

 d)、元素會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部（文字不會環繞佈局）

示例代碼：

  View Code

沒有BFC時的運行結果：

從運行結果能夠看出div與p仍是重疊了，只是文字被擠出，和前面提到的重疊是同一個意思，將p元素觸發BFC後的效果以下圖所示：

            p{
                overflow: hidden;
            }

運行結果：

1.四、IE與Layout

Layout是 IE 瀏覽器渲染引擎的一個組成部分。在 IE 瀏覽器中，一個元素要麼本身對自身的內容進行組織和計算大小， 要麼依賴於包含塊來計算尺寸和組織內容，hasLayout 與 BFC 有不少類似之處。在IE中，元素使用「佈局」概念來控制尺寸和定位，分爲擁有佈局和沒有佈局兩種狀況，擁有佈局的元素由它控制自己及其子元素的尺寸和定位，而沒有佈局的元素則經過父元素（最近的擁有佈局的祖先元素）來控制尺寸和定位，而一個元素是否擁有佈局則由 hasLayout 屬性告知瀏覽器，它是個布爾型變量，true 表明元素擁有佈局，false 表明元素沒有佈局。簡而言之，hasLayout 只是一個 IE 下專有的屬性，hasLayout 爲 true 的元素瀏覽器會賦予它一系列的效果。
特別注意的是，hasLayout 在 IE 8 及以後的 IE 版本中已經被拋棄，因此在實際開發中只需針對 IE 8 如下的瀏覽器爲某些元素觸發 hasLayout。

出發IE下的haslayout方法：

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用於塊級元素)
overflow-x: (除 visible 外任意值，僅用於塊級元素)
overflow-y: (除 visible 外任意值，僅用於塊級元素)
position: fixed

綜合前面的內容清除浮動的寫法以下：

複製代碼 
.floatfix{
*zoom:1;  /*在舊版本的IE瀏覽器縮放大小，觸發haslayout*/
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
複製代碼

除了BFC還有IFC,GFC,FFC,是不一樣格式化上下文（Formatting Context）的簡稱，GFC是網格格式化上下文（Grid Formatting Context），FFC是彈性盒格式化上下文（Flex Formatting Context），FKC是開封菜的意思:）。

2、定位

使用css佈局position很是重要，他的語法以下：

position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增長的值。

2.一、static
能夠認爲靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

示例：

  View Code

運行結果：

定義偏移並未起做用。

2.二、relative

相對定位，對象遵循常規流，而且參照自身在常規流中的位置經過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位</title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin: 10px;
            }
            #div1 {
                position: relative;  /*相對定位*/
                left:30px;  /*在本身原有位置上相對左邊偏移30像素*/
                bottom: -30px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>
</html>
複製代碼

運行結果：

2.三、absolute

絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。

元素定位參考的是離自身最近的定位祖先元素，要知足兩個條件，第一個是本身的祖先元素，能夠是父元素也能夠是父元素的父元素，一直找，若是沒有則選擇body爲對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值爲非static都行。

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            
            #div1 {
                width: 400px;
                height: 400px;
            }
            
            #div2 {
                width: 300px;
                height: 300px;
            }
            
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>
    </head>

    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>

    </body>

</html>
複製代碼

運行結果：

 由於div3使用absolute絕對定位，它的參考對象是父元素div2,div1都不知足條件，由於二者都沒有進行定位，是默認的定位值static，根據約定最終找到body，因此會出如今頁面的右上角。此時若是想讓div3的參照對象爲div1，則能夠修改代碼爲：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            #div1 {
                width: 400px;
                height: 400px;
                position: relative;  /*相對定位*/
            }
            #div2 {
                width: 300px;
                height: 300px;
            }
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>
    </body>
</html>
複製代碼

運行結果：

 

2.四、fixed

固定定位，與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。

簡單的回頂端示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            body{
                height: 3000px;
            }
            #top{
                width: 50px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                background: lightblue;
                position: fixed;
                right: 1px;
                bottom: 30%;
            }
        </style>
    </head>
    <body>
        <h2 id="title">固定定位</h2>
        <div id="top"><a href="#title">回頂部</a></div>
    </body>
</html>
複製代碼

運行結果：

練習：

center：
與absolute一致，但偏移定位是以定位祖先元素的中心點爲參考。盒子在其包含容器垂直水平居中。（CSS3）
page：
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，不然取決於每一個absolute模式。（CSS3）
sticky：
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

2.五、z-index屬性

語法：z-index: auto | <integer>
默認值：auto
適用於：定位元素。即定義了position爲非static的元素
取值：
auto： 元素在當前層疊上下文中的層疊級別是0。元素不會建立新的局部層疊上下文，除非它是根元素。 
整數： 用整數值來定義堆疊級別。能夠爲負值。 說明：
檢索或設置對象的層疊順序。 
z-index用於肯定元素在當前層疊上下文中的層疊級別，並肯定該元素是否建立新的局部層疊上下文。 
當多個元素層疊在一塊兒時，數字大者將顯示在上面。

 示例：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                position: absolute;
            }
            #div1 {
                background: lightsalmon;
            }
            #div2 {
                background: lightgreen;
                left: 33px;
                top: 33px;
                z-index: 1;
            }
            #div3{
                background: lightblue;
                left: 66px;
                top: 66px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </body>
</html> 
複製代碼

未指定z-index時默認運行效果：

指定div2的z-index值時的運行效果：

2.六、菜單

使用前面的內容實現了一個簡單的下拉菜單，效果以下：

菜單結構：

  View Code

示例代碼：

  View Code

運行結果：

2.七、:target僞類

語法：
E:target { css }
說明：
匹配相關URL指向的E元素。
解釋：URL後面跟錨點#，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。只有支持CSS3的瀏覽器可用。

  View Code

運行結果：

通俗說就是url中的#選中的id元素將被css選擇。在完成沒有js的菜單，選項卡時若是不考慮ie8則可使用這種新的辦法。

3、浮動

浮動在CSS佈局中飽受詬病，由於控制起來比較麻煩，但若是掌握了他的特性使用起來仍是不難的，在CSS中使用float指定浮動屬性值，該屬性的值指出了對象是否及如何浮動，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的標準流中，因此文檔的標準流中的塊框表現得就像浮動框不存在同樣。float的基本語法以下：

float：none | left | right

3.一、float取值

none： 設置對象不浮動，默認值

left： 設置對象浮在左邊

right： 設置對象浮在右邊

3.二、float的特性

a)、浮動元素會從標準流中脫離

b)、浮動元素會觸發BFC（塊級元素格式化）、不影響外邊距摺疊

c)、 float元素會變成塊標籤

若是float不是none，當display:inline-table時，display的計算值爲table；當display:inline | inline-block | run-in | table-* 系時，display的計算值爲block，其它狀況爲指定值。

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #span1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
            }
        </style>
    </head>
    <body>
        <span id="span1">span1</span>
    </body>
</html>
複製代碼

 不設置float時的效果：

設置向右float時的效果：

span是一個行內標籤，默認設置高寬無效，但浮動後自動變成了塊標籤。

d)、float在絕對定位和display爲none時不生效

當display爲node時元素會隱藏，因此float意義不大；當position爲absolute絕對定位時元素也將從標準流中脫離，元素使用偏移量移動，float特性無效。

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
                position: absolute;
                bottom: 5px;
                left: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1">span1</div>
    </body>
</html>
複製代碼

e)、浮動元素間會堆疊

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，浮動元素間的堆疊示例：

  View Code

運行結果：

f)、浮動元素不能溢出包含塊

浮動元素在包含塊內，當包含塊的寬度不足以容下浮動的子元素時，將自動折行；垂直方向當包含塊認爲浮動的子元素沒有高度時，子元素會溢出，BFC能解決該問題。水平方向不會溢出，垂直方向有可能會溢出。

  View Code

觸發BFC時：

g)、相鄰的浮動元素，left屬性最前面的元素，排在最左邊

從e就能夠看出效果，這裏不舉例。

h)、相鄰的浮動元素，right屬性最前面的元素，排在最右邊

排列在最左邊的向右浮動時出如今最右邊，示例以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: right;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1左
        </div>
        <div id="div2">div2中
        </div>
        <div id="div3">div3右
        </div>
    </body>
</html>
複製代碼

運行效果：

i)、包含塊不會計算浮動元素的高寬

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            .cls1 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 5px;
            }
            #div0{
                width: 330px;
                padding: 5px;
                border: 5px solid lightblue;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <div id="div1" class="cls1">div1
            </div>
            <div id="div2" class="cls1">div2
            </div>
            <div id="div3" class="cls1">div3
            </div>
        </div>
    </body>
</html>

運行結果：

 

試試這個代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            .cls1 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin: 5px;
            }
            #div0{
                width: 330px;
                padding: 5px;
                border: 5px solid lightblue;
            overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <div id="div1" class="cls1">div1
            </div>
            <div id="div2" class="cls1">div2
            </div>
            <div id="div3" class="cls1">div3
            </div>
        </div>
        <p>薩芬大反卻是</p>
    </body>
</html>

　　

j)、浮動元素與非浮動元素會重疊，擠出塊中的內容（看清楚啦，是擠出塊中的內容）

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                float: left;
            }
            #div2 {
                width: 200px;
                height: 200px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>
複製代碼

運行結果：

當div1從float時從標準流中脫離開了，div2在標準流中，能夠形象的認爲在div2這個隊列前沒有元素了因此div2要向前靠，脫離標準流的元素的z方向排列時比標準流中的元素排列要靠前一些，但div2的內容被div1佔用的空間擠出。

3.三、清除浮動

該屬性的值指出了不容許有浮動對象的邊。
clear：none | left | right | both
適用於：塊級元素
取值：
none： 容許兩邊均可以有浮動對象 
both： 不容許有浮動對象 
left： 不容許左邊有浮動對象 
right： 不容許右邊有浮動對象

3.3.一、清除外部浮動

須要注意的是clear是用於控制元素自己的，不能影響別的元素，示例以下：

  View Code

運行結果：

示例中div1的清除浮動並無效果，由於他沒有辦法影響div2，若是設置div2清除浮動，則元素自己會向下一行，示例代碼以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮動</title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                float: left;
            }
            #div2 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                float: left;
                clear: both;  /*div2的右邊與左邊都不能出現浮動元素*/
            }
        </style>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </body>

</html>
複製代碼

 運行結果以下：

 

若是div2後面還有一個div3也將會出現前面同樣的狀況：

  View Code

 練習：

3.3.二、清除內部浮動

當一個包含塊內部有浮動元素時，外部塊不會計算浮動塊的高度與寬度，爲了讓內部的浮動元素撐開包含塊，須要還原高度，暫且稱爲清除內部浮動。

方法1：BFC

  View Code

方法2：增長一個空的div，清除浮動

  View Code

運行結果同方法1，要解釋該方法的原理能夠參考上文中的第j點。

較爲通用且兼容的清除浮動寫法：

複製代碼 
            .clearfix {
                *zoom: 1;/*在舊版本的IE瀏覽器縮放大小，觸發haslayout（相似BFC）*/
            }
            .clearfix:after {  /*僞元素，在應用該元素後添加一個僞元素*/
                content: "";  /*內容爲空*/
                display: table;   /*BFC，清除內部浮動*/
                clear: both; /*清除外部浮動*/
            }
複製代碼

4、多種居中辦法

4.一、塊標籤自身水平居中

當一個有寬度的塊標籤設置margin:0 auto時將實現自身的水平居中，示例腳本以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #container {
                margin: 0 auto;
                width: 90%;
                background: lightblue;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="container">
        </div>
    </body>
</html>
複製代碼

 運行結果：

4.二、塊標籤內對齊

text-align：start | end | left | right | center | justify | match-parent | justify-all
默認值：start
適用於：塊標籤
left： 內容左對齊。 
center： 內容居中對齊。 
right： 內容右對齊。 
justify： 內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最後一行（包括僅有一行文本的狀況，由於它既是第一行也是最後一行）不作處理。（CSS3） 
start： 內容對齊開始邊界。（CSS3） 
end： 內容對齊結束邊界。（CSS3） 
match-parent： 這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值並計算的，計算值能夠是 left 和 right 。（CSS3） 
justify-all： 效果等同於 justify，但還會讓最後一行也兩端對齊。（CSS3）

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
            #container {
                margin: 0 auto;
                width: 90%;
                background: lightblue;
                height: 200px;
                text-align: center;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="div1">div1</div>
            Hello Center
        </div>
    </body>
</html> 
複製代碼

運行結果：

這種對齊方式只針對塊標籤內的行內標籤（inline box）與行內塊標籤（inline block）有將，對塊標籤是無效的由於塊標籤默認老是佔整行。若是將示例中div1的顯示方式修改成行內塊標籤(display: inline-block;)，則效果以下所示：

 

在佈局中常常會須要垂直居中，但沒有像水平居中那麼容易，這裏總結出5種辦法：

4.三、垂直居中方法一

當一個設置了定位的元素全部的偏移爲0且margin爲auto時將水平，垂直都居中，且父元素自身的高度可動態變化。

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 90%;
                border: 3px solid lightblue;
                margin: 0 auto;
                position: relative;
            }
            
            #div1 {
                width: 200px;
                height: 150px;
                background: lightgreen;
                position: absolute;
                /*居中開始*/
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                /*居中結束*/
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <div id="div1">

            </div>
        </div>
    </body>

</html>
複製代碼

運行結果：

我的認爲box偏移上下左右都爲0，這時候它就不知所措了，只好待在中間。

4.四、垂直居中方法二

若是是單行文本，行高如塊的高度同樣時將居中，只一行，行高和元素同樣高，居中。

line-height: 600px;
height: 600px;

只能夠是文字等一些行內標籤，圖片不行，示例代碼以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                background: lightblue;
                height: 80px;
                /*line-height:40px;*/
                font:20px/80px "microsoft yahei";
            }
        </style>
    </head>
    <body>
        <div id="div0">
            若是是單行文本，行高如塊的高度同樣時將居中，只一行，行高和元素同樣高，居中
        </div>
    </body>

</html>
複製代碼

運行結果：

 

4.五、垂直居中方法三

讓元素相對父元素定位，偏移左50%，上50%，把自身向左移半個寬度，向上移半個高度，同時完成了水平與垂直方向的居中

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
            }
            
            #div1{
                width: 200px;
                height: 150px;
                background: lightcoral;
                position: absolute;
                left: 50%;
                top:50%;
                margin-top: -75px;
                margin-left: -100px;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <div id="div1">
            </div>
        </div>
    </body>

</html>
複製代碼

運行效果：

4.六、垂直居中方法四

在CSS有一個屬性應該欺騙過不少開發者，一直認爲使用了他就能夠垂直居中了，但不行，這個屬性就是：

語法：vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默認值：baseline

做用：設置或檢索內聯元素在行框內的垂直對其方式
適用於：內聯級與 table-cell 元素
baseline： 把當前盒的基線與父級盒的基線對齊。若是該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊 
sub： 把當前盒的基線下降到合適的位置做爲父級盒的下標（該值不影響該元素文本的字體大小） 
super： 把當前盒的基線提高到合適的位置做爲父級盒的上標（該值不影響該元素文本的字體大小） 
text-top： 把當前盒的top和父級的內容區的top對齊 
text-bottom： 把當前盒的bottom和父級的內容區的bottom對齊 
middle： 把當前盒的垂直中心和父級盒的基線加上父級的半x-height對齊 
top： 把當前盒的top與行盒的top對齊 
bottom： 把當前盒的bottom與行盒的bottom對齊 
<percentage>： 把當前盒提高（正值）或者下降（負值）這個距離，百分比相對line-height計算。當值爲0%時等同於baseline。 
<length>： 把當前盒提高（正值）或者下降（負值）這個距離。當值爲0時等同於baseline。（CSS2） 說明：
設置或檢索內聯元素在行框內的垂直對其方式。 
對應的腳本特性爲verticalAlign。

不能實現對齊的主要緣由是：vertical-align這個屬性的特色，它是相對兄弟級行高（line-height）來定位

 

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
                text-align: center;
            }
            #img1{
                vertical-align: middle;
            }
            #span1{
                line-height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="div0">
            <img src="img/cp.png" id="img1"/><span id="span1"></span>
        </div>
    </body>
</html>
複製代碼

運行效果：

其實此處只設置父元素的行高與高度同樣時也能達到上面的效果，示例代碼以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            #div0 {
                width: 80%;
                height: 500px;
                background: lightblue;
                position: relative;
                margin: 0 auto;
                text-align: center;
                line-height: 500px;
            }
            
            #img1 {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <img src="img/cp.png" id="img1" />
        </div>
    </body>

</html>
複製代碼

在IE8與Google瀏覽器中運行效果：

4.七、垂直居中方法五

4.7.一、使用div構造一個表格

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .divTable {
                display: table;
                width:50%;
            }
            
            .divTr {
                display: table-row;
            }
            .divTd {
                display: table-cell;
            }
            div{
                border:1px solid blue;
            }
        </style>
    </head>

    <body>
        <div class="divTable">
            <div class="divTr">
                <div class="divTd">td11</div>
                <div class="divTd">td12</div>
            </div>
            <div class="divTr">
                <div class="divTd">td21</div>
                <div class="divTd">td22</div>
            </div>
        </div>
    </body>
</html>
複製代碼

運行結果：

4.7.二、使用表格特性居中

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 50%;
                background: lightblue;
                margin: 0 auto;
                display: table;  /*相似讓div1爲一個table*/
            }
            
            #div1{
                display: table-cell;  /*相似table中的td*/
                vertical-align: middle;   /*垂直居中*/
                text-align: center;  /*水平居中*/
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <div id="div1">
                <img src="img/cp.png" id="img1" height="200" />
            </div>
        </div>
    </body>

</html>
複製代碼

運行結果：

4.八、垂直居中方法六

在某些時候須要將小圖片與文字對象，可使用對齊的屬性absmiddle（絕對居中），示例以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border: 2px solid lightblue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <img src="img/018080.png" align="absmiddle"/>電視機
        </div>
    </body>
</html>
複製代碼

運行結果：

在IE8與chrome瀏覽器下的效果同樣。

4.九、垂直居中方法七

方法與4.5很是相似，可是4.5要求知道居中元素自身的高度與寬度，這樣會有必定的侷限，CSS3中可使用transform移動元素自身的寬度與高度，示例代碼以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            
            #div0 {
                width: 80%;
                height: 70%;
                background: lightblue;
                margin: 0 auto;
                position: relative;
            }
            
            #img1 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);
            }
        </style>
    </head>

    <body>
        <div id="div0">
                <img src="img/cp.png" id="img1"/>
        </div>
    </body>

</html>
複製代碼

運行結果：

transform用於設置或檢索對象的轉換，參數translate()指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則默認值爲0

5、示例下載

github:https://github.com/zhangguo5/CSS3_3

 

1、負邊距與浮動佈局

1.一、負邊距

所謂的負邊距就是margin取負值的狀況，如margin:-100px，margin:-100%。當一個元素與另外一個元素margin取負值時將拉近距離。常見的功能以下：

1.1.一、向上移動

當多個元素同時從標準流中脫離開來時，若是前一個元素的寬度爲100%寬度，後面的元素經過負邊距能夠實現上移。當負的邊距超過自身的寬度將上移，只要沒有超過自身寬度就不會上移，示例以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>負邊距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                height: 100px;
                background: lightblue;
                width: 100%;
                float: left;
            }
            
            #div2 {
                height: 100px;
                background: lightgreen;
                width: 30%;
                float: left;
                margin-left: -100%;
            }
        </style>
    </head>

    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>
複製代碼

margin-left:-29%時運行效果：

margin-left:-30%時運行效果：

margin-left:-100%時運行效果：

1.1.二、去除列表右邊框

開發中常須要在頁面中展現一些列表，如商品展現列表等，若是咱們要實現以下佈局：

 

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>負邊距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                width: 800px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
        </div>
    </body>

</html>
複製代碼

運行後的結果：

可是上面的效果中右邊多出了20px的距離，底下多出20px空白，解決方法以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>負邊距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 780px;
                height: 380px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
            #div2{
                margin-right: -20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
            </div>
        </div>
    </body>
</html>
複製代碼

方法是使用了邊距摺疊，能夠在前面的文章中查看到細節，基本原理以下圖所示：

1.1.三、負邊距+定位，實現水平垂直居中

具體請參考《CSS3與頁面佈局學習總結（三）——BFC、定位、浮動、7種垂直居中方法》

1.1.四、去除列表最後一個li元素的border-bottom

方法一：

  View Code

方法二：

使用CSS3中的新增長選擇器，選擇最後一個li，不使用類樣式，好處是當li的個數不肯定時更加方便。

若是li的border-bottom顏色與ul的border顏色是同樣的時候，在視覺上是被隱藏了。若是其顏色不一致的時候仍是有問題，給ul寫個overflow：hidden；就能夠解決這個問題。

練習：

1.二、雙飛翼佈局

經典三列布局，也叫作聖盃佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：

一、三列布局，中間寬度自適應，兩邊定寬； 
二、中間欄要在瀏覽器中優先展現渲染； 
三、容許任意列的高度最高；
四、要求只用一個額外的DIV標籤； 
五、要求用最簡單的CSS、最少的HACK語句；

在不增長額外標籤的狀況下，聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局，實現的代碼以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>雙飛翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }
            
            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            
            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }
            
            #main {
                height: 75%;
            }
            
            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }
            
            #center {
                width: 100%;
                background: lightgreen;
            }
            
            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }
            
            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }
            
            #main-inner {
                padding-left: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                header
            </div>
            <div id="main">
                <div id="center">
                    <div id="main-inner">
                        center
                    </div>
                </div>
                <div id="left">
                    left
                </div>
                <div id="right">
                    right
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>
複製代碼

 

運行效果：

示例中增長一個main-inner的目的是由於當left上移時與center重疊了，left覆蓋了center，經過main-inner的padding將left佔用的位置空出。

1.三、多欄佈局

1.3.一、柵格系統

欄柵格系統就是利用浮動實現的多欄佈局，在bootstrap中用的很是多，這裏以一個980像素的寬實現4列的柵格系統，示例代碼以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>柵格系統</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #container {
                width: 980px;
                margin: 0 auto;
                height: 10%;
            }
            
            #container div {
                height: 100%;
            }
            
            .col25 {
                width: 25%;
                background: lightgreen;
                float: left;
            }
            
            .col50 {
                width: 50%;
                background: lightblue;
                float: left;
            }
            
            .col75 {
                width: 75%;
                background: lightcoral;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="col50">
                A
            </div>
            <div class="col50">
                B
            </div>
            <div class="col25">
                C
            </div>
        </div>
    </body>

</html>
複製代碼

 

運行結果：

一樣的原理能夠輕易擴展到8列，10列，16列的柵格系統。

1.3.二、多列布局

柵格系統並無真正實現分欄效果（如word中的分欄），CSS3爲了知足這個要求增長了多列布局模塊，若是須要實現多列布局模塊先看看這幾個CSS3屬性：

column-count：<integer> | auto
功能：設置或檢索對象的列數 
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<integer>： 用整數值來定義列數。不容許負值 
auto： 根據 <' column-width '> 自定分配寬度

column-gap：<length> | normal
功能：設置或檢索對象的列與列之間的間隙 
適用於：定義了多列的元素
計算值：絕對長度值或者normal

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：設置或檢索對象的列與列之間的邊框。與border屬性相似。 
適用於：定義了多列的元素

columns：<' column-width '> || <' column-count '>
功能：設置或檢索對象的列數和每列的寬度
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<' column-width '>： 設置或檢索對象每列的寬度 
<' column-count '>： 設置或檢索對象的列數

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多列布局</title>
        <style type="text/css">
            #div1{
                column-count: 3;  /*分3欄*/
                column-gap: 40px;  /*欄間距*/
                column-rule: 2px solid lightgreen;  /*欄間分隔線，與border設置相似*/
                line-height: 26px;
                font-size: 14px;
                height: 500px;
                background: lightcyan;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。CSS即層疊樣式表（Cascading StyleSheet）。 在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。
        </div>
    </body>
</html>
複製代碼

運行結果：

2、彈性佈局（Flexbox）

假設在項目中有一個這樣的需求：同一行有3個菜單，每一個菜單佔1/3的寬度，怎麼實現？

可能你會這樣實現：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #menu {
                width: 980px;
                margin: 0 auto;
            }
            #menu li{
                width: 33.3%;
                float: left;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司簡介</a></li>
            <li><a href="#" class="item">商品展現</a></li>
            <li><a href="#" class="item">後臺管理</a></li>
        </ul>
    </body>

</html>
複製代碼

結果：

上面的辦法有明顯的不足就是可擴展性太差，由於若是再添加一項就會有一個菜單項會換行，解決方法是：CSS3中提供了強大的彈性盒佈局。示例：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;  /*當前塊爲彈性盒*/
            }
            #menu li{
                flex: auto;  /*彈性盒中的單項*/
                float: left;
            }
            #menu li a{
                display:block;
                height: 26px;
                line-height: 26px;
                border:1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司簡介</a></li>
            <li><a href="#" class="item">商品展現</a></li>
            <li><a href="#" class="item">後臺管理</a></li>
            <li><a href="#" class="item">企業文化</a></li>
            <li><a href="#" class="item">在線諮詢</a></li>
        </ul>
    </body>

</html>
複製代碼

運行結果：

display屬性值flex： 將對象做爲彈性伸縮盒顯示

flex：none | <flex-grow> <flex-shrink > || <flex-basis>
功能：設置或檢索彈性盒模型對象的子元素如何分配空間
適用於：flex子項
none： none關鍵字的計算值爲: 0 0 auto 
<flex-grow>： 用來指定擴展比率，即剩餘空間是正值時此「flex子項」相對於「flex容器」裏其餘「flex子項」能分配到空間比例。
在「flex」屬性中該值若是被省略則默認爲「1」 
<flex-shrink>： 用來指定收縮比率，即剩餘空間是負值時此「flex子項」相對於「flex容器」裏其餘「flex子項」能收縮的空間比例。
在收縮的時候收縮比率會以伸縮基準值加權
在「flex」屬性中該值若是被省略則默認爲「1」 
<flex-basis>： 用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分佈以前，「flex子項」長度的起始數值。
在「flex」屬性中該值若是被省略則默認爲「0%」
在「flex」屬性中該值若是被指定爲「auto」，則伸縮基準值的計算值是自身的 <width> 設置，若是自身的寬度沒有定義，則長度取決於內容。

示例：以下狀況每一個元素的計算寬是多少

複製代碼 
<ul class="flex">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>
複製代碼 
.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}

本例定義了父容器寬（即主軸寬）爲800px，因爲子元素設置了伸縮基準值flex-basis，相加300+200+400=900，那麼子元素將會溢出900-800=100px；
因爲同時設置了收縮因子，因此加權綜合可得300*1+200*2+400*3=1900px；
因而咱們能夠計算a,b,c將被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即約等於16px
b被移除溢出量：(200*2/1900)*100，即約等於21px
c被移除溢出量：(400*3/1900)*100，即約等於63px
最後a,b,c的實際寬度分別爲：300-16=284px, 200-21=179px, 400-63=337px

可見算法比較麻煩，簡單的作法以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
            }
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;
                /*當前塊爲彈性盒*/
            }
            #menu li {
                float: left;
            }
            #menu li a {
                display: block;
                height: 26px;
                line-height: 26px;
                border: 1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
            .a {
                flex: 1;
            }
            .b {
                flex: 2;
            }
            .c {
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">公司簡介</a>
            </li>
            <li class="b">
                <a href="#" class="item">商品展現</a>
            </li>
            <li class="c">
                <a href="#" class="item">後臺管理</a>
            </li>
        </ul>
    </body>
</html>
複製代碼

運行結果：

Flex容器能夠設置屬性flex-flow，取值爲row,row-reverse,column,column-reverse四種值
row：顯示在一行中

row-reverse：顯示在一行中，反轉

column：顯示在一列中

column-reverse：顯示在一列中 反轉

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
                padding-top :20px;
            }
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;
                /*當前塊爲彈性盒*/
                flex-flow: row-reverse;
                /*子項在一行中顯示，反轉*/
            }
            #menu li {
                flex: auto;
            }
            #menu li a {
                display: block;
                height: 26px;
                line-height: 26px;
                border: 1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">A公司簡介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展現</a>
            </li>
            <li class="c">
                <a href="#" class="item">C後臺管理</a>
            </li>
        </ul>
    </body>
</html>
複製代碼

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
                padding-top :20px;
            }
            #menu {
                margin: 0 auto;
                display: flex;
                /*當前塊爲彈性盒*/
                flex-flow: column-reverse;
                height: 200px;
                overflow: hidden;
            }
            #menu li{
                border: 1px solid cornflowerblue;
                margin-bottom: 5px;
                text-align: center;
            }
            #menu li a {
                text-decoration: none;
                vertical-align: middle;
            }
            .a{
                flex: 1;
            }
            .b{
                flex: 2;
            }
            .c{
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">A公司簡介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展現</a>
            </li>
            <li class="c">
                <a href="#" class="item">C後臺管理</a>
            </li>
        </ul>
    </body>
</html>
複製代碼

3、流式佈局（Fluid）

固定佈局和流式佈局在網頁設計中最經常使用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受窗口寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣能夠根據客戶端分辨率的大小來進行合理的顯示。

固定佈局效果：

流式佈局效果：

利用前面的知識點能夠實現這兩種佈局，這裏就不去實現了

3、瀑布流佈局

瀑布流佈局是流式佈局的一種。是當下比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。最先採用此佈局的網站是Pinterest，逐漸在國內流行開來。

3.一、常見瀑布流佈局網站

鼻祖：Pinterest
通用類：豆瓣市集，花瓣網，我喜歡，讀圖知天下
美女圖片：圖麗網
時尚資訊類：看潮網
時尚購物類：蘑菇街，美麗說，人人逛街，卡當網
品牌推廣類：凡客達人
家居o2o類：新巢網小貓家
微博社交類： 都愛看
搞笑圖片類：道趣兒
藝術收藏類：微藝術
潮流圖文分享：荷都分享網

3.二、特色

優勢

一、有效的下降了界面複雜度，節省了空間：咱們再也不須要臃腫複雜的頁碼導航連接或按鈕了。

二、對觸屏設備來講，交互方式更符合直覺：在移動應用的交互環境當中，經過向上滑動進行滾屏的操做已經成爲最基本的用戶習慣，並且所須要的操做精準程度遠遠低於點擊連接或按鈕。

三、更高的參與度：以上兩點所帶來的交互便捷性可使用戶將注意力更多的集中在內容而不是操做上，從而讓他們更樂於沉浸在探索與瀏覽當中。

缺點

1. 有限的用例：
無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。
例如，在電商網站當中，用戶時常須要在商品列表與詳情頁面之間切換，這種狀況下，傳統的、帶有頁碼導航的方式能夠幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。

2. 額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會須要在本身的產品中進行不一樣程度的定製化處理，以知足大家本身的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也良莠不齊，你必須作好充分的測試與調整工做。

3. 再見了，頁腳：
若是使用了比較典型的無限滾動加載模式，這就意味着你能夠和頁腳說拜拜了。
最好考慮一下頁腳對於你的網站，特別是用戶的重要性;若是其中確實有比較重要的內容或連接，那麼最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻由於自動加載的內容忽然出現而不管如何都沒法點擊頁腳中的連接時，他們會變的愈加憤怒。

5. SEO：

集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來講，在這方面進行冒險是很不划算的。

6. 關於頁面數量的印象：
其實站在用戶的角度來看，這一點並不是負面;不過，若是對於你的網站來講，經過更多的內容頁面展現更多的相關信息(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。

3.三、masonry實現瀑布流佈局

masonry是一個響應式網格佈局庫（非jQuery）。（Cascading grid layout library）

若是使用CSS+JavaScript固然能夠實現瀑布流佈局，但相對麻煩，masonry是一個javascript插件，經過該插件能夠輕鬆實現瀑布流佈局，和CSS中float的效果不太同樣的地方在 於，float先水平排列，而後再垂直排列，使用Masonry則垂直排列元素，而後將下一個元素放置到網格中的下一個開發區域。這種效果能夠最小化處理 不一樣高度的元素在垂直方向的間隙。

官網：http://masonry.desandro.com/

源碼：https://github.com/desandro/masonry

3.3.一、下載並引用masonry

能夠去官網或github下載「masonry.pkgd.min.js」，將下載到的插件添加到項目中，並在頁面中添加引用，以下所示：

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

CDN：

<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

3.3.二、準備內容

在頁面中使用HTML+CSS準備須要使用瀑布流顯示的內容，以下所示：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流佈局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }
            
            .grid-item {
                width: 200px;
                float: left;
            }
            
            .a {
                background: lightblue;
                height: 200px;
            }
            
            .b {
                background: lightcoral;
                height: 300px;
            }
            
            .c {
                background: lightgreen;
                height: 500px;
            }
            
            .d {
                background: lightsalmon;
                height: 350px;
            }
            
            .e {
                background: lightseagreen;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>
複製代碼

沒有使用瀑布流佈局時的效果：

3.3.三、初始化插件

使用jQuery：

複製代碼 
$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});
複製代碼

原生JavaScript：

複製代碼 
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});
複製代碼

使用HTML屬性：

複製代碼 
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
複製代碼

經常使用屬性以下：

複製代碼 
itemSelector : '.item',//瀑布流佈局中的單項選擇器
columnWidth : 240 ,//一列的寬度
isAnimated:true,//使用jquery的佈局變化，是否啓用動畫
animationOptions:{
//jquery animate屬性 漸變效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的間隙 Integer
isFitWidth:true,//是否適應寬度 Boolean
isResizableL:true,//是否可調整大小 Boolean
isRTL:false,//是否使用從右到左的佈局 Boolean
複製代碼

 

初始化代碼以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>瀑布流佈局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }
            
            .grid-item {
                width: 200px;
                float: left;
            }
            
            .a {
                background: lightblue;
                height: 200px;
            }
            
            .b {
                background: lightcoral;
                height: 300px;
            }
            
            .c {
                background: lightgreen;
                height: 500px;
            }
            
            .d {
                background: lightsalmon;
                height: 350px;
            }
            
            .e {
                background: lightseagreen;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>

            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var msnry = new Masonry('#grid', {
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        </script>
    </body>

</html>
複製代碼

運行結果：

3.3.四、使用了圖片的瀑布流

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>瀑布流佈局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(1).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(2).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(3).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(4).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(5).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(6).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(7).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(8).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(9).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(10).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload = function() {
                var msnry = new Masonry('#grid', {
                    itemSelector: '.grid-item',
                    columnWidth: 200
                });
            }
        </script>
    </body>

</html>
複製代碼

運行結果：

注意：上面的示例中咱們使用了window.onload事件，緣由是若是圖片沒有加載完成就執行瀑布流佈局會引發堆疊的問題，其實就是初始化是沒有檢測到圖片的高度，window.onload在有許多圖片的環境下會有性能問題，這裏給你們介紹另外一個組件。

3.四、imagesLoaded 圖片加載

imagesLoaded 是一個用於來檢測網頁中的圖片是否載入完成的 JavaScript 工具庫。支持回調的獲取圖片加載的進度，還能夠綁定自定義事件。能夠結合 jQuery、RequireJS 使用。

官網：http://imagesloaded.desandro.com/

源碼：https://github.com/desandro/imagesloaded

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>imagesLoaded – 檢測網頁中的圖片是否加載</title>
    </head>

    <body>
        <div id="div1">
            <img src="img/h/h(2).jpg" width="300" /><img src="img/h/h(1).jpg" width="300" />
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/imagesloaded-master/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            imagesLoaded(document.querySelector('#div1'), function(instance) {
                alert('全部的圖片都加載完成了');
            });

            $('#div1').imagesLoaded()
                .always(function(instance) {
                    console.log('all images loaded');
                })
                .done(function(instance) {
                    console.log('all images successfully loaded');
                })
                .fail(function() {
                    console.log('all images loaded, at least one is broken');
                })
                .progress(function(instance, image) {
                    var result = image.isLoaded ? 'loaded' : 'broken';
                    console.log('image is ' + result + ' for ' + image.img.src);
                });
        </script>
    </body>

</html>
複製代碼

運行結果：

3.五、Infinite Scroll 滾動分頁

Infinite Scroll也是基於jQuery插件，是一個用於滾動分頁的插件（當移動滾動條時將動態加載更多內容），有網友稱這種效果爲」無刷新無分頁完美瀑布流」展示方式。

官網：http://infinite-scroll.com/

源碼：https://github.com/infinite-scroll/infinite-scroll

經常使用屬性：

複製代碼 
$('#masonny-div').infinitescroll({
    navSelector  : "#next",   // 頁面分頁元素(成功後會被隱藏)
    nextSelector : "#next a", // 須要點擊的下一頁連接，和2的html要對應
    itemSelector : ".item"  , // ajax回來以後，每一項的selecter
    animate      : true,      //加載完畢是否採用動態效果
    extraScrollPx: 100,       //向下滾動的像素，必須開啓動態效果
    // debug     : true,      //調試的時候，能夠打開
    bufferPx     : 5,         //提示語展示的時長，數字越大，展示時間越短
    loading: {
        finishedMsg: '沒有更多內容了', //當加載失敗，或者加載不出內容以後的提示語
        img:  'loading-new.gif',   //自定義loadding的動畫圖
        msgText : '正在加載中...',    //加載時的提示語
        },
    },
    function( newElements， opt ) {
       //成功後執行自定義的函數
       //若是須要對新內容進行加工，就在這裏實現
    }
};
複製代碼

屬性與事件官網有詳細的說明這裏只列出來了部分，下面是官網列出的選擇：

複製代碼 
$('.selector').infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
                img: null,
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: null,
    speed: 'fast',
    start: undefined
  },
  state: {
    isDuringAjax: false,
    isInvalidPage: false,
    isDestroyed: false,
    isDone: false, // For when it goes all the way through the archive.
    isPaused: false,
    currPage: 1
  },
  behavior: undefined,
  binder: $(window), // used to cache the selector for the element that will be scrolling
  nextSelector: "div.navigation a:first",
  navSelector: "div.navigation",
  contentSelector: null, // rename to pageFragment
  extraScrollPx: 150,
  itemSelector: "div.post",
  animate: false,
  pathParse: undefined,
  dataType: 'html',
  appendCallback: true,
  bufferPx: 40,
  errorCallback: function () { },
  infid: 0, //Instance ID
  pixelsFromNavToBottom: undefined,
  path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
  maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});
複製代碼

3.5.一、異步加載普通頁面

p1.html頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .item {
                height: 200px;
            }
        </style>
    </head>
    <body>
        <h2>產品列表</h2>
        <div id="items">
            <p class="item">產品一</p>
            <p class="item">產品一</p>
            <p class="item">產品一</p>
            <p class="item">產品一</p>
            <p class="item">產品一</p>
            <p class="item">產品一</p>
        </div>
        <a href="p2.html" id="next">下一頁</a>
        <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#items').infinitescroll({
                navSelector: "#next",  // 頁面分頁元素(成功後會被隱藏)
                nextSelector: "a#next",  // 須要點擊的下一頁連接，和2的html要對應
                itemSelector: ".item",  // ajax回來以後，每一項的selecter，好比每篇文章都有item這個class
                debug: true,  //是否調試
                dataType: 'html',  //數據類型
                maxPage: 3,  //最大頁數
                path: function(index) {  //路徑
                        return "p" + index + ".html";
                }
            }, function(newElements, data, url) {  //成功後的回調
                //console.log("路徑：" + url);
                $(newElements).css('background-color', '#ffef00');
                // $(this).append(newElements);
            });
        </script>
    </body>

</html>
複製代碼

p2.html頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>P2</title>
    </head>
    <body>
        <p class="item">產品二</p>
        <p class="item">產品二</p>
        <p class="item">產品二</p>
        <p class="item">產品二</p>
        <p class="item">產品二</p>
        <p class="item">產品二</p>
    </body>
</html>
複製代碼

p3.html頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>P3</title>
    </head>
    <body>
        <p class="item">產品三</p>
        <p class="item">產品三</p>
        <p class="item">產品三</p>
        <p class="item">產品三</p>
        <p class="item">產品三</p>
        <p class="item">產品三</p>
    </body>
</html>
複製代碼

運行效果：

3.5.二、異步加載json並解析

m1.html頁面：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相冊</title>
        <style type="text/css">
            .item {
                float: left;
                min-height: 300px;
            }
        </style>
    </head>
    <body>
        <h2>相冊</h2>
        <div id="items">
            <p class="item"><img src="../img/i/1.jpg" /></p>
            <p class="item"><img src="../img/i/2.jpg" /></p>
            <p class="item"><img src="../img/i/3.jpg" /></p>
            <p class="item"><img src="../img/i/4.jpg" /></p>
            <p class="item"><img src="../img/i/5.jpg" /></p>
            <p class="item"><img src="../img/i/6.jpg" /></p>
        </div>
        <a href="m2.json" id="next"></a>
        <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#items').infinitescroll({
                navSelector: "#next",
                nextSelector: "a#next",
                itemSelector: ".item",
                debug: true,
                dataType: 'json',
                maxPage: 3,
                appendCallback:false,
                path: function(index) {
                    return "m" + index + ".json";
                }
            }, function(data) {
                
                for(var i=0;i<data.length;i++){
                    $("<p class='item'><img src='../img/i/"+data[i]+".jpg' /></p>").appendTo("#items");
                }
                
            });
        </script>
    </body>
</html>
複製代碼

m2.json數據：

[7,8,9,10,11,12]

m3.json數據：

[13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

運行結果：

由於沒有使用瀑布流佈局因此有點不規整，這裏主要演示分頁。

做業：

完成一個瀑布流+延遲加載圖片的相冊或商品列表，要求圖片大小不一，示例。

一、有後臺，經過ajax加載後臺的json

二、200條數據以上

三、使用技術參考：masonry+imagesloaded+infinitescroll

4、響應式佈局（Responsive）

4.一、媒介類型

@media早在css2.1中就有了，用於判斷媒介類型，如screen屏幕，print打印機，projection投影儀，all表示全部，固然還有許多不經常使用的。能夠指定CSS在什麼樣的媒介中應用，如只在打印時應用某些樣式，如：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>打印</title>
        <!--該樣式只會應用在打印時-->
        <style type="text/css" media="print">
            .noprint
            {
                display:none;
            }
            div{
                font-size:30px;
            }
        </style>
    </head>
    <body>
        <div>
            Installing Cordova Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova.
        </div>
        <button onclick="print();" class="noprint">打印</button>
    </body>
</html>
複製代碼

不使用媒介時運行效果：

 使用媒介時運行效果：

4.二、媒介查詢的應用位置（Media Queries）

a)、內部樣式

@media screen and (width:800px){ … }

b)、導入樣式

@import url(example.css) screen and (width:800px);

c)、連接樣式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />

d)、XML中應用樣式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

4.三、Media Queries Hello World

在頁面上放一個層，當屏幕大小在100-640之間時

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>媒介查詢</title>
        <style type="text/css">
            #div1 {
                background: lightblue;
                height: 100px;
            }
            
            @media only screen and (min-width: 100px) and (max-width: 640px) {
                #div1 {
                    background: lightgreen;
                    height: 200px;
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            Hello World!
        </div>
    </body>

</html>
複製代碼

全屏時的運行效果：

縮小瀏覽器的效果：

4.四、媒介查詢語法

@media queries是CSS3中引入的，不只能夠實現媒介類型的查詢能夠實現設備特性的查詢，能夠簡單認爲是對CSS2.1中的media的加強，基本語法以下：

@media [not|only] media_type and feature

not：取反操做

only：讓不支持media query的設備但讀取media type類型的瀏覽器忽略這個樣式

media_type：是媒介類型，具體以下：

feature：定義設備特性，多數容許加前綴min-，max-，多個條件可使用and鏈接，and兩側須要空格。

常見寫法：

            @media only screen and (min-width: 320px) and (max-width: 640px) {
            }

 

複製代碼 
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {
   CSS樣式...
}
複製代碼

and表示與，條件要同時知足；逗號表示或。

4.五、響應式柵格系統（Responsive）

在前面的佈局中咱們學習柵格系統，這裏經過媒介查詢實現響應式柵格系統，腳本以下：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>響應式柵格</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
                font: 20px/20px "microsoft yahei";
            }
            
            div {
                min-height: 100px;
            }
            
            .row {
                width: 800px;
                background: deepskyblue;
                margin: 0 auto;
            }
            
            .row:after {
                content: ' ';
                display: table;
                clear: both;
            }
            
            .col25 {
                width: 25%;
                background: lightgreen;
            }
            
            .col50 {
                width: 50%;
                background: lightcoral;
            }
            
            .col75 {
                width: 75%;
                background: lightblue;
            }
            
            [class*=col] {
                float: left;
            }
            /*0-480手機*/
            
            @media only screen and (max-width:480px) {
                .row {
                    width: 100%;
                }
                [class*=col] {
                    float: none;
                    margin-top: 5px;
                    width: 100%;
                }
            }
            /*480-960平板，手機橫屏*/
            @media only screen and (min-width: 480px) and (max-width: 960px) {
                .row {
                    width: 480px;
                }
            }
            /*960PC屏幕*/
            @media only screen and (min-width:960px) {
                .row {
                    width: 960px;
                }
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header" class="row">
                header
            </div>
            <div id="main" class="row">
                <div id="left" class="col25">left</div>
                <div id="center" class="col50">center</div>
                <div id="right" class="col25">right</div>
            </div>
            <div id="footer" class="row">
                footer
            </div>
        </div>
    </body>

</html>
複製代碼

示例代碼中經過@media設置了多個斷點，當知足條件時樣式會應用，達到響應式的目的，屏幕大960時： 

480-960之間的效果：

 在手機上模擬的效果：

4.六、respond.js

respond.js是一個用於讓IE8如下瀏覽器支持@media queries的插件，也就是使用Respond.js能讓IE6-8支持CSS3 Media Query。Bootstrap裏面就引入了這個JS文件，壓縮後只有3KB。該腳本循環遍歷頁面上的全部 CSS 引用，並使用媒體查詢分析 CSS 規則。而後，該腳本會監控瀏覽器寬度變化，添加或刪除與 CSS 中媒體查詢匹配的樣式。最終結果是，可以在本來不支持的瀏覽器上運行媒體查詢。

要注意的問題：

if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

微軟的utf-8格式且BOM的文件會出問題，BOM格式文檔頭3個字節就是BOM，會影響程序對文檔的處理。

最近有測試發現IE8仍是出現了問題，動畫@keyframe中的@符號形成的影響會使respond.js失效，所以，在使用respond.js時，儘可能就不要用CSS3動畫。

下載地址：https://github.com/scottjehl/Respond/

引入方法：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->

4.七、移動優先（Mobile First）

a）、桌面優先（優雅降級）

這是一種傳統的作法，開發項目時優先PC端，而後再經過一些hack的方法讓項目正常運行在移動端，所謂的降級能夠簡單認爲就是將一些信息隱藏，由於移動端的可視範圍有限，必須給用戶提供簡潔核心的內容。

b)、移動優先（漸進加強）

a)、對於產品設計師，一個新產品先設計移動版，而後纔是桌面版。

b)、對於工程師，一個新產品，先開發移動版，而後纔是桌面版本。

這樣的好處是能把握好最核心最關鍵內容，讓界面簡潔。

練習1：

請模擬以下的響應式顯示效果，要求兼容各類設備：

練習2：

模擬：http://cordova.apache.org/頭部

PC端效果：

移動端效果：

4.八、視區（viewport）

4.8.一、須要設置viewport的緣由

viewport也稱視口，PC上是指瀏覽器窗口的可視區域。先了解兩個概念：

可見視口（visual viewport）：瀏覽器窗口的可視區域

佈局視口（layout viewport）：CSS在應用時所設置的佈局最大寬度。佈局視口能夠大於可見視口。

移動設備上的viewport都是要大於瀏覽器可視區域的、這樣就會產生一個默認縮放的結果，請看示例以下： 

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>viewport</title>
    </head>
    <body>
        <p>
            viewport也稱視口，PC上是指瀏覽器窗口的可視區域。先了解兩個概念： 可見視口（visual viewport）：瀏覽器窗口的可視區域 佈局視口（layout viewport）：CSS在應用時所設置的佈局最大寬度。佈局視口能夠大於可見視口。
        </p>
    </body>
</html>
複製代碼

運行效果：

在手機上顯示的效果：

以上是iphone5顯示的效果，字體根本看不清楚緣由以下：

CSS中的1px並不等於設備的1px，PC中CSS的1個像素每每都是對應着電腦屏幕的1個物理像素
CSS中的像素是邏輯上的px
屏幕上的像素是物理上的px，二者有區別
要考慮PPI，pixels per inch每英寸像素數
當PPI爲90時每一個像素爲0.011英寸
iPhone4的PPI爲326，若是CSS像素再和設備像素保持對應，人眼將很難看清較小的字體或者圖案。

移動設備上的viewport分爲layout viewport、visual viewport和ideal viewport 三類，ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，也就是寬度爲100%的效果。ideal viewport 的意義在於，不管在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不須要用戶手動縮放，也不須要出現橫向滾動條，均可以完美的呈現給用戶。
http://viewportsizes.com/ 各類設備ideal viewport
就是相同英寸下正常分辨率的PC機的物理像素！通常爲72px/英寸，即每英寸寬或高的屏幕有72個物理顏色點。

移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，咱們須要的是ideal viewport。

4.8.二、設置viewport的方法

利用meta標籤對viewport進行控制，如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

參數解釋：

示例：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>viewport</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <p>
            viewport也稱視口，PC上是指瀏覽器窗口的可視區域。先了解兩個概念： 可見視口（visual viewport）：瀏覽器窗口的可視區域 佈局視口（layout viewport）：CSS在應用時所設置的佈局最大寬度。佈局視口能夠大於可見視口。
        </p>
    </body>
</html>
複製代碼

效果：

4.8.三、小節

首先若是不設置meta viewport標籤，那麼移動設備上瀏覽器默認的寬度（佈局視口）值爲800px，980px，1024px等這些，總之是大於屏幕寬度（可見視口）的。這裏的寬度所用的單位px都是指css中的px，它跟表明實際屏幕物理像素的px不是一回事。

每一個移動設備瀏覽器中都有一個理想的寬度（ideal viewport），這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關係，在css中，這個寬度就至關於100%的所表明的那個寬度。

通常在head中加上以下的meta便可：

<meta name="viewport" content="width=device-width, initial-scale=1" />

5、REM實現響應式佈局

rem是CSS3新引進來的一個度量單位，相對長度單位。相對於根元素(即html元素)font-size計算值的倍數，如：

height:2rem;，則高度的大小爲32px（字體默認爲16px，chrome最小爲12px），若是根元素的字體爲15px，則結果爲30px。

頁面中的尺寸都以html元素的font-size爲相對單位，爲默認設置爲20px，若是須要一個200px的大小則使用10rem，而後當屏幕大小變化時經過javascript或media queries修改字體大小。

5.一、使用javascript設置相對尺寸

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>rem</title>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                height: 100%;
                width: 100%;
                font-family: 'Microsoft YaHei';
                font-size: 20px;
                overflow: hidden;
                outline: 0;
            }
            
            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                -webkit-user-select: none;
                /*取消用戶選擇*/
                width: 100%;
            }
            
            header,
            footer {
                width: 100%;
                line-height: 1.5rem;
                font-size: 1rem;
                color: #000;
                border: 1px solid #ccc;
                text-align: center;
                background-color: #ccc;
            }
            
            .bd {
                margin-top: 1rem;
                margin-bottom: .5rem;
                margin-right: -.5rem;
                font-size: 0;
            }
            
            .bd:after {
                clear: both;
            }
            
            .box {
                width: 5rem;
                height: 5rem;
                display: inline-block;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }
            
            .blue-box {
                background-color: #06c;
            }
            
            .org-box {
                background-color: #1fc195;
            }
        </style>

    </head>

    <body>
        <header>我是頭部</header>
        <div class="bd">
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
        </div>

        <footer>我是頁腳</footer>
        <script>
            //定義一個方法並執行
            (function(doc, win) {
                //得到文檔的根節點html
                var docEl = doc.documentElement;
                //若是window中存在orientationchange對象，則取orientationchange,不然取resize
                //爲了事件綁定
                resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
                //定義一個方法，從新計算font-size大小
                var recalc = function() {
                    //頁面的寬度
                    var clientWidth = docEl.clientWidth;
                    //若是沒有寬度則退出
                    if(!clientWidth) return;
                    //從新計算font-size大小，假定320的寬度時字體大小爲20;，當頁面變化時從新設置字體大小
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };
                //若是瀏覽器不支持添加事件監聽則結束
                if(!doc.addEventListener) return;
                //添加事件監聽，指定事件處理函數的時期或階段(boolean)true表示在捕獲事件執行，false表示冒泡時執行
                win.addEventListener(resizeEvt, recalc, false);
                //當Dom樹加載完成時執行計算，DOMContentLoaded事件要在window.onload以前執行
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        </script>
    </body>

</html>
複製代碼

 

運行效果：

5.二、使用媒介查詢設置字體尺寸

示例代碼：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rem and media queries</title>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                height: 100%;
                width: 100%;
                font-family: 'Microsoft YaHei';
                font-size: 20px;
                overflow: hidden;
                outline: 0;
            }
            
            .box {
                width: 5rem;
                height: 5rem;
                display: inline-block;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }
            
            .blue-box {
                background-color: #06c;
            }
            
            .org-box {
                background-color: #1fc195;
            }
            
            @media only screen and (max-width: 300px) {
                html {
                    font-size: 10px;
                }
            }
            @media only screen and (min-width: 300px) and (max-width: 640px) {
                html {
                    font-size: 20px;
                }
            }
            @media only screen and (min-width: 640px) and (max-width: 960px) {
                html {
                    font-size: 30px;
                }
            }
            @media only screen and (min-width: 960px){
                html {
                    font-size: 40px;
                }
            }
        </style>
    </head>
    <body>
        <div class="bd">
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
        </div>
    </body>
</html>
複製代碼

 

運行結果：

 

6、示例下載

github:https://github.com/zhangguo5/CSS3_4.git

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程