CSS日常踩过的坑

发表于

CSS日常踩过的坑

关于 iconfont 阿里图标的使用：

  1. 引入项目文件：<link rel="stylesheet" type="text/css" href="./iconfont.css">

  2. <i class="iconfont icon-xxx"></i>

  3. 在用到箭头字体图标，需要旋转图标

    1
    2
    3
    4
    5
    6
    7
    .rotate:before {
    	font-size: 24px;
        display: inline-block;  //其实主要还是因为inline元素旋转无效
        transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    • 首先，图标的实现是:before伪元素控制的
    • :before伪元素默认是行内元素（即display: inline）
    • 行内元素旋转无效，所以需要给.rotate:before伪元素加上display: inline-block，使其变为行内块元素。
    • 最重要的一点！！旋转之后 padding-top 会变成 padding-bottom，也就是旋转会带着盒模型一起旋转

    关于在less中使用css3的calc

    ​ 在less中使用CSS3 calc时，如：height: calc(100% - 2rem)，会被less编译成calc(98%)，即在less中使用前面所示等带单位的混合运算会被less解析忽略单位，全部按照百分比计算。——2018.11.21

    • 原因：less的计算方式跟calc方法有重叠，两者在一起有冲突
    • 解决方案：height: e("calc(100% - 2rem)"); 或者是 height: calc(~"100% - 2rem");