當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

CSS3与页面布局学习总结——多种页面布局

發布時間：2024/6/21 综合教程 35 生活家

生活随笔收集整理的這篇文章主要介紹了 CSS3与页面布局学习总结——多种页面布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、負邊距與浮動布局

1.1、負邊距

所謂負邊距就是margin取負值的情況，如margin：-40px；margin-left：-100%。當一個元素與另一個元素margin取負值時將拉近距離。常見用法如下：

1.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>

div2的margin-left:-29%時的運行結果：

div2的margin-left:-30%（為自己自身寬度）時的運行結果：

div2的margin-left:-100%時的運行結果：

1.1.2、去除列表右邊框

開發中常需要在頁面中展示一些列表，如商品展示列表等，如果我們要實現如下布局：

示例代碼：

<!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>

View Code

運行結果：

但是上面的效果中右邊多出了20px的距離，底下多出20px空白，解決方法如下：將包裹在外層最近的div的右邊距賦值為-20px（margin-right：20px）,同時最外層div的寬度也要減去多出的那20px（從800px變為780px），下面多出的20px則給div的高度設小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.3、負邊距+定位，實現水平垂直居中

具體參考前面的隨筆：多種垂直居中的辦法

1.1.4、去除列表最后一個li元素的border-bottom

方法一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>負邊距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #news {
                width: 200px;
                border: 2px solid lightblue;
                margin: 20px 0 0 20px;
            }
            
            #news li{
                height: 26px;
                line-height: 26px;
                border-bottom: 1px dashed   lightblue;
            }
            .lastLi{
                margin-bottom:-1px ;
            }
        </style>
    </head>
    <body>
        <div id="news">
            <ul>
                <li>Item A</li>
                <li>Item B</li>
                <li>Item C</li>
                <li>Item D</li>
                <li class="lastLi">Item E</li>
            </ul>
        </div>
    </body>
</html>

方法二：

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

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

1.2、雙飛翼布局

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

1、三列布局，中間寬度自適應，兩邊定寬；
2、中間欄要在瀏覽器中優先展示渲染；
3、允許任意列的高度最高；
4、要求只用一個額外的DIV標簽；
5、要求用最簡單的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;
            }
            html,body{
                height: 100%;
                font-size: 30px;
                color: white;
            }
            #container{
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            #header,#footer{
                height: 12.5%;
                background: lawngreen;
            }
            #main{
                height: 75%;
            }
            #center,#left,#right{
                height: 100%;
                float: left;
            }
            #center{
                width: 100%;
                background: lightblue;
            }
            #left{
                background: palegreen;
                width: 20%;
                margin-left: -100%;
            }
            #right{
                background: pink;
                width: 20%;
                margin-left: -20%;
            }
            #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>

View Code

運行結果：

示例中增加一個main-inner的目的是因為當left上移時與center重疊了，left覆蓋了center，通過main-inner的padding將left占用的位置空出。

1.3、多欄布局

1.3.1、柵格系統

欄柵格系統就是利用浮動實現的多欄布局，在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>

View Code

運行結果：

同樣的原理可以輕易擴展到8列，10列，16列的柵格系統。

1.3.2、多列布局

柵格系統并沒有真正實現分欄效果（如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">
            #content{
                text-indent: 2em;
                column-count: 3;
                column-gap: 30px;
                column-rule: 2px solid lightgreen;
                line-height: 26px;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div id="content">
            CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
        </div>
    </body>
</html>

運行結果：

二、彈性布局（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>

View Code

結果：

上面的辦法有明顯的不足就是可擴展性太差，因為如果再添加一項就會有一個菜單項會換行，解決方法是：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>

View Code

運行結果：

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>

View Code

