小白學前端08

兩列布局：
1.容器div水平居中：定義寬度，將水平外邊距設置爲auto
    width:920px --適合分辨率1024*768的屏幕(不過920px是怎麼肯定出來的呢？)
    margin:0 auto -- 實現水平居中

    用css進行佈局有幾種不一樣的方式，包括絕對定位和使用負的邊距值
    基於浮動的佈局是最容易使用的，也是最可靠的，只需設置但願定位的元素的寬度而後將它向左或向右浮動
    但浮動的元素再也不佔據文檔流中的任何空間，也就再也不對包圍它們的塊框產生任何影響，故需進行清理
    
    通常將兩列都向左浮動，而後使用外邊距或內邊距在兩列之間建立一個隔離帶
    爲了防止浮動元素一列退到另外一列的下面(太擠了)，不使用水平外邊距或內邊距來創建隔離帶而是一個元素向左一個向右

2. 每一列設置想要的寬度，次要內容向左，主內容向右，主內容添一點內邊距，來避免文本緊挨着元素的右邊緣

三列布局：

以上佈局，寬度都以像素爲單位，稱爲固定寬度的佈局，知道了每一個元素的精確度，就可以對它們進行精確的佈局，並且知道全部東西在什麼地方

缺點：由於它們都是固定的，不管窗口尺寸有多大，它們的尺寸老是不變；高分辨率屏幕下爲1024*760建立的會縮小並出如今屏幕中間，在低分辨率的屏幕下，會致使水平滾動，所以被認爲是：糟糕的權宜之計

 

>>>流式佈局/彈式佈局

流式佈局:尺寸是用百分比而不是像素，相對於瀏覽器窗口進行伸縮

缺點：1.在窗口寬度較小時，行變得很是窄，很難閱讀，多列布局尤爲如此，有必要添加以像素或em爲單位的min-width以防佈局變得太窄 2.若設計橫跨整個窗口，則行變得太長也很難閱讀，用百分數設置內邊距和外邊距使容器只跨越寬度的一部分，如85%

固定寬度轉化爲流式佈局

1.將容器寬度設置爲窗口總寬度的百分數（若設計者使用寬度爲960像素，而大多數用戶的瀏覽器窗口設置爲1250像素，那麼使用的百分數爲：(960/1250)*100=76.8%）

2.以容器寬度的百分比形式設置主內容區域和次要內容區域的寬度

兩列：670/920=72.82% 20/920=2.18% 230/920=25%   三列： 400/670=59.7%   230/670   20/670