HTML CSS布局 二

標籤：影響   html css   將不   視窗   預設   pre   文本   可靠   空間   

基於浮動的布局

 基於浮動的布局是最容易使用，也是最可靠的，只需要設定元素的寬度，然後設定為左或者右浮動即可。

1.兩列浮動布局

假設頁面總的寬度920px，兩個元素間距20px。（display:inline 防止IE雙外邊距浮動產生的bug）；由於元素是浮動的，

將不再文檔流中佔據空間，將父節點 overflow:hidden;

css代碼：

.right {    width: 650px;    padding-left: 10px;    float: right;    display: inline;}.left {    width: 230px;    float: left;    display: inline;}

2.三列布局

原理和兩列布局一致，可以在右元素裡面添加兩個元素。同理可以實現。

 

固定寬度、流式布局和彈性布局

 以上的例子都是以像素為單位，稱為固定寬度的布局。是最簡單和最常用的布局方法。

 固定寬度布局 缺點：

  大螢幕下無法充分利用空間；小螢幕下顯示不全；固定寬度的布局適合瀏覽器預設的文字字型大小，如果將文本字型大小增加，會影響介面顯示。

 

1.流式布局

使用流式布局，尺寸是用百分數設定。可以根據瀏覽器視窗進行伸縮，通常會設定min-width，以免縮放頁面造成內容的擠壓。

如果設計者使用的寬度是960px,大多數使用者的螢幕是1250px來計算。百分比為960/1250=76.8%；

css代碼如下：

.root{    width: 76.8%;    margin: 0 auto;    text-align: left;}.right {    width:72.82%;    float: right;    display: inline;}.left {    width: 25%;    float: left;    display: inline;}

　　由於頁面有伸縮 可以增加 max-widht和min-width進行限制。

 

HTML CSS布局 二