編程教程CSS 布局的基礎方法及css布局技巧
css 是一個網頁的外衣，網頁好不好看取決于 css 樣式，而布局是 css 中比較重要的部分，當產品把一個需求設計交到手中，我首先要做的是一點點的解剖這些需求，首先想到的是 html 的結構，根據要兼容的瀏覽器，數據的拼接，代碼的可維護性，擴展性來選擇 css 的布局方法。有時候，一個好的布局可以減少很多代碼，用 css 處理網頁布局的時候有很多技巧性的東西，下面就給大家介紹一些 css 布局技巧實例及 css 布局模型。
css的基礎布局方法
1.塊區域介紹
<body>
<div>
<p>這是一個段落.</p>
</div>
</body>
p 元素的包含塊是 div 元素，因為作為塊級元素，表單元格或行內元素，這是最近的祖先元素，類似的，div 的包含塊是 body. 因此，p 的布局依賴于 div 的布局，而 div 的布局則依賴于 body 的布局。
塊級元素會自動重啟一行。
2. 塊級元素
正常流布局
一般的，一個元素的width被定義為從左內邊界到右內邊界，height則是從上內邊界到下內邊界的距離。
不同的寬度，高度，內邊距和外邊距相結合，就可以確定文檔的布局。
水平布局
簡單規則，正常流中塊級元素框的水平部分 總和 就等于父元素的 width . 假設一個div中有兩個段落，這兩個段落的外邊距設置為 1 em，段落內容寬度 width 在加上其左，右內邊距，邊框或外邊距加在一起正好是 div 內容的 width.
7大屬性：
margin-left,border-left,padding-left,width,padding-right,border-right,margin-rightwidth值. ( 其中 margin-left, margin-right, width 可以設置成auto ) 設置成auto, 會按照以上規則自動匹配到父塊的寬度，例如 7個屬性的和必須為 400像素，沒有設置內邊距或邊距 ( 默認為 0) 而右外邊距和width設置為100px, 左外邊距為 auto,那么左外邊距的寬度將是200px.
可以用auto彌補實際值與所需綜合的差距。注：如果3個可以設置auto,都沒設置成auto,而且寬度加在一起還不夠父塊區域的寬度的話，會默認將margin-right設置成auto來滿足總和與父塊相等的要求。如果兩個外邊距設置成 auto,那么，它們會是等長的，因此將元素在其父親元素中居中。
如果這3個屬性都設置成auto, 那么, 外邊距會是0，而讓 width 盡可能的長。
可以使用百分數，但是邊框的寬度不能是百分數。
其中 ,
margin-top,height,margin-bottom也可以設置成auto. ( 如果margin-top,margin-bottom設置成auto, 那么它們就會自動設置成 0 ).（1) 浮動
一個元素浮動時，其他內容會“環繞”該元素，浮動元素要設置一個
width.float ( left , right , none ),none的情況一般用在文檔內部，用來覆蓋式樣表，一般很少使用none.浮動元素會自動生成一個塊級框。
浮動元素規則
浮動元素不能超過包含它的塊的左右邊界。（1,2 左右邊界受限 )
第一個浮動元素之后，第二個在它的下邊，因為他們，第3個在它的右邊。（ 2 上邊受限 )
浮動元素的頂端，不能比之前所有浮動元素或塊級別元素的頂端更高 ( 頂端受限 )
position : static | relative | absolute | fixed
static : 元素框正常生成
relative : 元素框偏移某個距離
absolute : 元素框從文檔流完全刪除，并相對于其包含塊定。包含塊可能是文檔中的另一個元素或初始包含塊。
fixed : 類似 absolute，不過其包含塊是視窗本身。
包含塊：
根元素( html或body ) , 初始包含塊是一個視窗大小的矩形.
非根元素 :
- 非根元素, 如果其
position是relative或 static, 則包含塊由最近的塊級框，表單元格或行內塊構成。- 非根元素, 如果其
position是absolute, 包含塊為最近的position值不是static的祖先元素這里有一點很重要，元素可以定位到其包含塊的外面。
css布局技巧
1、多元素水平居中
在網站布局中，很多時候，子元素中使用行內元素如
span或塊元素li標簽且標簽個數不定，而我們又想讓這一塊不管個數有多少個(子元素的總體寬度不定)，始終都能居中顯示。這就需要設置子元素display:inline-block。同時，根據display:inline-block的屬性，子元素本身具備inline的特性，因此父元素需要設置text-align：center，來實現子元素作為一個整體在父元素中水平居中。main{
text-align:center;
}
div{
display:inline-block;
*display:inline;/*hack IE*/
*zoom:1;/*hack IE*/
}
display:inline-block屬性，可以使行內元素或塊元素能夠不加float屬性就可以定義自身的寬、高，同時又能使該元素在父元素居中顯示。在內聯元素上定義
display:inline-block屬性，發現IE6、IE7中的顯示效果同其它瀏覽器一致，但事實是ie7及更低版本的ie瀏覽器不支持display:inline-block這個屬性。 在IE下，display:
inline-block只是觸發了元素的layout。比如將display: inline-block設置到div上，只能保證這個div擁有塊元素的特征（可以設置寬度，高度等），但還是會產生換行。接下來要設置display: inline，使其不產生換行。將display:inline-block;display:inline;寫在同一個樣式上，inline-block屬性是不會觸發元素的layout的，因此我們還要額外加上zoom:1來觸發layout。除了以上所提到的有效方法之外，還有另外一種方法：
先使用
display:inline-block屬性觸發塊元素，然后再定義display:inline，讓塊元素呈遞為內聯對象（兩個display 要先后放在兩個 CSS 樣式聲明中才有效果，這是 IE 的一個經典 bug ，如果先定義了display:inline-block，然后再將display設回inline或block，layout不會消失）。div {display:inline-block;...}div {*display:inline;}
但是要注意的是，
display:inline-block元素間會產生多余空白。解決方法：父元素定義font-size:0去掉行內塊元素水平方向空白；子元素定義vertical-align屬性去掉行內塊元素垂直方向空白。提示：如果您希望設置元素的水平垂直定位，那么您可以參考本站的“CSS如何使元素水平垂直定位”部分的內容！
2、欄柵化布局
display: flex;
flex-direction: column;//上面兩行等同于flex-flow：colomn
flex-wrap: wrap;// 顯示 wrap一行顯示不完的時候換行
height: 440px;
width: 660px;
伸縮方向與換行(flex-flow)
伸縮容器有一個CSS屬性“flex-flow”用來決定伸縮項目的布局方式。
如果伸縮容器設置了“flex-flow”值為“row”，伸縮項目排列由左向右排列。
flex-flow值設置為column，伸縮項目排列由上至下排列。
.main-content {
width: 60%;
}
.main-nav,.main-sidebar {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
3、未知高度多行文本垂直居中
.container{
position: fixed;
left: 0;
top:0;
height: 100%;
width: 100%;
text-align: center;
}
.mask:after{
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%
}
.dialog{
display: inline-block;
border: 3px solid lightblue;
}
box容器通過after或者before生成一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對于「備胎」垂直居中，在視覺上表現出來也就是相對于容器垂直居中了。
方法二（感謝超級課程表胡晉哥哥的提示），使用display：table-cell：
http://codepen.io/floralam/pen/yNeMPg
通過display轉化成為表格的形式，再采用垂直居中的方法得到需要的結果。
display:table 此元素會作為塊級表格來顯示（類似<table>），表格前后帶有換行符。
display:table-cell此元素會作為一個表格單元格顯示（類似<td>和<th>）
方法三（感謝超級課程表胡晉哥哥的提示），flexbox布局：
http://codepen.io/floralam/pen/yNeMvM
flexbox屬性：
伸縮容器：一個設有display:flex或display:inline-flex的元素
伸縮項目：伸縮容器的子元素
主軸、主軸方向：用戶代理沿著一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
主軸起點、主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度、主軸長度屬性：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
側軸、側軸方向：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
側軸起點、側軸終點：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度、側軸長度屬性：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪一個對著側軸方向決定。
另外，對于單行文本，設置line-height=height代碼更加簡潔:
http://codepen.io/floralam/pen/eNJvyE
父元素設置寬度高度，然后設置屬性
text-align:center;/* 水平居中 */line-height: 300px;/*line-height = height*/
提示：如果你想要深入了解flexbox布局，請參考“CSS3 Flexbox屬性與彈性盒模型”部分的內容。
4、多欄自適應布局
.container{
display:-webkit-box;
}
.left{
-webkit-box-flex:1;
}
.right{
-webkit-box-flex:1;
}
1）讓左邊的圖片左浮動或者絕對定位，
http://codepen.io/floralam/pen/wBbPPj
.right{
margin-left: 150px;
}
2）讓左邊的圖片左浮動或者絕對定位，
http://codepen.io/floralam/pen/gbJogQ
.right{
overflow:hidden;/*讓右側文字和左側圖片自動分欄*/
}
3）左側圖片設置為左浮動，
http://codepen.io/floralam/pen/bNyaaX?editors=110
.right{
display: table-cell;/*讓右側文字和左側圖片自動分欄*/
}
兩欄或多欄自適應布局的通用類語句是（block水平標簽，需配合浮動）：
http://codepen.io/floralam/pen/vEwpjV
.cell{
padding-right:10px;
display: table-cell;
*display: inline-block;
*width: auto;
}
5、強制不換行
white-space:nowrap;
word-wrap: break-word; //性允許長單詞或 URL 地址換行到下一行
word-break: normal; //讓瀏覽器實現在任意位置的換行
word-wrap是控制換行的。break-word是控制是否斷詞的。
強制英文單詞斷行
div{
word-break:break-all;
}
6、li超過一定長度，以省略號顯示
nowrap li{
white-space:nowrap;
width:100px;
overflow:hidden;
text-overflow: ellipsis;
}
7、左側導航
.nav{
position:relative;
float:left;width:190px;
margin-right:-190px;
background:lightblue;
}
.container{
float:right;
width:100%;
background:pink;
}
.content{
margin-left:200px;
}
8、 修復側邊欄
在外容器的添加導航和主內容，當導航和主內容的寬度加上內外邊距的數值大于外容器的寬度減去內邊距的值，會導致導航和主內容（其中一個，html代碼排后面的元素）被擠下。
http://codepen.io/floralam/pen/XJLRYq?editors=110
解決方案：
1)Section元素上使用box-sizing:border-box;模擬IE6中，使得內元素的寬度為width的值，而非width加上padding和margin的值。
2)width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2);width屬性中減去padding值
3)http://codepen.io/floralam/pen/yydPOE
在元素內部增加一個額外的容器，并將padding放在這個新增的內部容器中，這是一種修復方法，而且得到眾多瀏覽器支持。
9、css描繪三角形
http://codepen.io/floralam/pen/azgGmZ
很多關于使用css3來描繪特定圖像，使用代碼而非圖片實現（多座小山包，返回頂部）的題目，都離不開描繪三角形。
10、清除浮動的技巧
auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。1)添加最后一個元素<div style ="clear:both"></div>
2) 父元素設置overflow: hidden;
3) 使用CSS的:after偽元素
通過CSS偽元素在容器的內部元素最后添加了一個看不見的空格"020"或點"."，并且賦予
clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。