04-前端技術_盒子模型與頁面布局

三，盒子模型與頁面布局

1，網頁布局介紹

1.1 固定布局

1.2 流式布局（Liquid Layout）

1.3 栅格化布局

1.4 自适應布局（Adaptive Layout）

1.5 響應式布局

1.6 彈性布局（rem/em布局）

1.7 伸縮布局（Flex box）

1.8 自适應布局和響應式布局對比：

1.9 網頁布局——DIV+CSS布局

1.10 網頁布局——HTML5+CSS3布局

1.11 網頁布局——響應式布局

2，DIV+CSS網頁布局

2.1 模拟效果

2.2 編碼

3，HTML5語義化頁面布局

4，響應式布局介紹

三，盒子模型與頁面布局

1，網頁布局介紹

參考@sugar_coffee ~~【網頁布局的幾種方式】

1.1 固定布局

為網頁設定一個固定的寬度，通常以px做為長度機關，常見于PC端網頁。

這種布局具有很強的穩定性與可控性，也沒有相容性問題，但不能根據使用者的螢幕尺寸做出不同的表現。即如果使用者的螢幕分辨率小于這個寬度就會出現滾動條，如果大于這個寬度則會留下空白。

1.2 流式布局（Liquid Layout）

為網頁設定一個相對的寬度，頁面元素的大小按照螢幕分辨率進行适配調整，但整體布局不變，通常以百分比做為長度機關（通常搭配 min-*、max-* 屬性控制尺寸流動範圍以免過大或者過小導緻元素無法正常顯示），高度大都是用px來固定住。流式布局的代表作栅格系統（網格系統）。

例如設定網頁主體的寬度為80%，min-width為960px。圖檔也作類似處理（width:100%, max-width一般設定為圖檔本身的尺寸，防止被拉伸而失真）。

缺點：因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，是以在大螢幕下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣，顯示非常不協調

1.3 栅格化布局

将網頁寬度人為的劃分成均等的長度，然後排版布局時則以這些均等的長度做為度量機關，通常利用百分比做為長度機關來劃分成均等的長度。

比如像 bootstrap，foundation 這些架構采用的就是栅格系統，隻要給頁面元素添加其栅格系統指定的類名，就能達到想要的響應式布局效果。

bootstrap 的栅格系統是通過一系列的行和列的組合來建立頁面布局，它的栅格系統最大分為12份

04-前端技術_盒子模型與頁面布局

1.4 自适應布局（Adaptive Layout）

自适應布局的特點是分别為不同的螢幕分辨率定義布局，即為不同類别的裝置建立不同的靜态布局，每個靜态布局對應一個螢幕分辨率範圍。改變螢幕分辨率可以切換調用相應的布局（頁面元素位置發生改變而大小不變），但在每個靜态布局中，頁面元素不随視窗大小的調整發生變化。可以把自适應布局看作是靜态布局的一個系列。

在這種布局方式下，當視口大小低于設定的最小視口時，界面會出現顯示不全，溢出，并出現滾動條。而且當需求改變時，可能會改動多套代碼。

使用自适應布局時，首先在網頁代碼的頭部，加入一樣 viewport 标簽：

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

設定網頁寬度預設等于螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占螢幕面積的100%。然後 CSS 代碼不能使用絕對大小，即不能指定像素 px 寬度，而隻能使用相對大小 em 或者 %百分比、rem等。

1.5 響應式布局

響應式布局的目标是確定一個頁面在所有終端上（各種尺寸的PC、手機、ipad等）都能顯示出令人滿意的效果。通過檢測裝置資訊，決定網頁布局方式，即使用者如果采用不同的裝置通路同一個網頁，有可能會看到不一樣的展示效果，一般情況下是檢測裝置螢幕的寬度來實作。可以把響應式布局看作是流式布局和自适應布局設計理念的融合。

應用響應式布局，首先要使用視圖的 meta 标簽來進行重置：

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

然後使用 @media 媒體查詢給不同尺寸和媒體的裝置切換不同的樣式。同自适應布局一樣，在書寫 CSS 樣式時，元素寬度不能使用絕對寬度，而要使用相對大小。

Media Queries 是響應式設計的核心，它根據條件告訴浏覽器如何為指定視圖寬度渲染頁面。在優秀的響應範圍設計下可以給适配範圍内的裝置最好的體驗，在同一個裝置下實際還是固定的布局。但媒體查詢是有限的，也就是可以枚舉出來的，隻能适應主流的寬高。要比對足夠多的螢幕大小，工作量不小，而且頁面中會出現隐藏元素的操作，這樣代碼就比較備援，加載時間加長，此外設計也需要多個版本。

