面试之道之 CSS 布局

6,010 阅读3分钟

浮动(float)知识点

浮动主要考察为什么清除浮动和如何清除浮动的问题。

浮动场景:通常对于块级元素我们是不设置高度的(天知道以后会不会加内容,另外设置了高度会带来显示问题),块级元素的高度是靠子元素内容撑开的。这时,子元素设置浮动,子元素就会脱离文档流,此时父元素的高度就不能靠子元素内容撑开了,就会出现显示(体验)问题。

清除浮动是为了解决页面父元素高度塌陷的问题。如何清除呢,这才是我关心的

方法一:使用 overflow: hidden(在父元素操作)

.clearfix {
    overflow: hidden;
}

副作用是离开了这个元素所在的区域以后会被隐藏( overflow:hidden 会将超出的部分隐藏起来),不推荐。。

方法二:添加一个标签

在父元素里面加一个标签,标签样式

.clear {
    clear: both;
}

副作用就是添加了一个无用标签,不推荐。

方法三:使用伪元素来清除浮动

.clearfix {
    zoom: 1; // 为了兼容IE
}
.clearfix: after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

方法四:使用双伪元素清除浮动

.clearfix {
    zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
    content: "";    
    display: block;    
    clear: both;
}

清浮动前

清浮动后

居中知识点

使用 flex

.parent {
    width: 520px;
    height: 260px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child {
    background-color: pink;
    width: 300px;
    height: 150px;
}

使用 transform(css3 属性)

.parent-transform {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-transform {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用 margin 负值

.parent-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -150px;
}

使用 absolutemargin

.parent-absolute-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-absolute-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

使用 flex

使用 transform

使用 margin 负值

absoulte 和 margin

三栏布局

浮动对策

左右两栏浮动(脱离文档流),中间一栏通过 margin 左右值(左右两栏的宽度以及栏外间距),别忘了清浮动

.three-column-float {
    height: 200px;
    background-color: #ddd;
}

.float-left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: deepskyblue;
}

.float-right {
    float: right;
    width: 300px;
    height: 100%;
    background-color: pink;
}
.float-center {
    height: 100%;
    margin: 0 320px;
}

绝对定位对策

左右两栏绝对定位(脱离文档流),中间一栏通过 margin 左右值(左右两栏的宽度以及栏外间距)

.three-column-absolute {
    position: relative;
    height: 200px;
    background-color: #ddd;
}

.absolute-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color:deepskyblue;
}

.absolute-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: pink;
}

.absolute-center {
    height: 100%;
    margin: 0 320px;
}

浮动对策

绝对定位对策

本次代码 Github

远远没有结束,后面会持续更新(请原谅我打未来牌,这些吹过的牛逼我会慢慢实现的)。

你可以...

上一篇:面试之道之 CSS 基础