CSS布局

写在最前：加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;就可以解决.