html&css布局案列

1.实现三栏布局：左右两栏宽度固定，中间一栏根据父元素宽度填充满，如下图：     参考  https://regulusleonis.github.io/2017/02/06/%E8%AF%A6%E8%A7%A3css%E4%B8%83%E7%A7%8D%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80/

2.清除浮动及定位：  参考   http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

　　(1)在浮动的大容器内增加一个空元素，并设置样式 clear:both

　　(2) 在浮动的大容器上增加样式 overflow:auto

3.完美解决水平和垂直居中问题  https://css-tricks.com/centering-css-complete-guide/

　　(1)水平居中可以设置元素的宽度和高度后设置 margin:auto

　　(2) 垂直居中可以设置top:50%;然后设置margin-top:-100px; (这里假设元素的高度为200px)就可以使元素的垂直中心位置在容器的垂直中心位置

　　(3)可以设置元素的top,right,bottom,left为0，然后设置margin:auto也可以使元素水平垂直居中，不过要设置元素的宽度和高度

html&css布局案列

原文：http://www.cnblogs.com/kain-wu/p/6456111.html