知識點滴 HTML5 布局總結

##布局總結

####1）像這樣的行內標記，定義它的margin-top和margin-bottom是無效的，除非你把它設定為塊狀元素才可以。display:block

2）對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，

3）無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的盒模型結構，我們就可以使用外邊距，內邊距，邊框，高和寬來控制的大小以及與其他物件之間的位置關係。

4）浮動是從網頁布局的角度來定義元素的顯示，而行內和塊狀屬性主要是從元素自身的性質來定其顯示的。

5）當元素沒有定義邊框時，可以把內邊距作為外邊距使用。有時候外邊距會有重疊現象的。

6）當為元素定義背景影象時，內邊距區域內可以顯示背景影象，而對外邊距區域來說，背景影象是達不到的，他永遠都是透明狀態

7）用div+css設計網頁結構時，設計師滿腦子都是網頁內容，而非內容所呈現的效果。

8）塊狀元素：不管塊狀元素寬度是多少，他總會自動佔據一行，因為在他末尾附加了乙個換行符，而行內元素沒有這個特點。塊狀元素有完整的盒模型結構，可以定義寬度和高度，而行內元素沒有這個特性，無法通過高度來改變文字行的行高。

塊元素的代表標記 div

行內元素的代表標記 span ，行內標記不具備組織結構框架

9）網頁布局分為：自然布局，浮動布局， 定位布局

10）當乙個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設定高和寬。如果沒有設定，則元素會按照它所包含的內容大小來確定它的大小。

11）當元素浮動後，周邊的物件會自動環繞浮動元素周圍，形成一種環繞關係。

12）塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。

13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。

14）一般定位元素（絕對或是相對元素）都會覆蓋在文件流物件之上。但是，select元素的視窗控制項還不完全支援z-index

15）在css定位布局中，一般遵循「外部相對定位，內部絕對定位」

16）在body中設定min-width:760px,可以避免布局重疊現象。

浮動模型不會與流動模型發生衝突。當元素定義為浮動布局時，它在垂直方向上應該還處於文件流中，也就是說浮動元素不會脫離正常文件流而任意的浮動，它的上邊線將與未被宣告為浮動時的位置一樣。但是在水平方向上，它的浮向邊會盡可能地靠近它的包含元素邊緣（這個邊緣是指包含元素補白的內邊沿）。例如，在上面的示例中，我們能夠看到第2個span元素雖然浮動位置有了變化，但依然處於第1個span元素後面，且靠近包含元素body的右邊緣，並隨文件流一起上下流動

（2）內聯元素。和塊級元素相反，內斂元素沒有固定形狀，也沒無法設定寬度和高度。

###塊元素(block element)

◎ address - 位址

◎ blockquote - 塊引用

◎ div - 常用塊級容易，也是css layout的主要標籤

◎ dl - 定義列表

◎ fieldset - form控制組

◎ form - 互動表單

◎ h1 - h6 大標題

◎ hr - 水平分隔線

◎ menu - 選單列表

◎ noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）

◎ ol - 排序表單

◎ p - 段落

◎ pre - 格式化文字

◎ table - **

◎ ul - 非排序列表（無序列表）

行內元素前後元素不會換行

###文件流

將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.

每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.

內聯元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素.

有三種情況將使得元素脫離文件流而存在,分別是浮動,絕對定位, 固定定位. 但是在ie中浮動元素也存在於文件流中(還讓我覺得這樣很合理》<).

浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當乙個元素從正常文件流中抽出後，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間

基於文件流, 我們可以很容易理解以下的定位模式:

相對定位, 即相對於元素在文件流中位置進行偏移. 但保留原佔位.

絕對定位, 即完全脫離文件流, 相對於position屬性非static值的最近父級元素進行偏移

固定定位, 即完全脫離文件流, 相對於視區進行偏移

知識總結 HTML5布局之flex布局總結

一 布局幾種方式 1.靜態 自然 布局 沒有任何 float,position等 修飾的布局 2.浮動布局 float 3.定位布局 position 4.彈性布局 flex 5.柵格布局 就是把網頁的寬度分成固定的相同寬度,然後列出各種可能的組合,以便頁面在進行呈現時能夠進行快速的布局,通常12等...

HTML5知識點總結（三）

字型及文字屬性 邊距和填充 邊框屬性 列表屬性 背景屬性 背景的漸變 陰影屬性 字型屬性 type text css font 設定字型是所有樣式 font family 設定字型型別 font size 設定字型大小 font weight 設定字型粗細 color 設定字型顏色 font fam...

HTML5 布局篇 總結

1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的盒模型結構...