css經常使用佈局

1、三欄佈局

三欄佈局實現的是中間自適應寬度，兩邊固定寬度的佈局，中間欄要放在文檔流前面，以實現優先渲染。聖盃佈局、雙飛翼佈局都是三欄佈局的效果只是實現的方式不同。

1.聖盃佈局

<div id="container">
        <div id="main" class="col">
        #main
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>
    
    
    <style type="text/css">
        body {min-width: 550px;}
        .col {position: relative;float: left;}

        #container {padding: 0 190px 0 190px;}

        #main {width: 100%;height: 400px;background-color: #ccc;}

        #left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

        #right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
    </style>

這邊col設置了浮動，而後將left,right定位到左右不負採用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。 設置完成後，定位成功，可是main的內容會被遮蓋，因此container中間設置了padding值。給全部col設置position: relative，再分別給左右欄添加left、right值，使他們定位到正確位置。

2.雙飛翼佈局

<div id="container">
        <div id="main" class="col">
            <div id="main-wrap">
                #main
            </div>
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>
    
    <style type="text/css">
        body {min-width: 550px;}
        .col {float: left;}

        #main {width: 100%;height: 400px;background-color: #ccc;}

        #main-wrap {margin: 0 190px 0 190px;}

        #left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}

        #right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

    </style>

雙飛翼的實現就比較簡單了，爲main添加子元素main-wrap並設置pading。與聖盃佈局同樣，一開始三個col都設置float: left,爲了把left和right定位到左右部分，採用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。

2、怪異盒模型

盒子模型通常分爲標準盒模型（w3c標準）和怪異盒模型（IE標準）。大部分瀏覽器採用標準盒模型，而IE中則採用Microsoft本身的標準。

怪異模式是「部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式」，怪異模式主要表如今IE內核的瀏覽器。

標準模式：
box-sizing:content-box;
盒子總寬度：width + padding（左右） +  border（左右） + margin（左右）

怪異模式：
box-sizing:border-box;
盒子總寬度： width（width已經包含了padding,border的值） + margin（左右）
　　

3、定位佈局

css 有3種定位機制：普通流，浮動，絕對定位

普通流：元素的位置由元素在html中的位置決定。

position：static | relative | absolute | fixed

static: 靜態，沒有特別的設置，遵循基本的定位規定。z-index無效

relative: 相對定位，不脫離文檔流，經過 TLBR（top,left,bottom,right）定位，z-index無效

absolute: 絕對定位，脫離文檔流，經過TLBR定位，z-index有效。 選取其最近一個最有定位設置的父級對象進行定位，若是對象的父級沒有設置定位屬性，absolute元素將以body座標原點進行定位。

fixed: 固定定位，相對於瀏覽器的可視窗口來定位，z-index有效。

4、流佈局

頁面元素的寬度按照屏幕分辨率進行適配，總體佈局不變。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。

一、佈局特色：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示】

二、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。

這種佈局方式在Web前端開發的早期歷史上，用來應對不一樣尺寸的PC屏幕（那時屏幕尺寸的差別不會太大），在當今的移動端開發也是經常使用佈局方式，但缺點明顯：主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調。

5、浮動佈局

float: left | right | none | inherit

left: 左浮動

right: 右浮動

none: 默認值。元素不浮動，並會顯示在其在文本中出現的位置

inherit: 規定應該從父元素繼承 float 屬性的值

使用浮動，div會浮動於網頁上方，爲了避免影響下方不須要浮動的div，要先清除浮動

clear:left;  不容許有向左漂浮的標籤

clear:right; 不容許有向右漂浮的標籤

clear:both;  不容許有任何方向漂浮的標籤

6、flex佈局

彈性佈局（屬於一維佈局），給予容器控制內部元素的寬度、高度的能力。便於實現垂直居中的效果。

大部分瀏覽器都能支持，在webkit內核的瀏覽器須要加上-webkit前綴。

容器的6個屬性：
flex-direction：row | row-reverse | column | column-reverse;  // 決定主軸的方向
flex-wrap：nowrap | wrap | wrap-reverse; // 決定項目換行的狀況
justify-content： flex-start | flex-end | center | space-between | space-around; // 項目在主軸的對齊方式
align-items：  flex-start | flex-end | center | space-between | space-around; // 項目在交叉軸上的對齊方式
align-content： flex-start | flex-end | center | space-between | space-around | stretch; // 多根軸線的對齊方式，只有一根時則無效

flex-flow: <flex-direction> || <flex-wrap>; //flex-direction屬性和flex-wrap屬性的簡寫形式，


項目的6個屬性：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

教程：http://www.ruanyifeng.com/blo...^%$

7、grid佈局

網格佈局（屬於二維佈局），能夠跟flex結合使用。

兼容性沒有flex好，不夠普及

特色：

1）能夠定義任意數量的行和列

2）行的高度和列的寬度可使用絕對值、相對比例或自動調整的方式，可設置最大值和最小值

3）內部元素能夠設置本身所在的行、列，還能夠設置跨越幾行、幾列

4）能夠設置內部元素的對齊方向

教程：http://blog.csdn.net/ceshi986...

源文檔：

http://blog.csdn.net/yinmazuo...

http://blog.csdn.net/dong_pt/...

https://www.cnblogs.com/yanay...

http://blog.csdn.net/aozeahj/...

https://www.cnblogs.com/nuann...

理解的不正確的話，有錯誤請指教 ^ - ^