1.6 彈性布局（rem/em布局）

彈性布局跟流布局很像，網頁寬度不固定，使用 em 或 rem 機關進行相對布局，避免了使用像素 px 布局在高分辨率下幾乎無法辨識的缺點，相對%百分比更加靈活，同時可以支援浏覽器的字型大小調整和縮放等的正常顯示。但彈性布局也有局限性，如果不對這種布局設定一個最小寬度，當使用者縮小視窗到足夠小時會造成布局嚴重錯位。

1.7 伸縮布局（Flex box）

使用 css3 Flex 系列屬性進行相對布局，用來為盒模型提供最大的靈活性。對于富媒體和複雜排版的支援非常大，但是存在相容性問題。任何一個容器都可以指定為 flex 布局，行内元素也可以使用。

注意：設為 flex 布局後，子元素的 float、clear、vertical-align 屬性将失效。

1.8 自适應布局和響應式布局對比：

不同點：

1.自适應需要開發多套界面；響應式隻需開發一套界面。

2.自适應對頁面的螢幕适配實在一定的範圍，比如：pc 端 > 1024px; 平闆 768 ~ 1024px; 手機端 < 768px; 響應式是一套頁面同時相容在 pc 端、平闆和手機端的各個不同視口，而不是為每個終端做一個特定的版本，是以需要考慮的狀态非常多。

相同點：　

都是通過檢測視口分辨率，使頁面适應不同分辨率的視口。

三種傳統PC端⽹⻚布局⽅式：

傳統的DIV+CSS布局

HTML5+CSS3布局

響應式布局

1.9 網頁布局——DIV+CSS布局

最常用！

此種布局是⽹⻚的HTML通過DIV标簽+CSS樣式表代碼開發制作的(HTML)⽹⻚的統稱。

DIV+CSS布局好處：便于維護，有利的SEO（⾕歌将⽹⻚打開速度作為排名因素及SEO因素），

⽹⻚打開速度還原，符合web标準等。

1.10 網頁布局——HTML5+CSS3布局

HTML5 可以讓很多更語義化的結構化代碼标簽代替⼤量⽆意義的 div 标簽

1. 這種語義化的特性提升了⽹⻚的品質和語義

2. 減少了以前⽤于CSS 調⽤的class 和 id 屬性

對搜尋引擎的友好新的結構标簽帶來的是⽹⻚布局的改變及提升對搜尋引擎的友好。（相比于div标簽，HTML5語義化标簽提供了更加豐富準确的資訊，進而可以幫助搜尋引擎更好的搜尋頁面元素）

HTML5的新标簽元素有：

<header> 定義⻚⾯或區段的頭部；

<footer> 定義⻚⾯或區段的尾部；

<nav> 定義⻚⾯或區段的導航區域；

<section> ⻚⾯的邏輯區域或内容組合；

<article> 定義正⽂或⼀篇完整的内容；

<aside> 定義補充或相關内容；

注意：使⽤HTML5 語義化标簽的布局模式在IE9以下浏覽器不相容，可使⽤下⾯的代碼解決

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
type="text/javascript"></script>
<![endif]-->

1.11 網頁布局——響應式布局

1）第⼀種：直接在⻚頭中使⽤CSS樣式修飾。

2）第⼆種：導⼊不同的css樣式⽂件

2，DIV+CSS網頁布局

2.1 模拟效果

簡單劃分頁面

2.2 編碼

1）初始代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV+CSS傳統網頁布局</title>
</head>
<body>
    

    <!-- 網頁頭部開始 -->
    <div id="header"></div>
    <!-- 網頁頭部結束 -->

    <!-- 導航開始 -->
    <div id="nav"></div>
    <!-- 導航結束 -->

    <!-- 頁面主體開始 -->
    <div id="container"></div>
    <!-- 頁面主體結束 -->
    

    <!-- 頁面尾部開始 -->
    <div id="footer"></div>
    <!-- 頁面主體結束 -->
</body>
</html>

2）簡單樣式編寫

運作後發現邊緣存在空白，這是由于body内部存在内補白，

3）通過公共樣式消除補白

4）進一步完善頭部

5）完善主體body樣式

6）完善body内容

7）豐富單個清單的内容

