使用流流實際上就是瀏覽器在頁面上擺放html元素所用的方法。瀏覽器從html檔案的最上面開始，從上到下沿著元素流逐個顯示所遇到的各個元素。
先來考慮塊元素，它會在每個塊元素之間加乙個換行。所以首先會顯示文件中的第乙個元素，然後是乙個換行，然後是第二個塊元素，接下來又是乙個換行，如此繼續，從檔案最上面一直到檔案末尾逐個顯示。這就是流。
內聯元素呢？內聯元素在水平方向上會相互挨著，總體上會從左上方流向右下方，也就是從乙個塊元素的開頭讀到結尾。
如果瀏覽器執行任務，併排放置兩個內聯元素，而且這些元素都有外邊距，瀏覽器會在這些元素之間建立足夠的空間，考慮到它們的外邊距。所以，如果左邊的元素外邊距為10畫素，右邊的元素外邊距為20畫素，那麼這兩個元素之間就會有30畫素的空間。
瀏覽器上下放置兩個塊元素時，它會把它們共同的外邊距摺疊在一起。摺疊的外邊距高度就是最大的外邊距高度。比如有兩個相鄰的塊元素，乙個外邊距為10畫素，乙個為20畫素，那麼這兩個塊元素之間的距離就被摺疊為20畫素。
如果乙個元素巢狀在另乙個元素中，它們都有外邊距，就會摺疊。可以用下面這種方法來確定元素的外邊距何時會摺疊：只要兩個垂直外邊距碰到一起，它們就會摺疊，即使是乙個元素巢狀在另乙個元素中也不例外。注意，如果外面的元素有乙個邊框，那麼兩個元素的外邊距就不會碰到一起，這樣也就不會摺疊。但是如果你把這個邊框去掉，這兩個外邊距就會摺疊。剛開始看到這種情況可能會迷惑不解，所以要把它記住，等遇到這種情況時就不會莫名其妙了。
如何浮動元素
1. 指定乙個標識：
//text
#amazing#amazing2. 瀏覽器遇到浮動元素時，會把它盡可能放在最右邊。還會從流中刪除這個段落，就好像它浮在頁面上一樣。
3. 由於這個浮動段落已經從正常的流中刪除，所以其他塊元素回填在這裡，就好像根本沒有這個段落一樣。
4. 不過，對內聯元素定位時，它們會考慮浮動元素的邊界，因此會圍繞著浮動元素。
注意，塊元素會在浮動元素的下面。這是因為浮動元素不再是正常流的一部分。可以將被遮蓋的方向的外邊距設定為和浮動頁面的寬度或高度來解決這個問題。
還有乙個方法，就是在被遮蓋元素的css中定義乙個clear元素：
clear: right; //這裡增加了乙個屬性，指出右邊不允許有浮動內容，也可以定義：left、top、bottom對於塊元素中的內聯元素，它們會圍繞著這個浮動元素。
流體與凍結設計
目前為止，我們採用的所有設計都稱為流體布局，因為不論我們將瀏覽器調整到多大的寬度，布局都會擴充套件，填滿整個瀏覽器，這些布局很有用，因為經過擴充套件，它們會填充可用的空間，使使用者能夠充分利用它們的螢幕空間。不過，有時讓布局鎖定可能更重要，這樣一來，當使用者調整螢幕大小時，你的設計仍能保持原樣。這中設計稱為凍結布局。凍結布局會鎖定元素，讓它們凍結在頁面上，這樣這些元素根本不能移動，我們就能避免由於視窗擴充套件帶來的很多問題。下面來試一試凍結布局：
首先在html中元素增加乙個新的元素，新增的元素要覆蓋整個元素內的所有元素：
........
#allcontent#allcontentcss**顯示
可以把**想成是乙個電子**，包括行和列，各行和列交叉的位置有乙個單元格。在乙個電子**中，可以在各個單元格中放入值，如乙個數或一些文字。對於css**顯示，每個單元格會包含乙個html塊元素。
那麼如何建立css和html實現**顯示？不難想到，我們需要增加一些css，告訴瀏覽器要把我們的欄目顯示得想乙個**，不過還需要增加一些html。為什麼？我們需要增加一些結構來表示**的行和列，還要增加這個**本身的結構。
做法很簡單，只需要為整個**建立乙個，然後為每一行分別建立乙個。對於沒一列，只需要在中放置乙個塊級元素。下面來看這個html，然後再考慮css：
//**的div
//行的div
1. 首先，為**增加乙個，id為「tablecontainer」。這個包含行和列：
div#tablecontainerdiv#tablerow#main
#sidebar//將main和sidebar作為單元格內的內容放入**中
為什麼要增加垂直對齊？如果沒有增加垂直對齊方式，你會看到瀏覽器中預設的對齊方式為中間對齊。當然有些情況下這可能正是你想要的！垂直對齊可以設定為top（頂端對齊），middle（中間對齊）或bottom（底端對齊）。
布局定位
css中有四種布局定位，分別是靜態定位（static）、絕對定位（absolute）、固定定位（fixed）和相對定位（relative）。static是預設的定位型別，也就是流式定位。下面我們介紹另外三種。
絕對定位的工作方式
下面先搞清楚絕對定位會做些什麼，另外是怎麼做的。這裡有乙個簡短的css，使用絕對定位來指定sidebar的位置。
#sidebar
被設定為絕對定位的元素會被精確的放在頁面上的某個位置。在它下面，頁面正常流中的所有元素根本不知道頁面上有這個絕對定位元素，這與浮動元素有所不同，因為流中的元素會調整它們的內容來適應浮動元素的邊界。不過絕對定位元素對其他元素沒有任何影響。
固定定位的工作方式
與絕對定位相比，固定定位很簡單。使用固定定位時，也像絕對定位一樣要為元素指定你希望的位置，不過這個距離是距瀏覽器視窗邊界的乙個偏移量，而不是距頁面邊界的距離。這就有乙個有趣的效果，一旦採用固定定位方式放置內容，它就會一直留在你原先指定的位置，不再移動，即使你滾動頁面它也原地不動。
先假設有乙個,id為"coupon"。可以把這個固定在距視窗上方300畫素，距左邊100畫素的乙個位置上，就像這樣：
#coupon相對定位
相對定位與絕對定位類似，只是元素仍然在頁面流中（還在它原本的位置上），然後按你指定的量偏移。可以使用top、left、bottom或right偏移元素，就像對元素絕對定位一樣。
多個元素疊加時出現的順序
每個定位元素都有乙個"z-index"屬性，這是元素在乙個虛擬的z軸上的順序（可以認為這個z軸從螢幕指向你），要這樣使用這個屬性：
#div1
#div2
//div2會顯示在div1的上面
七海的html和css學習筆記（十三）
用html建立乙個 建立乙個 需要用到四個元素 和。下面將逐個地詳細介紹這些元素，明確它們在 中所起的作用 table標記開始整個 如果想要乙個 都要從table開始 每個tr元素指定乙個錶行。所以，放在一行中的所有 資料都要巢狀在tr元素中 th元素包含 表頭中的乙個單元格。它必須放在乙個錶行中 ...
html和CSS基礎學習（七）
1 內聯元素會緊挨在一起，塊元素會獨佔一行。2 內聯元素不能設定height和width,設定了也沒有用，內聯元素可以設定邊框，和水平方向的外邊距和內邊距，而且不會重疊。水平方向可以影響布局 內聯元素的盒子模型 內聯元素的盒子模型 內聯元素的盒子模型 55 display和visibility 我是...
HTML學習筆記（七）
1 如果想讓div中的內容 content 垂直居中，可以將line height的值設定與div的高度相等來實現。3 我們可以通過設定background屬性來美化按鈕，可以設定cursor屬性來改變滑鼠在按鈕上的影象。4 首字下沉是使用p first letter，注意 letter 與後面的大...