本文作為個人筆記，內容大多從網上查閱
提到布局就不得不提一提標準文件流了：
文件流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。
標準流的微觀現像：
1.空白摺疊現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張之間有間隙，如果在一行內寫img標籤，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白摺疊現象。分為兩種等級：塊級元素和行內元素；2.高矮不齊，底邊對齊 文字還有大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器檢視我們的頁面總會發現底邊對齊
3.自動換行，一行寫不滿，換行寫 如果在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示我們的文字。
塊級元素：
1).霸佔一行，不能與其他任何元素並列
2).能接受寬、高
3).如果不設定寬度，那麼寬度將預設變為父親的100%，即和父親一樣寬
行內元素：
1).與其他元素併排
2).不能設定寬、高。預設的寬度就是文字的寬度
我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。
塊級元素可以轉換為行內元素：
一旦，給乙個塊級元素（比如div）設定：
display: inline;
那麼，這個標籤將立即變為行內元素，此時它和乙個span無異。inline就是「行內」。也就是說：
此時這個div不能設定寬度、高度；
此時這個div可以和別人併排了
行內元素轉換為塊級元素：
同樣的道理，一旦給乙個行內元素（比如span）設定：
display: block;
那麼，這個標籤將立即變為塊級元素，此時它和乙個div無異。block」是「塊」的意思。也就是說：
此時這個span能夠設定寬度、高度
此時這個span必須霸佔一行了，別人無法和他併排
如果不設定寬度，將撐滿父親
因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素，這樣就出現了乙個層次的問題，我們可以通過z-index屬性來控制這些框的堆放次序。z-index的值越高，框在堆中的位置就越高。
margin
:0 auto;
CSS 網頁布局
一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...
CSS 網頁布局
頭部區域位於整個網頁的頂部，一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術，更學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是夢想！學的不僅是技術，更是學的不僅是技術，更是夢想 學的不僅是技術，更是夢想！學的不...
css網頁布局基礎
塊級元素，行級元素都是盒子模型 三種定位機制 標準文件流 浮動 float 及絕對定位 margin auto 1 設定了浮動的元素仍然處於標準文件流中 2 當設定浮動，沒有輸入內容，就會縮成乙個點 3 浮動會影響接下來的下乙個元素 4 清除浮動 clear both width 100 overf...