運行結果：

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>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            html,body{
                height: 100%;
            }
            #mnue{
                width: 90%;
                height: 300px;
                margin: 0 auto;
                display: flex;/*當前塊為彈性盒*/
                padding-top: 20px;
                /*flex-flow: row-reverse;*//*反轉*/
                flex-flow: column;
            }
            #mnue li{
                /*flex: auto;*//*彈性盒中的單項*/        
                text-align: center;
                border: 1px dashed lightblue;
                margin-bottom: 5px;
            }
            #mnue li a{
                text-decoration: none;
                display: block;
                height: 26px;
                line-height: 26px;
                border: 1px solid lawngreen;
                margin-right: 2px;
                text-align: center;
            }
            .a{ /*按比例*/
                flex: 1;
            }
            .b{
                flex: 2;
            }
            .c{
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="mnue">
            <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>
            <!--<li><a href="#" class="item">執有憑證</a></li>
            <li><a href="#" class="item">社會經驗</a></li>
            <li><a href="#" class="item">工作年齡</a></li>-->
        </ul>
    </body>
</html>

View Code

三、流式布局（Fluid）

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

固定布局效果：

流式布局效果：

利用前面的知識點可以實現這兩種布局，這里就不去實現了

三、瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。

3.1、常見瀑布流布局網站

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

3.2、特點

優點

1、有效的降低了界面復雜度，節省了空間：我們不再需要臃腫復雜的頁碼導航鏈接或按鈕了。

2、對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。

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

缺點

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

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

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

5. SEO：

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

6. 關于頁面數量的印象：
其實站在用戶的角度來看，這一點并非負面;不過，如果對于你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用。

3.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.1、下載并引用masonry

可以去官網或github下載“masonry.pkgd.min.js”，將下載到的插件添加到項目中，并在頁面中添加引用，如下所示：

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

masonry.pkgd.jsun-minified
masonry.pkgd.min.jsminified

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.2、準備內容

在頁面中使用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>

View Code

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

3.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{
                height: 200px;
                background: lightblue;
            }
            .b{
                height: 100px;
                background: lightgreen;
            }
            .c{
                height: 250px;
                background: orangered;
            }
            
            .d{
                height: 400px;
                background: lawngreen;
            }
            .e{
                height: 350px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div class="grid-item a"></div>
            <div class="grid-item b"></div>
            <div class="grid-item c"></div>
            <div class="grid-item a"></div>
            <div class="grid-item d"></div>
            <div class="grid-item e"></div>
            <div class="grid-item c"></div>
            <div class="grid-item a"></div>
            <div class="grid-item d"></div>
            <div class="grid-item a"></div>
            <div class="grid-item e"></div>
            <div class="grid-item c"></div>
            <div class="grid-item a"></div>
            <div class="grid-item d"></div>
            <div class="grid-item e"></div>
            <div class="grid-item c"></div>
            <div class="grid-item b"></div>
            <div class="grid-item a"></div>
            <div class="grid-item d"></div>
            <div class="grid-item a"></div>
            <div class="grid-item e"></div>
            <div class="grid-item c"></div>
            <div class="grid-item a"></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>
        <script type="text/javascript">
            var msnry=new Masonry('#grid',{
                itemSelector:'.grid-item',
                columnWidth:200
            });
        </script>
    </body>
</html>

View Code

運行結果：

3.3.4、使用了圖片的瀑布流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流布局</title>
        <style type="text/css">
            #grid{
                width: 800px;
                margin: 0 auto;
            }
            .grid-item{
                float: left;
            }        
        </style>
    </head>
    <body>
        <div id="grid">
            <div class="grid-item">
                <a href="#">
                    <img src="img/1.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/11546445.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/1257.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/1257.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/2.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/1468119761528.jpeg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/3.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/CR.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/lo.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/Cache_-342b6631b5a9c1b1..jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/i2.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/IMG_20160426_095411.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/psb (1).jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/lo.jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/psb (2).jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/psb (17).jpg" width="200"/>
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/QQ.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>

View Code

運行結果：

注意：上面的示例中我們使用了window.onload事件，原因是如果圖片沒有加載完成就執行瀑布流布局會引起堆疊的問題，其實就是初始化是沒有檢測到圖片的高度，window.onload在有許多圖片的環境下會有性能問題，這里給大家介紹另一個組件。

3.4、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.5、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.1、異步加載普通頁面

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.2、異步加載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]

運行結果：

因為沒有使用瀑布流布局所以有點不規整，這里主要演示分頁。

3.53、masonry+imagesloaded+infinitescroll實現圖片瀑布流和延遲加載

