面试题总结（二）
这次总结四个个遇到的CSS有关的面试题。CSS是作为网页效果关键的东西，所以个人认为CSS的掌握能看出一个初学者的基础功底。
一、使用css画三角形(底边为10px)
div{
witdth:0; height:0;
border-left: 10px solid transparent;
border-right:10px solid transparent;
border-bottom: 10px solid;
}
这个题目的关键在于border-left 与 border-right，这两个边框必要的属性为 transparent属性，如果不加上这个属性的话左右两边的边框会显示出来，但要是不写这个边框的话，又无法形成三角形，这是一个关键，考察的就是初学者对transparent属性的应用。
二、使用css写出二栏（第一栏100px，第二栏自适应）
#left {
position: fixed; left: 0; top: 0;
height: 100vh; width: 100px;
/* background: blue; *//* 解开此处注释来查看效果 */
}
#right {
position: fixed; left: 100px; top: 0;
height: 100vh; width: calc(100vw - 100px);
/* 如果浏览器不支持CSS3 calc方法，可以使用js计算宽度 */
/* background: red; *//* 解开此处注释来查看效果 */
}
这个考察的就很显而易见了。但是二栏，几栏这样的模式也是经常出现的考点。
三、使用两个、五个div写出十字架形状
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*方法一：五个div实现*/
/*div{*/
/*height: 50px; width: 50px; */
/*}*/
/*.d1{ position: fixed; left: 50%; top:50% ; transform: translateX(-50%) translateY(-50%);}*/
/*.d2{position: absolute; top:-100%;}*/
/*.d3{position: absolute ; bottom:-100%}*/
/*.d4{position: absolute; left: -100%}*/
/*.d5{position: absolute; right: -100%}*/
/*方法二：两个div实现*/
#heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}
#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}
#heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}
</style>
</head>
<body>
<!--方法一：-->
<!--<div class="d1">-->
<!--<div class="d2"></div>-->
<!--<div class="d3"></div>-->
<!--<div class="d4"></div>-->
<!--<div class="d5"></div>-->
<!--</div>-->
<!--方法二：-->
<div id="heng"></div>
<div id="shu"></div>
</body>
</html>
这个考察的就是对于定位的考察，CSS最常见最基础的定位。
四、div垂直居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Div垂直居中方法总结</title>
<style>
.testbg{
position: fixed;
/*position: absolute; 方法二*/
top: 50%;
left: 50%;
background-color: #000;
width:100px;
height: 100px;
/*margin: -50px 0 0 -50px; 使得margin的值为宽高的一半且为负值*/
-webkit-transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="testbg">
</div>
</body>
</html>
css考察初学者的并不是很深，都是基础中的基础，所以个人认为最为一个刚出来的小菜鸟，不需要你能用css写出多么炫酷的特效，但是对于css基础的属性，方法等要掌握非常牢固，这样在面试的时候，碰到面试题就不会因基础而丢失机会。
