前端面试题

1、

typeof  [],typeof {}, typeof null   会得到的都是 "object"

2、怎么实现弹窗居中。定宽，不定高。随着滚动条，滚动居中。

3、怎么实现文字和图片垂直居中

<style>
    .demo *{
        vertical-align:middle;
    }
</style>
<div class="demo">
    <span>2017-05-24 周三 共21场</span>
    <img src="img/icon-gray-expand.png" style="display:inline-block;width:1rem;height:1rem;"/>
</div>

 4、CSS如何设置html table表格边框样式

http://www.divcss5.com/yanshi/2013051601/

第1种对表格设置边框 效果

站名    网址    说明
DIVCSS5    www.divcss5.com    CSS学习
CSS5    www.css5.com.cn    CSS切图
对应CSS代码：

.table-a table{border:1px solid #F00}

对应html源代码：

<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第2种对表格设置边框 效果

站名    网址    说明
DIVCSS5    www.divcss5.com    CSS学习
CSS5    www.css5.com.cn    CSS切图
对应CSS代码：

.table-b table td{border:1px solid #F00}

对应HTML代码片段：

<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第3种对表格设置边框 效果

站名    网址    说明
DIVCSS5    www.divcss5.com    CSS学习
CSS5    www.css5.com.cn    CSS切图
对应CSS代码：

.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
.table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}

对应HTML源代码片段：

<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>

第4种对表格设置边框 效果

站名    网址    说明
DIVCSS5    www.divcss5.com    CSS学习
CSS5    www.css5.com.cn    CSS切图
对应CSS代码：

.table-d table{ background:#F00}
.table-d table td{ background:#FFF}

对应HTML代码片段：

<div class="table-d">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="105">站名</td>
<td width="181">网址</td>
<td width="112">说明</td>
</tr>
<tr>
<td>DIVCSS5</td>
<td>www.divcss5.com</td>
<td>CSS学习</td>
</tr>
<tr>
<td>CSS5</td>
<td>www.css5.com.cn</td>
<td>CSS切图</td>
</tr>
</table>
</div>