示例代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/test.css" rel="stylesheet" />
</head>
<body>
    <h2>爸爸去哪兒四之萌娃-阿拉蕾</h2>
    <div id="items">
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/1.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>

        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/2.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/3.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>

        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/4.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>

        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/5.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/6.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/7.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/8.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>

        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/9.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/10.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/11.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>

        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/12.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/15.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/14.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/16.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/17.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/18.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/19.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/20.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/21.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/22.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/23.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item1">
                <div class="item2"><img src="img/24.png"></div>
                <div class="title">
                    阿拉蕾
                </div>
            </div>
        </div>
    </div>
    <a href="TestHandler.ashx" id="next"></a>

    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="js/masonry/masonry.pkgd.min.js"></script>
    <script src="js/infinite-scroll/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
        $('#items').imagesLoaded()
                       .always(function (instance) {
                           var msnry = new Masonry('#items', {
                               itemSelector: '.item',
                               //columnWidth: 20   //一列的寬度
                           });

                       })
        $('#items').infinitescroll({
            navSelector: "#next",
            nextSelector: "a#next",
            itemSelector: ".item",
            debug: true,
            dataType: 'json',
            maxPage:10,     //如果不設置最大頁數，則會無限加載，無止境
            appendCallback: false,
            path: function (index) {
                return "TestHandler.ashx";
            }
        }, function (data) {
            console.log(data.length);
            for (var i = 0; i < data.length; i++) {
                $("<div class='item'><div class='item1'><div class='item2'><img src='img/" + data[i].Imgpath + "'/></div><div class='title'>" + data[i].Imgdesc + "</div></div></div>").appendTo("#items");
                $('#items').imagesLoaded()
                    .always(function (instance) {
                        var msnry = new Masonry('#items', {
                            itemSelector: '.item',
                            //columnWidth: 20
                        });

                    })
            }
        });
    </script>
</body>
</html>

View Code

上面的無限加載的數據是通過ajax從后臺數據庫加載過來的，首頁圖片加載完后，滾動鼠標，繼續無限加載（設置了最大頁數的話，加載到最大頁數就不會再就加載了）

運行結果：

四、響應式布局（Responsive）

4.1、媒介類型

@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.2、媒介查詢的應用位置（Media Queries）

a)、內部樣式

@media screen and (800px){ … }

b)、導入樣式

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

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

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

4.3、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- 100px) and (max- 640px) {
                #div1 {
                    background: lightgreen;
                    height: 200px;
                }
            }
        </style>
    </head>

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

</html>

全屏時的運行效果：

縮小瀏覽器的效果：

4.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- 320px) and (max- 640px) {
            }

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

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

4.5、響應式柵格系統（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-480px) {
                .row {
                    width: 100%;
                }
                [class*=col] {
                    float: none;
                    margin-top: 5px;
                    width: 100%;
                }
            }
            /*480-960平板，手機橫屏*/
            @media only screen and (min- 480px) and (max- 960px) {
                .row {
                    width: 480px;
                }
            }
            /*960PC屏幕*/
            @media only screen and (min-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.6、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.7、移動優先（Mobile First）

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

這是一種傳統的做法，開發項目時優先PC端，然后再通過一些hack的方法讓項目正常運行在移動端，所謂的降級可以簡單認為就是將一些信息隱藏，因為移動端的可視范圍有限，必須給用戶提供簡潔核心的內容。

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

a)、對于產品設計師，一個新產品先設計移動版，然后才是桌面版。

b)、對于工程師，一個新產品，先開發移動版，然后才是桌面版本。

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

練習1：

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

