面试常考css 两栏布局 清除浮动 水平垂直居中
一、两栏布局的方法
1、float
.left{float:left; height:100px; width:100px;}
.right{height:100px; margin-left:100px;}
2、position
.left{height:100px; width:100px; position:absolute; top:0; left:0}
.right{height:100px; margin-left:100px;}
3、flex(父级设置display:flex)
.left{height:100px; width:100px;}
.right{height:100px; margin-left:100px; flex-grow:1}
4、columns
二、三栏布局
1、float
.left{float:left; height:100px; width:100px;}
.middle{height:100px; margin-left:100px; margin-right:100px;}
.right{height:100px; width:100px; float:right;}
2、position
.left{position:absolute; top:0; left:0; height:100px; width:100px;}
.middle{height:100px; margin-left:100px; margin-right:100px;}
.right{position:absolute; top:0; right:0; height:100px; width:100px;}
3、flex(父级设置display:flex)
.left, .right{height:100px; width:100px;}
.middle{flex-grow:1; height:100px;}
4、columns
三、水平垂直居中
{left:50%; top:50%; margin-left:元素的一半;margin-top:元素的一半}
{transform:translate(-50%,-50%)};
{position:absolute; justify-content:center; aligin-items:center; display:flex;}
四、清除浮动
1、为什么要清除浮动
浮动元素不会脱离文字流,但是会脱离文档流,文字和带有inline属性的元素能看见,别的元素看不见,如果不清除浮动,border不能被撑开,背景不能显示,margin值不能正确设置
2、清除浮动的方法
底下添加新的元素,用clear:both
父级属性设置:overflow:hidden(触发bfc,可以自己计算高度)
添加伪元素:after{clear:both}(块级元素可以清除浮动)