几道CSS面试题

横向布局

问：可以用哪些CSS属性让一个个div一个接一个地横向排列？

我答：

display: inline-block
float: left（注意父元素塌陷）
table布局（N前年的过时网站是这样子的，现在不推荐使用table布局，效率低）
使用absolute定位，一个个设好偏移应该也可以（我实在想不出了）

他提示说：有没有CSS3的属性也可以？

我：。。。

他换个问题：display有哪些取值？

inline, block, inline-block
table, table-row, table-cell类
none, initial, inherit

仍然不是他想要的。。。

回头查资料：

display还有felx, grid, inline-flex, inline-grid以及-webkit-box, -webkit-inline-box等CSS3的属性值。

回到最初的问题，让一个个div元素横向排列，还可以使用下面的办法。

对父元素设display: flex或-webkit-box（IE10下用-ms-flexbox）
IE10+下对父元素设display: grid，子元素设grid-column和grid-row来实现grid layout

居中

问：如何让一个元素在它的父元素中水平、垂直居中？（经典的居中问题）

我答：

先来水平居中

子元素display: inline-block，然后父元素text-align: center
子元素设width，然后margin-left: auto, margin-right: auto

然后垂直居中

子元素是单行文本的话，直接line-height等于父元素height
子元素是多行文本或图文并排的话，父元素display: table-cell, vertical-align: middle

回头看笔记：

还有一种也可以实现水平居中，父元素设relative定位，子元素设absolute定位，子元素left: 50%，margin-left等于负1/2的width即可。模态框的居中一般使用这种办法。

.mask{
    background-color: #666;
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}
.modal{
    background-color: #fff;
    height: 300px;
    left: 50%;
    margin-left: -200px;
    position: fixed;
    top: 120px;
    z-index: 100;
    width: 400px;
}

边框

问：除了用border，还有什么其他属性可以画边框？只要让用户看起来像个边框即可。

我答：

background，画个边框的图片
box-shadow，阴影应该也能看起来像个边框吧。。。

想不出了，他进而问：box-shadow最多能画几条边框？

我：（这是什么鬼）。。。

回头查w3school：

outline
border-image，CSS3中支持的属性

边框从内到外的效果如下图

黄色的一片是background（其实是background-image）；蓝色和红色相间的菱形是border-image（同时设了border宽度和transparent）；绿色的方块是outline；右下边有一条灰色的阴影是box-shadow。

因此可以看到background只能填充到元素的content + padding，向外然后是border，而outline和box-shadow都在border之外。demo在这里

float塌陷

问：你上面提到了float会导致父元素塌陷的问题，有哪些办法？

我答：

暴力法，父元素overflow: hidden，IE下要加一条*zoom: 1以触发hasLayout
clearfix法

.clearfix {
    *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}
.clearfix:after {
    clear: both;
}