CSS頁面布局和加載流程介紹

這篇文章主要介紹“CSS頁面布局和加載流程介紹”，在日常操作中，相信很多人在CSS頁面布局和加載流程介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS頁面布局和加載流程介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

介紹

在我們開始正式的介紹頁面流程前，我們需要簡單了解幾種不同類型的html元素，以及它們的缺省顯示方式。這里我們主要重點介紹兩個類型的元素：

block

inline

如果大家關心html5的話，你應該知道在HTML5中也包含了幾個新的元素，例如，section，article等等，但是仍舊遵循這里我們介紹的顯示類型。

inline類型的元素包括： img，span，a等，用來定義文字或者數據，通常顯示方式是“同一行顯示”。更具體的說就是，如果很多的inline類型的元素在同一行的時候，它們會顯示在同一行，直到寬度不夠顯示了，再轉到下一行。例如，如下代碼：

<a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>

查看在線調試

相反block類型的元素，例如，div，p或者HTML5中新的元素section，article和article的顯示方式和inline類型都不一 樣。它們都是典型的結構化的元素，可以包含inline類型的元素。瀏覽器處理block類型的元素，會在元素前后添加換行，這樣你看到它們都是獨立成行 顯示的。當然，如果你修改它的缺省顯示類型為inline，它就會按照inline元素的顯示方式顯示。

樣式CSS

通常我們都是使用CSS來控制元素的顯示：

sometag{      display:inline; /*當然你也可以設置為block，none等等支持的屬性*/ }

雖然上面的屬性中我們指定了顯示類型，這同時也意味這其它相關的樣式，例如，你可以指定顯示類型為block的元素的寬和高，但是 inline類型的無法指定。padding（內邊距）和margin（外邊距）可以被應用到inline顯示的元素，但是不會影響包含的元素。看看如下 例子：

查看在線調試

另外一些顯示方式 

除了inline和block類型的顯示，這里還有一個inline-block的顯示方式。如下圖：

它顯示的方式類似于inline，但是它相關的屬性，例如，寬度，高度還有padding/margin等等遵循于block顯示類型的規則。inline-block可以幫助我們實現類似float元素的效果，但是也有自己的問題。

其它的屬性例如，list-item，顧名思義，顯示的方式和列表元素類似。

<ul>      <li>元素1</li>      <li>元素2</li>  </ul>

***還有一個元素需要提一下就是"none"，這個屬性可以讓元素不顯示，并且不占聚任何的document空間。 注意和“hidden”這個屬性區別一下。

正常Document的加載流程

那么什么是瀏覽器正常的加載流程呢？基本上瀏覽器按照它解析的順序來顯示內容，頂端的先加載，然后加載下面的內容。當大家開始做web設計的時候，可能都不 關心正常的document加載過程，而只醉心于各種不同的絢麗花哨的技巧，如果你能夠正確的理解document加載，對于更好的幫助你理解web設計 絕對有利無弊。

做一個練習吧！

在這里我們將做一個簡單的聯系幫助你鞏固你的學習，這里我們使用HTML5 Shiv來幫助我們支持HTML5標簽，使用placekitten這個圖片占位應用來生成圖片。

HTML框架代碼如下：

<div class="container">     <h2>An Intro to Normal Document Flow.</h2>     <figure class="photoGallery">         <img src="http://placekitten.com/g/100/200" alt="" />         <img src="http://placekitten.com/g/160/200" alt="" />         <img src="http://placekitten.com/g/220/200" alt="" />         <img src="http://placekitten.com/g/180/200" alt="" />         <img src="http://placekitten.com/g/240/200" alt="" />         <img src="http://placekitten.com/g/130/200" alt="" />     </figure>     <article>         <h3> 歡迎訪問我的喵星人圖片畫廊</h3>         <p>如果你也喜歡貓咪的話，來一起看看這些可愛的小生命吧！</p>     </article> </div> <footer>   <section>歡迎訪問<a href="http://gbtags.com">gbtags.com</a></section> </footer>

CSS布局代碼：

body{   font-size:12px;   font-family: Arial; } .container {     width: 85%;     margin:0 auto;     background: #f2f2f2; } figure img {     padding-left: 10px; } h1 {     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;     color: #707070;     padding: 10px;     font-size:14px; } article {     background: #505050;     color: #f2f2f2;     padding: 10px; } footer{   width: 85%;   margin:0 auto; } section{   padding: 20px 0; }

查看在線調試

到此，關于“CSS頁面布局和加載流程介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！