CSS 頁面布局

幾個實現多欄布局的方法。主要介紹使用內部div來建立浮動的欄。

多欄布局有三種基本的實現方案：固定寬度、流動、彈性。

固定寬度布局的大小是隨使用者調整瀏覽器視窗大小而變化，一般是900至1100畫素寬。其中960畫素是很常見的，因為這個寬度適合所有的現代瀏覽器，而且能被16、12、10、8、6、5、4和3整除，不僅容易計算等寬分欄的數量，而且計算結果也是麼有小數的畫素數。

流動布局的大小會隨著使用者調整瀏覽器的視窗大小而變化。這種布局能夠很好的適應大螢幕，但是同時 也意味著放棄對頁面某些方面的控制，比如隨著頁面的變化，文字行的長度和頁面元素之間的位置關係可能會傳送變化。現在越來越多的瀏覽器都支援css**查詢了，這就讓基於瀏覽器視窗寬度提供不同的css樣式成為可能。在這種形勢下，適應各種螢幕寬度的可變固定布局，正逐步取代流動布局。這種可變的固定布局能夠適應最大和最小的螢幕，業界稱之為響應式設計。

彈性布局和流動布局類似，在瀏覽視窗變化時，不僅布局會變，而且內容元素的大小也會發生變化。

布局高度，大多數情況下，布局高度都不需要設定。以便元素的高度隨著內容的增加而在垂直方向上擴充套件。這樣擴充套件的元素會把下面的元素向下推，而布局也能隨著內容的增減而垂直伸縮。

布局寬度，與高度不同，我們需要精準的控制布局寬度，以便隨著瀏覽器視窗寬度的合理變化，布局能夠做出適當的調整，確保文字行不會過長或者過短。即使必須設定寬度，也不要給包含在其中的元素設定寬度，應該讓這些內容元素自動擴充套件填滿欄的寬度。

構建乙個簡單的三欄布局頁面。

.left

.middle
.right

*為了直觀我們都設定高度為300px。

為了讓內容與欄邊界拉開距離。為欄新增水平外邊距和內邊距。會導致又變的欄浮動下滑。在欄中新增大，或者沒有空格的長字串，也會導致欄寬超過布局寬度。同樣會導致右側的欄向下滑動。

有三種解決方案：

css頁面布局

總結 布局1 0 內聯元素對設定寬 width 和高 height 不敏感 1 如果子元素是乙個塊級元素 block 或者被設定為塊級元素，我們可以對子元素使用margin 0 auto居中。class container class sub1 2 如果子元素是乙個內聯元素或者被設定為內聯 內聯塊元...

布局頁面CSS

樣式表 作用 美化網頁，頁面布局。分類 內聯，寫在標籤裡面style 裡面的樣式，優點是控制精確，可重用性差。內嵌，嵌在網頁的head裡面，可重用性高 外部，樣式寫在另乙個檔案裡面，如果要用直接附加過來。link rel styleheet type text css href style.css ...

CSS頁面布局基礎

5 css頁面布局基礎 字符集不能設定寬度，如果要設定寬度必須display設定成塊級 inline 字符集 block 塊級 padding內邊距，border邊框，margin外邊距。4個 上 右 下 左，3個 上 左右 下，兩個 上下 左右，乙個 上下左右。元素浮動 float none 沒有...