左右布局
左中右布局
水平居中
垂直居中
等其他小技巧
一、水平居中
1.margin: 0 auto
適用於塊級元素
2.text-align: center
適用於內聯元素,inline-block元素，文字，使用方法是為目標的父元素新增該樣式。（可使用包裹器技巧）
3.調整 padding,margin
如不方便直接調整，可以使用包裹器包住元素，然後讓包裹器代為調整
二、垂直居中
1.line-height=height
大多數情況下管用
2.調整padding,margin
如果不方便直接調整，可以使用包裹器包住元素，然後讓包裹器代為調整
三、左右布局
1.float+clearfix
塊級元素（尤其是列表元素）固定套路
step1.float+clearfix將列表元素調為橫向布局
step2.列表元素寬度設為50%
2.絕對定位
step1.用乙個relative父元素包裹住所有元素
step2.子元素absoulte調整位置
四、左中右布局
五、等其他小技巧
1.如何讓內聯元素產生位移：
內聯元素margin與padding左右有效，上下無效，解決辦法就是inline-block
例項：
使用情形：
3.對塊級元素設定inline-block會發生什麼？
答：至少發生兩件事
第一件事：塊級元素寬度收縮
塊級元素不寫寬度的情況下，預設寬100%（畢竟佔據一行）。
加入inline-block，寬度自動適合內容
第二件事： 塊級元素下方會產生空隙
解決方法→vertical-align:top;
4.狀態機
使用情形：需要可變地切換乙個元素的狀態時
實現方法：
css檔案裡寫入三個狀態類***-state1,***-state2,***-state3
script標籤修改 作用物件.classname="***-state?"
技巧：配合transition:all 0.2s可讓狀態切換不顯突兀
5.box-sizing:border-box
作用：在計算寬度的時候，將border和padding算入其中，使我們寫的寬度是加入border、padding後的寬度（不至於因它們撐破父元素，破壞左右布局）
使用情形：
CSS實現樣式布局
使用css建站時，您肯定遇到過形形色色的布局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易，當您遇到困難時為您提供快速參考。1 有疑問，先驗證 在除錯時，先對您的 進行驗證往往能省去不少麻煩事。格式不正確的xhtml css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前，請先...
CSS樣式 布局篇
1.css基本樣式 背景語法 background background color background image background repeat background attachment background position background 000 url 位址 no repea...
css盒子 布局樣式
恢復內容開始 1.盒子 邊框border top width 10px 寬度 border top style solid dashed dotted 實線 虛線 點線 border top color red 顏色 border top 10px solid red 寬 線 色 上邊框 borde...