本文主要探討點：

1.Position、Float屬性的基本使用方法
2.Position、Float屬性對元素所造成的影響
3.Position、Float屬性交叉使用上面的影響
4.Position、Float屬性使用上的小技巧

本文結(jié)構(gòu)點：

1.HTML布局的基本要點（點我直接跳轉(zhuǎn)）
  盒子模型
  HTML的普通流

2.Position屬性（點我直接跳轉(zhuǎn)）
  屬性值介紹
  用法介紹
  一些關(guān)于position的小知識

3.Float屬性（點我直接跳轉(zhuǎn)）
  屬性值介紹
  用法介紹
  與Position之間的兼容問題

HTML布局的基本要點：

如果要掌握、運用好Position、Float屬性必須要對HTML的兩個基本點有清晰的了解。

1.盒子模型（box model）
2.HTML的普通流（normal flow）
盒子模型
在HTML中元素的盒子模型分為兩種：塊狀元素、行內(nèi)元素，請注意這里的塊狀元素（Block）和行內(nèi)元素（Inline）與Display屬性中的inline、block兩個屬性值并不等同。盒子模型中的Inline、Block類似于是Display屬性的父類，例如：Display屬性中的list-item屬性值是屬于塊狀（Block）類型的。

我們直觀的上看兩種盒子模型的區(qū)別

•塊狀（Block）類型的元素可以設(shè)置width、height屬性，而行內(nèi)（Inline）類型設(shè)置無效。
•塊狀（Block）類型的元素會獨占一行（直觀的說就是會換行顯示，無法與其他元素在同一行內(nèi)顯示，除非你主動修改元素的樣式），而行內(nèi)（Inline）類型的元素則都會在一行內(nèi)顯示。
•塊狀（Block）類型的元素的width默認(rèn)為100%，而行內(nèi)（Inline）類型的元素則是根據(jù)自身的內(nèi)容及子元素來決定寬度。
列舉出一些大家常見的元素的分類

•塊狀元素：P、DIV、UL、LI、DD、DT...
•行內(nèi)元素：A、IMG、SPAN、STRONG...
HTML的普通流
瀏覽器在讀取HTML源代碼的時候是根據(jù)元素在代碼出現(xiàn)的順序讀取，最終元素的呈現(xiàn)方式是依據(jù)元素的盒子模型來決定的。行內(nèi)元素是從左到右，塊狀元素是從上到下。（如下圖）

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表