HTML/CSS
1、如何使用css绘制一个三角形？
方法一：使用border绘制三角形（可以是等腰也可以是直角）
不给盒子元素设置宽高，给4个方向分别设置边框，但是颜色都为透明（把不要的部分颜色都设置为transparent）， 设置其中一个方向边框色，例如border-bottom，那么将绘制一个三角朝上的三角形。
#traingle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid #ccc; }
margin和padding是不能设置颜色的，margin没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性，而padding是跟随背景颜色（background-color可包括内容、内边距和边框区域）。
方法二：使用线性渐变linear-gradient（直角三角形）
实现一个45度的渐变,然后让它的颜色从渐变色变为两种固定颜色，最后再让其中一种颜色透明即可。
#traingle { width: 100px; height: 100px; background:linear-gradient(45deg,black,black 50%,red 50%,red 100%) }
方法三：使用transform:rotate和overflow:hidden
选中一个旋转中心，进行旋转，之后配合overflow:hidden截取想要的部分
2、简述css3选择器的优先级机制？(CSS权重及其引入方式 )
css 选择规则的权值不同时, 权值高的优先;css 选择规则的权值相同时, 后定义的规则优先; css 属性后面加 !important 时, 无条件绝对优先;
(1)权重
我们把特殊性分为几个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
(2)引入方式
行间样式(直接为标签添加style属性)
<div style="background: red;">内联样式</div>
内部样式表（内嵌样式） 在head标签写style标签
<html>
<head>
<title>内部样式表</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
</style>
</head>
<body></body>
</html>
外部css文件 使用link标签引入（在head标签中），引入地址写乳href属性中。
<link rel="stylesheet" type="text/css" href="..."/>
导入样式
<style type = test/css>
@import url("外部样式表的名称");
</style>
3、请写出1rem、1em、1vh、1px、代表的含义
1rem ：继承根元素的字体大小
1em ： 继承父级元素的字体大小
1vh ： 视窗的（vw）宽度和 (vh)高度，相当于 屏幕宽度和高度的 1%
1px ：相对长度单位。像素px是相对于显示器屏幕分辨率而言的
4、标签全部作用 参考1参考2
设置herf属性可作为超链接、锚点（通过返回顶部能够实现一个常见的返回顶部的功能。）、打电话或者发邮件和协议限定符
5、未知宽高元素水平垂直居中（方案及比较）–内容水平和垂直居中？
方法1：通过定位和transform属性来实现
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性
<style>
.parent{
width:100%;
height:400px;
background:#666;
position:relative;
}
.children{
position:absolute;
top:50%;
left:50%;
background:red;
transform:translate(-50%,-50%);
}
</style>
方法2：使用弹性盒，通过利用flex布局
思路：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex
<style>
.parent{
width:100%;
height:400px;
background:#666;
display:flex;
align-items:center;
justify-content:center;
}
.children{
background:red;
}
</style>
方法3：通过table属性实现，主要原理是将父元素设置为table，子元素设置为table-cell，利用table属性让子元素垂直水平居中
准备一个已知宽高的父元素，子元素嵌套其中，父元素设置为table，绝对定位，子元素设置为table-cell，然后设置子元素 的vertical-align为middle就可以使其垂直居中，text-align为center使其水平居中。
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
<style>
.parent{
display:table;
width:100%;
height:400px;
background:#666;
}
.children{
display:table-cell;
vertical-align:middle;
text-align:center;
background:red;
}
</style>
原文：添加链接描述
各方案比较：方法三使用table对于图片不管用，
方法4：添加链接描述
思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
height:300px;
width: 300px;
text-align: center;
background: #FD0C70;
}
.parent2 span{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
zoom: 1;/*BFC*/
*display: inline;
}
.parent2 .child{
display: inline-block;
color: #fff;
zoom: 1;/*BFC*/
*display: inline;
}
</style>
<body>
<div class="parent2">
<span></span>
<div class="child">hello world-2</div>
</div>
</body>
</html>
写出几个你熟悉的Git命令？
