如何用CSS快速佈局（一）—— 佈局元素詳細

要快速進行網頁排版佈局，則必須對佈局的元素有清晰的了解，才不會總是在細節處出錯。這篇先詳解有關佈局的因素作為佈局基礎：區塊級元素and內聯元素、盒子模型、準確定位、元素對齊、樣式繼承。下一篇則重點描述快速佈局思路。

一、什麼是區塊級元素和內聯元素

1，區塊級元素：

display:block表現出來的特點是折行的， 一般來說可以包含區塊級元素和內聯元素；

#例外：

　　P 元素，只能包含內聯元素，而不能包含區塊級元素。

　　"form"這個區塊元素比較特殊，它只能用來容納其他區塊元素。

 

2，內嵌元素：

display:inline表現出來是不換行的，內部只能包含內聯元素。

像「span」這樣的行內元素，沒有自己的獨立空間，它是依附於其他區塊級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。 其實你需要知道的行內元素就是span 和a 

 

#3，浮動元素自動設定為"block"元素

不管是block還是inline定義了浮動之後,可以定義高度,寬度.

正常情況下是不能定義高度的。寬度倒是可以定義，但是對滑鼠有反應的只有文字部分

如果加上float:left的話，能定義高寬，整塊對滑鼠有反應但是它是橫向選單，

設定display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。 ↓（看起來這個問題只存在於IE6？）

http://www.zzzszy.com/a/2016/0927/896160.html

#區塊元素(block element)

#內聯元素(inline element)

#* address - 位址 * blockquote - 區塊參考 * center - 舉中對齊區塊 ##* dir - 目錄清單 #* p - 常用區塊層級容易，也是css layout的主要標籤 * dl - 定義清單 * fieldset - form控制群組 # * form- 互動表單 * h1 - 大標題 * h2 - 副標題 * h3 - 3級標題 #* h4 - 4級標題 * h5 - 5級標題 * h6 - 6級標題 * hr - 水平分隔線 * isindex - input prompt * menu - 選單清單 * noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容 * noscript - ）可選腳本內容（對於不支援script的瀏覽器顯示此內容） * ol - 排序表單 * p - 段落 ##* pre - 格式化文字 * table - 表格 * ul - 非排序清單

