寫在最前：加border是為了看到container的寬高，可以在做布局與居中的時候看清布局杂腰。
左右布局
1.用float布局
HTML
image.png
CSS
image.png
效果圖
image.png
2.用position布局
HTML
image.png
CSS
image.png
效果圖
image.png
左中右布局
1.用float布局
HTML
image.png
CSS
image.png
效果圖
image.png
2.用position布局
HTML
image.png
CSS
image.png
效果圖
image.png
水平居中布局
用text-align布局
HTML
image.png
CSS
image.png
效果圖
image.png
垂直居中布局
用position布局
HTML
image.png
CSS
image.png
效果圖
image.png
其他小技巧
鼠標(biāo)懸浮某個元素，元素底部邊框出現(xiàn)變顏色有抖動煌珊，可以提前給元素底部邊框加上透明的顏色和大小粗細(xì)border-bottom: 3px solid transparent;
一個元素被設(shè)置成display: inline-block;,這個元素底部會有縫隙冲茸，去除縫隙，只要加上vertical-align: top;就可以解決.
