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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值