* a - 錨點 ##* abbr - 縮寫 * acronym - 首字 * b - 粗體(不推薦) * bdo - bidi override * big - 大字體 * br - 換行 * cite - 引用 * code - 電腦程式碼(在引用原始碼的時候需要) #* dfn - 定義欄位 * em - 強調 * font - 字型設定(不推薦) * i - 斜體 * img - 圖片 * input - 輸入方塊 * kbd - 定義鍵盤文字 * label - 表格標籤 * q - 短引用 * s - 中劃線(不推薦) * samp - 定義範例電腦程式碼 * select - 專案選擇 * small - 小字體文字 ##* span - 常用內嵌容器，定義文字內區塊 * strike - 中劃線* strong - 粗體強調 * sub - 下標 * sup - 上標 * textarea - 多行文字輸入框 * tt - 電傳文字 * u - 底線 * var - 定義變數   4，可變元素 #可變元素為根據上下文情境決定該元素為區塊元素或內聯元素。 * applet - java applet * button - 按鈕 * del - 刪除文字 * iframe - inline frame * ins - 插入的文字 * map - 圖片區塊(map) * object - object物件 * script - 客戶端腳本 #  5，display:inline-block; 可維持區塊級元素可設定寬高，但又能像內聯元素一樣和其他內聯元素置於一行。   二、盒子模型   #  三、如何定位－相對定位、絕對定位、浮動 相對定位：指相對於文件流程中的其他已定義的元素位置進行定位。 static（預設值）：如果使用預設值，在CSS中為元素定義的top,left,right,bottom.z-index都不會生效。 relative：相對元素本身進行移動。   絕對定位：會脫離正常的文件流，不再佔據空間。 absolute：相對一個不為static的父元素進行絕對定位，如果不指定父元素的position，absolute將相對整個html文件進行絕對定位。會優先顯示於正常文件流定位元素以及float元素。 fixed：相對瀏覽器視窗進行定位，無論網頁如何捲動，該元素始終停留在螢幕的某個位置。   # 浮動：float ##脫離文檔流——相對父元素大小調整位置。若父元素寬度為100，則兩個子元素寬度分別為200，則依舊顯示為上下層次，而非左右。 外部盒子－會優先顯示於正常文件流定位元素。內盒子－弱於區塊級元素，強於內聯元素   #重點！ 定位元素與文件流顯示關係 1，正常文件流之間的內部和外部盒子顯示關係： 代码结构如下（粗略展示）<p>黄色块正方形 　　<p>红色块</p>　　<p>红色块</p></p><p>蓝色块正方形</p> 黃色和藍色為外部文檔流，紅色的為黃色區塊的兩個內部文檔流。 #外部盒子為外部文件流，內部盒子有自己的文件流，互不干擾，但（非自身父元素的）外部文檔流會優先顯示於內部文檔流。   2，內部盒子浮動元素和內部文件流程元素關係： 內聯元素和浮動元素的優先權： 在正常文件流中，內嵌元素和區塊級元素各佔一行。   #然而當設定為浮動元素後，文件流內聯元素讓位給浮動元素（先後於 定義結果一樣）。如下： 也會出現文字包繞現象：       區塊級元素與浮動元素優先權 ##當塊級元素先於浮動元素定義時，浮動元素換行排後。當浮動元素先定義時，脫離文件流，不會對正常文件流的區塊級元素造成影響。   3，內部盒子浮動元素和外部文檔流內部元素關係：  浮動元素覆蓋外部文檔流元素，但不佔據空間。     #綠色區塊和圖片是藍色區塊的內部元素，可見，區塊級元素照正常文檔流顯示，但內嵌元素img還是會讓步於浮動元素，即使是外部文檔流的浮動元素。   4，兄弟元素絕對定位和浮動的優先關係 藍色塊為黃色內部區塊的absolute定位元素，且先於紅色區塊設定p。紅色塊為Float定位元素，被absolute覆蓋。 5，絕對定位和文檔流元素的優先關係&相對定位元素的優先關係 絕對定位position：absolute。 1，相對一個不為static的父元素進行絕對定位，如果不指定父元素的position，absolute將相對整個html文件進行絕對定位。 2，如果沒有設定top\left\bottom\right，則其頂端和左側將與原始文件流位置一致（即跟沒有設定position一樣），但又會覆寫外部文件流內部浮動元素多出部分。 下圖為藍色區塊設定position:absolute; # （註：黃色區塊（內含紅色和綠色子元素）和藍色區塊（內含綠色子元素）是兄弟元素） 調換下順序，藍色區塊先設定p，position為absolute。黃色區塊沒設定position，即預設static。因為脫離了文件流，absolute元素優先顯示。   #設定黃色區塊position為relative，黃色區塊覆蓋絕對定位元素。即相對定位元素後於絕對定位元素定位時，相對定位元素優先顯示。   總結： 1，正常文件流下，外部盒子優先顯示於先定義元素的內盒子（如果超出會被覆蓋）。區塊級元素和內聯元素不會在同一行。      2，對內部和外部文件流，浮動元素脫離文檔流，對於先定義的元素按正常文檔流顯示（讓位塊級，擠壓內聯） ，對後定義的元素不造成佈局影響，但卻影響正常文檔流的內聯元素展示，表現為內聯元素依舊會被浮動元素“擠開”（不論哪裡的內聯元素，都不會被覆蓋在浮動元素之下）      3，絕對定位元素優先顯示於浮動元素。      4，不設定特定值的絕對定位元素會依正常文件流排列，但脫離文件流，不對後定義元素造成影響。      5，如果兄弟元素設定了position:relative；當先於絕對定位元素定義時，絕對定位元素優先顯示於相對定位元素。 當後於絕對定位元素定義時，相對定位元素優先顯示於絕對定位元素。         四、如何對位對齊  水平居中： #1.實現行內元素的居中。 方法：在行內元素外面的區塊元素的樣式中加入：text-align:center; 2.實作區塊級元素的水平居中。 　　方法一：margin:0 auto;  注意：如果區塊級元素是body的直接子元素，不設定寬，則預設100% ，看不出效果；不設定高，且p沒有內容，則高度預設為0。因此，一定要同時設定塊級元素的寬和高，這樣才能看出來效果。對於在一個p中的另一個p希望居中，也可以使用這個方式，因為這時的margin是相對於其父元素而言的。 　　 　　方法二：使用絕對定位和負邊距。 　　　　position:absolute; 　　　　left:50%;                 －相對於父級元素向左移動55%#-#left);移回自身寬度的一半   垂直居中 1.行內元素的垂直居中 　　 方法一： 讓字體垂直居中，line-height設定為父元素高度。 　　 方法二： 設定padding讓其垂直居中。  　   方法三： 父元素設定line-height，行內元素設定vertical-align:middle。   2.區塊級元素的垂直居中。 　　  方法一： 使用絕對定位和負邊距。  　　 方法二： 在父元素中加入display:flex;align-items:center;即可實現垂直居中。   實現水平與垂直居中 　　方法一： 使用絕對定位與負邊距 　　方法二： 使用display：flex　　　　　　在父元素的樣式中加入display：flex；align-items:center實作垂直居中，justify-content:center;實現水平居中 。 　　方法三： 同樣使用display:flex.在父元素中設定display:flex;在子元素中設定margin：auto。 　　方法四： 使用css3屬性－translate()變形函數　　　　　　position: absolute; top:50%; left:50%; transform:50%; transform:50%; translate(-50%,-50%);   五、關於樣式繼承 盒模型樣式是不可繼承的，例如width、height（寬高） 、border（邊框）、margin（邊距）、padding（補白）和背景等 vertical-align不可繼承   可繼承屬性     color       cursor       direction       font       list-style     text-align       text-indent       text-shadow   ## #    word-break    ##     word-spacing       word-wrap        writing-mode   更多一用CSS 元件快速佈局（如何設計使用模式###########1更多一用CSS 元素：快速佈局。詳細 相關文章請關注PHP中文網！ ###