Css小笔记

不要使用@import

这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。

使用@import影响页面性能的地方主要体现在两个方面：
1. 影响浏览器的并行下载
2. 多个@import导致下载顺序紊乱
3. 只有程序解析到@import才会解析

在实际项目中，使用css时候，顶部写了多个@import，同时页面引入十几个组件，每个组件都同时又引入css，多个css中都使用类@import。
最后导致打开页面的时候，会出现页面报错无法显示的情况。

• 解决办法
  使用scss将多个css合并为一个文件导出，或者多次使用import导入css，由于webpack抽象树过滤的特性，会自动处理掉相同导入文件；

Css垂直水平居中的多种方法：
1、垂直水平网页居中
width: 300px;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

2、table布局
// table模型，
display: table为块状元素, 默认依据内容宽度，不是100%宽度；
table-cell为table元素中的一个单元，table-cell设置的宽度高度无效，table设置控制里面内容是否居中；
table设置的背景色会被table-cell设置的背景色覆盖，说明，table-cell是作为table中的元素，一个就会撑满table；多个table-cell将会按水平从左至右依次分割
.out{
display: table;
width: 600px;
height: 600px;
text-align: center;
}
.in{
display: table-cell;
vertical-align: middle;
background: red;
}