實現代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>響應式布局</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                font-size: 20px/20px "microsoft yahei";
            }
            #container{
                width: 98%;
                height: 100%;
                margin: 0 auto;
            }
            .top{
                height: 5%;
                position: relative;
                margin-bottom: 20px;
            }
            .top .left{
                position: absolute;
                left: 0;
                height: 100%;
                background: #333;
                width: 70%;
            }
            .top .right{
                position: absolute;
                right: 0;
                height: 100%;
                background: #333;
                width: 25%;
            }
            .main div{
                min-height: 150px;
                margin-bottom: 20px;
            }
            .main .header .first{
                background: green;
                text-align: center;
                line-height: 150px;
                /*margin-bottom: 20px;*/
            }
            .content{
                position: relative;
                line-height: 150px;
                text-align: center;
                /*margin-bottom: 20px;*/
            }
            .content .second{
                float: left;
                background: gray;
                width: 25%;
            }
            .content .third{
                float: left;
                width:25%;
                background: gainsboro;
            }
            .content .fourth{
                float: left;
                width:25%;
                background: grey;
            }
            .content .footer{
                background: lawngreen;
                float: left;
                width:25%;
            }
            @media only screen and (max- 500px) {
                .content .second{
                    background: gray;
                    width: 100%;
                }
                .content .third{
                    background: gainsboro;
                    width: 100%;
                }
                .content .fourth{
                    background: grey;
                    width: 100%;
                }
                .content .footer{
                    background: lawngreen;
                    width: 100%;
                }
            }
            @media only screen and (min- 500px) and (max- 640px) {
                .content .second{
                    background: gray;
                    width: 50%;
                    float: left;
                }
                .content .third{
                    background: gainsboro;
                    width: 50%;
                    float: left;
                }
                .content .fourth{
                    background: grey;
                    width: 50%;
                    float: left;
                }
                .content .footer{
                    background: lawngreen;
                    width: 50%;
                    float: left;
                }
            }
            @media only screen and (min- 640px) and (max- 960px) {
                .content .second{
                    background: gray;
                    width: 33.3%;
                    float: left;
                }
                .content .third{
                    background: gainsboro;
                    width: 33.3%;
                    float: left;
                }
                .content .fourth{
                    background: grey;
                    width: 33.3%;
                    float: left;
                }
                .content .footer{
                    background: lawngreen;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="top">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="main">
                <div class="header">
                    <div class="first">1</div>
                </div>
                <div class="content">
                    <div class="second">2</div>
                    <div class="third">3</div>
                    <div class="fourth">4</div>
                    <div class="footer">5</div>
                </div>
            </div>
            
        </div>
    </body>
</html>

4.8、視區（viewport）

4.8.1、需要設置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.2、設置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.3、小節

首先如果不設置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" />

五、REM實現響應式布局

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

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

頁面中的尺寸都以html元素的font-size為相對單位，為默認設置為20px，如果需要一個200px的大小則使用10rem，然后當屏幕大小變化時通過javascript或media queries修改字體大小。

5.1、使用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>

View Code

運行效果：

5.2、使用媒介查詢設置字體尺寸

示例代碼：

<!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- 300px) {
                html {
                    font-size: 10px;
                }
            }
            @media only screen and (min- 300px) and (max- 640px) {
                html {
                    font-size: 20px;
                }
            }
            @media only screen and (min- 640px) and (max- 960px) {
                html {
                    font-size: 30px;
                }
            }
            @media only screen and (min- 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>

運行結果：

總結

以上是生活随笔為你收集整理的CSS3与页面布局学习总结——多种页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：月入2万的10个小生意（9个不需要门面的
下一篇： tensorflow学习笔记——使用Te

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

综合教程

CSS3与页面布局学习总结——多种页面布局

一、負邊距與浮動布局

1.1、負邊距

1.1.1、向上移動

1.1.2、去除列表右邊框

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

1.1.4、去除列表最后一個li元素的border-bottom

1.2、雙飛翼布局

1.3、多欄布局

1.3.1、柵格系統

1.3.2、多列布局

二、彈性布局（Flexbox）

三、流式布局（Fluid）

三、瀑布流布局

3.1、常見瀑布流布局網站

3.2、特點

3.3、masonry實現瀑布流布局

3.3.1、下載并引用masonry

3.3.2、準備內容

3.3.3、初始化插件

3.3.4、使用了圖片的瀑布流

3.4、imagesLoaded 圖片加載

3.5、Infinite Scroll滾動分頁

3.5.1、異步加載普通頁面

3.5.2、異步加載json并解析

3.53、masonry+imagesloaded+infinitescroll實現圖片瀑布流和延遲加載

四、響應式布局（Responsive）

4.1、媒介類型

4.2、媒介查詢的應用位置（Media Queries）

4.3、Media Queries Hello World

4.4、媒介查詢語法

4.5、響應式柵格系統（Responsive）

4.6、respond.js

4.7、移動優先（Mobile First）

4.8、視區（viewport）

4.8.1、需要設置viewport的原因

4.8.2、設置viewport的方法

4.8.3、小節

五、REM實現響應式布局

5.1、使用javascript設置相對尺寸

5.2、使用媒介查詢設置字體尺寸

總結