写在最前：加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
其他小技巧
鼠标悬浮某个元素，元素底部边框出现变颜色有抖动，可以提前给元素底部边框加上透明的颜色和大小粗细border-bottom: 3px solid transparent;
一个元素被设置成display: inline-block;,这个元素底部会有缝隙，去除缝隙，只要加上vertical-align: top;就可以解决.