8）最終代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV+CSS傳統網頁布局</title>
    <style>
        /*公共的css樣式*/
        *{margin:0px;padding:0px}
        a{text-decoration: none;}
        ul{list-style:none;}

        #header{
            position:fixed;/* 固定位置*/
            top: 0px;
            /* height: 80px; header-nav已經設定了高度 這裡可以去掉了 */
            width: 100%;
            border-bottom:1px solid #46474a;/* 邊框*/
        }
        #header .header-nav{
            height:80px;
            width:1200px;
            background-color: goldenrod;
            margin:0px auto;/* 距離上界0px 然後自動就可以實作居中了*/
        }
        #nav{
            height: 60px;
            margin-top:81px;/* 避免與header重合*/
            background-color: #46474a;
        }
        #container{
            /* height: 800px;main中已經指定了高度 這裡可以省略 */
            width: 100%;
        }
        #container .content{
            width: 1200px;
            margin: 0px auto;
            margin-top: 50px;
        }
        #container .content .main{
            width: 950px;
            /* height: 800px; 由于清單中指定了每個block的高度 這裡也可以忽略*/
            margin: 0px auto;
            /* background-color: #ededed; */
        }
        #container .content .main ul li{
            display: block;
            height: 220px;
            width: 100%;
            margin-bottom: 20px;
            border: 1px dashed #f60;
        }
        .main ul li .info{
            height:100%;
            width:680px;
            float:right;
            background-color:snow;
            border-bottom:1px solid #aaa;
        }

        .main ul li .info .info-right{
            width:80px;
            height:80px;
            border:1px dashed orange;
            float: right;
            margin-top:70px;
        }

        .main ul li .info .info-left{
            width:300px;
            height:120px;
            border:1px dashed orange;
            margin-top:50px;
        }
        
        .main ul li .ids{
            height:50px;
            width:50px;
            margin-top:85px;/* 固定定位 保持居中*/
            margin-bottom:85px;
            background-color:orange;
            display:inline-block;/* 保證在同一行*/
        }

        .main ul li .pic{
            height:200px;
            width:160px;
            margin:10px 25px;
            border:1px dashed green;
            display: inline-block;/* 保證在同一行*/
        }
        #footer{
            height: 300px;
            background-color: #46474a;
        }
    </style>
</head>
<body>
    

    <!-- 網頁頭部開始 -->
    <div id="header">
        <div class="header-nav">
            <h2>使用div+CSS布局實作《貓眼電影》榜單排行界面的布局效果</h2>
            網址：https://maoyan.com/board
        </div>
    </div>
    <!-- 網頁頭部結束 -->

    <!-- 導航開始 -->
    <div id="nav"></div>
    <!-- 導航結束 -->

    <!-- 頁面主體開始 -->
    <div id="container">
        <div class="content">
            <div class="main">
                <ul>
                    <li>
                        <div class="info">
                            <div class="info-right"></div>
                            <div class="info-left"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 頁面主體結束 -->
    

    <!-- 頁面尾部開始 -->
    <div id="footer"></div>
    <!-- 頁面主體結束 -->
</body>
</html>

3，HTML5語義化頁面布局

與div标簽類似，隻不過将div标簽轉換為具有特定意義的标簽

1）更換标簽

2）相容問題

為了解決相容問題，需要在代碼主體部分加上

但有時國外網站通路時間可能太長，也可以将下載下傳好的html5.js檔案放在html文檔所在檔案夾中

3）完全使用語義化标簽的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout TEST</title>
<!--[if lt IE 9]>
<script src="./html5.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
    body { /*整個頁面的屬性設定*/
    background-color: #CCCCCC; /*背景色*/
    font-family: Geneva, sans-serif; /*可用字型*/
    margin: 10px auto; /*頁邊空白*/
    max-width: 800px;
    border: solid; /*邊緣立體*/
    border-color: #FFFFFF; /*邊緣顔色*/
}
 
h2 { /*設定整個body内的h2的共同屬性*/
    text-align: center; /*文本居中*/
}
 
header { /*整個body頁面的header适用*/
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
}
 
article { /*整個body頁面的article适用*/
    background-color: #eee;
}
 
p { /*整個body頁面的p适用*/
    color: #F36;
}
 
nav,article,aside { /*共同屬性*/
    margin: 10px;
    padding: 10px;
    display: block;
}
 
header#page_header nav { /*header#page_header nav的屬性*/
    list-style: none;
    margin: 0;
    padding: 0;
}
 
header#page_header nav ul li { /*header#page_header nav ul li屬性*/
    padding: 0;
    margin: 0 20px 0 0;
    display: inline;
}
 
