前端面试基础题必问题一

1. link和@import的区别
   link为html中的标签不仅可以加载CSS还可以连接属性等 引入的css样式会被同时加载
   @import是css提供的语法规则只用于导入css样式表在页面加载完毕之后再加载 ie5以上可以兼容 一般使用link标签引入

2. css水平、垂直居中写法
   水平居中
   1.行内元素 text-align :center
   2.margin:0 auto
   3.position:absolute left:50% right:50% transfrom:transalateX(-50%)
   4.display:flex justify-content:center
   垂直居中
   1.line-height=其height
   2.position:absolute top:50% transofrm:translateY(-50%)
   3.display : flex align-items:center
   4.display :table-cell(使元素类似于td) vertical-align:middle;

3. 1rem、1em、1vh、1px各自代表的含义
   1.rem是是基于根元素变化而变化的。给html元素设置一个 值 ，这个值就是1rem
   2.em 元素字体大小是父元素字体大小 （em）的倍数
   元素的width/height/padding/margin/用em的话相对于该元素的font-size的倍数
   3.vw/vh 视窗的宽度和高度 相当于屏幕和高度的1%
   宽度用%单位合适 高度Vh

4. 画一条0.5px的直线
   height：1px transform：scale（0.5）

5. 盒模型
   盒模型组成 content，padding,border,margin
   标准盒 总宽度= with+margin+ padding +border
   怪异盒模型 = with+margin （with包括padding和border）
   怪异盒也称为ie盒
   box-sizing：border-box(ie盒子)
   box-sizing:content-box(w3c盒子模型)

6. 画一个三角形

.triangle{
		width: 0;
		            height: 0;
		            border-width: 100px;
		            border-style: solid;
		            border-color: transparent #0099CC transparent transparent;
		            transform: rotate(90deg); 
		}
		 <div class= "triangle"></div>