一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
link和@import的区别？
- link属于XHTML标签，而@import是CSS提供的。
- ⻚面被加载时，link会同时被加载，而@import引用的CSS会等到⻚面被加载完再加载。
- import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
- link方式的样式权重高于@import的权重。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
有哪些方式（CSS）可以隐藏⻚面元素？
- opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以进行交互
- visibility:hidden : 与上一个方法类似的效果，占据空间，但是不可以交互了
- overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
- display:none : 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局 z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
- transform: scale(0,0) : 平面变换，将元素缩放为0，但是依然占据空间，但不可交互
还有一些靠绝对定位把元素移到可视区域外，或者用clip-path进行裁剪的操作过于Hack，就不提了。
em\px\rem区别？
- px：绝对单位，⻚面按精确像素展示。
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个⻚面内1em不是一个固定的值。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性chrome/firefox/IE9+支持
块级元素水平居中的方法？
如果使用Hack的话，水平居中的方法非常多，我们只介绍主流的，奇葩的⻅拓展阅读
margin:0 auto 方法
.center{
height: 200px;
width:200px;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
flex布局，目前主流方法
.center{
display:flex;
justify-content:center;
}
<div class="center">
<div class="flex-div">1</div>
<div class="flex-div">2</div>
</div>
table方法
.center{
display:table;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
还有一些通过position+(margin|transform)等方法的不一样列举了，非重点没必要。
参考链接: 16种方法实现水平居中垂直居中
CSS有几种定位方式？
- static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。
- relative：相对定位，此时的『相对』是相对于正常文档流的位置。
- absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。
- fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。
- sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。
如何理解z-index？
CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。我们可以把视图上的元素认为是一摞书的层叠，而人眼是俯视的视⻆，设置z-index的位置，就如同设置某一本书在这摞书中的位置。