section#posts { /*#posts 的section屬性*/
    display: block;
    float: left;
    width: 70%;
    height: auto;
    background-color: #F69;
}
 
section#posts article footer { /*section#posts article footer屬性*/
    background-color: #039;
    clear: both;
    height: 50px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
 
section#posts aside { /*section#posts aside屬性*/
    background-color: #069;
    display: block;
    float: right;
    width: 35%;
    margin-left: 5%;
    font-size: 20px;
    line-height: 40px;
}
 
section#sidebar { /*section#sidebar屬性*/
    background-color: #eee;
    display: block;
    float: right;
    width: 25%;
    height: auto;
    background-color: #699;
    margin-right: 15px;
}
 
footer#page_footer { /*footer#page_footer屬性*/
    display: block;
    clear: both;
    width: 100%;
    margin-top: 15px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    background-color: #06C;
}
</style>
</head>
<body>
    <h2>body bootstrap</h2>
    <header id="page_header">
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </nav>
    </header>
    <section id="posts">
        <h2>Section</h2>
        <article class="post">
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose.
                        </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
        <article class="post">
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose. </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
    </section>
    <section id="sidebar">
        <h2>Section</h2>
        <header>
            <h2>Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a href="2012/04">April 2012</a></li>
                <li><a href="2012/03">March 2012</a></li>
                <li><a href="2012/02">February 2012</a></li>
                <li><a href="2012/01">January 2012</a></li>
            </ul>
        </nav>
    </section>
    <footer id="page_footer">
        <h2>Footer</h2>
    </footer>
</body>
</html>

4，響應式布局介紹

1）簡單的響應式布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.dd{
            border:1px solid red;
            width:1200px;
            margin:0px auto;
        }
        ul{list-style:none;}
        ul li{
            width:180px;
            height:300px;
            margin:5px;
            float:left;
            border:1px solid #ddd;
        }
        @media all and (min-width:501px) and (max-width:1000px) {
            div.dd{width:980px}
            ul li{border-color:green;}
        }

        @media all and (min-width:0px) and (max-width:500px) {
            div.dd{width:450px}
            ul li{border-color:red;}
        }
        
    </style>
</head>
<body>
    <h1>響應式布局</h1>
    <div class="dd">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div style="clear: both; width: 100%; height:1px;"></div>
    </div>
</body>
</html>

2）按百分比響應

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*百分比與min-width，min-height,max-width,max-height結合，模拟響應式及流式布局，
    容器會随浏覽器大小改變而改變，min-width限制突變最小寬度，max-width限制最大寬度
    進而保證其不失真*/
    div{
      width:100%;
      height:auto;
      overflow:hidden;
      background:pink;
    }
    div>img{
      width:15%;
      min-width:80px;
      max-width:150px;
      margin-left:5px;
    }
  </style>
</head>
<body>
  <div>
    <img src="68.jpg" alt="">
    <img src="69.jpg" alt="">
    <img src="70.jpg" alt="">
    <img src="71.jpg" alt="">
    <img src="72.jpg" alt="">
    <img src="68.jpg" alt="">
  </div>
</body>
</html>

04-前端技術_盒子模型與頁面布局

三，盒子模型與頁面布局

1，網頁布局介紹

1.1 固定布局

1.2 流式布局（Liquid Layout）

1.3 栅格化布局

1.4 自适應布局（Adaptive Layout）

1.5 響應式布局

1.6 彈性布局（rem/em布局）

1.7 伸縮布局（Flex box）

1.8 自适應布局和響應式布局對比：

1.9 網頁布局——DIV+CSS布局

1.10 網頁布局——HTML5+CSS3布局

1.11 網頁布局——響應式布局

2，DIV+CSS網頁布局

2.1 模拟效果

2.2 編碼

3，HTML5語義化頁面布局

4，響應式布局介紹

繼續閱讀

Css簡單動畫實作蔡徐坤跳舞

限制textarea最大錄入長度

JavaScript 擷取目前的日期和時間

sitemesh前端架構使用裝飾模式将jsp頁面的結構和内容分離

使用CSS3寫圓環加載動畫

js var let差別1,作用域不同

浏覽器相關文章

04-前端技術_javaScript基礎

04-前端技術_簡潔高效的jQuery

extract-text-webpack-plugin報錯

一種覆寫掉window.alert()函數的實作

Ajax跨域和JSONP

web前端基礎知識的歸檔整理（一）——正規表達式、HTML、CSS正規表達式CSS

使用jquery ui和validate實作的彈出式登入

Echarts滑鼠懸浮樣式

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關