CSS布局的三个关键属性：float、position、display
最近在出差，就我一個在這里。客戶要做幾個頁面，涉及到了頁面的布局問題，沒辦法自己得做了。然后就遇到了一些問題。頁面不論怎么都不能按照設想的布局。
以前也沒有做過網頁布局方面的工作。上網上找類似的例子，看的是一頭霧水。最終決定自學CSS。
在網上下載了一本電子書《CSS權威指南》第三版。用了3個鐘頭看完了這本書。看的時候專揀不知道的看。譬如CSS選擇器（這些了，以前就知道，并且使用jQuery就是用的CSS的選擇器）、盒子模型了等，所以這些就不看的。另外在學習時，根據CSS參考手冊（下載網址：http://css.doyoe.com/）編寫樣式，再使用360瀏覽器（或者firebug）進行調試，很快就能明白其中奧妙。
這3個鐘頭中，對CSS有了大致的了解，也明白了CSS布局是怎么回事了。下面我將影響CSS布局的3個重要的屬性說說：
（1）display 。在學習這個屬性前，要明白CSS把元素主要分為兩大類：塊元素、行內元素。
常用的塊元素主要有:<div>、<p>、<ul>、<li>、<h1..7>等。換行顯示。
常用的行內元素有：<span>、<a>等。在同一行顯示。
塊級元素和行內元素是可以相互轉換的，就是通過display屬性完成的。
display可取的值有：
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 等等。
但最重要的就是前三個。
· none 表示不顯示。
· inline 表示作為行內元素顯示。譬如<div>是個塊元素，使用了這個屬性值，就將和<span>一樣了。
· block 表示作為塊元素顯示。譬如<span>是行內元素，使用這個屬性值，就和<p>一樣了。
（2）float 浮動
在學習float前，得先明白什么是文檔流。瀏覽器在解析html文檔內容（這里不說css和javascript、是說單純的html文檔）時，是一流的方式解析的，反映到瀏覽器上，就是按照從左到右、從上到下的方式顯示的。
使用float屬性后，元素會脫離文檔流，按照指定的方式進行浮動。
脫離文檔流后，該元素后面的元素就會前移。占有該元素的位置，如果該與元素前的元素也浮動了，就會繼續前移。
float有left和right兩種浮動方式。
?
（3）position 定位
使用position屬性后，元素也會脫離文檔流，按照指定的方式進行定位。
position：static | relative | absolute | fixed 默認是static。
relative是相對于祖先元素中，最近的是用position定位的元素，然后依據相對位置進行定位。
absolute是相對于祖先元素中，最近的是用position定位的元素,然后依據相對位置進行定位。
fixed是相對于<body>，我們看到的懸浮，就是使用這個值做出的效果。
理解了這3個屬性后，我就寫出來了一個5級的菜單，按照我希望的方式顯示。然后順利的完成了客戶的幾個頁面。
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的CSS布局的三个关键属性：float、position、display的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Selenium1 Selenium2
- 下一篇： React 篇 Search Bar a