css的一些实践经验

1、line-height

<div class="btn-text">上台</div>

.btn-text{
    display: inline-block;
    height: 18px;
    line-height: 18px;
    width: 25px;
    font-size: 10px;
    text-align: center;
    background:#10BEA0;
    border-radius:9px;
}

当line-height设置与height相等时文字会偏下，如下图：

当设置line-height少2px后，即16px后显示正常

2、transform会改变层叠上下文，使z-index失效

场景：图片旋转过程中，底图有时会跑到裁剪框选区域上面来，无论给上面的图设置多高的z-index都无效。经查是因为transform会创建新的层叠上下文，使z-index失效。

具体原理可参考：https://www.cnblogs.com/reaf/p/5788781.html

实践中，把底图的z-index设置成负数（如-1）也是可以解决问题的。

3、如何改变radiobutton默认的样式

方法一：

<html>
    <head>
        <style>
            div {
                position: relative;
                line-height: 30px;
            }

            input[type="radio"] {
                width: 20px;
                height: 20px;
                opacity: 0;
            }

            label {
                position: absolute;
                left: 5px;
                top: 3px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid #999;
                cursor: pointer;
            }

            /*设置选中的input的样式*/
            /* + 是兄弟选择器,获取选中后的label元素*/
            input:checked+label {
                background-color: #fe6d32;
                border: 1px solid #fe6d32;
            }

            /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
            input:checked+label::after {
                position: absolute;
                content: "";
                width: 5px;
                height: 10px;
                top: 3px;
                left: 6px;
                border: 2px solid #fff;
                border-top: none;
                border-left: none;
                transform: rotate(45deg);
        </style>
    </head>
    <body>
        <div>
            <input id="item1" type="radio" name="item" value="选项一" checked>
            <label for="item1"></label>
            <span>选项一</span>
        </div>
        <div>
            <input id="item2" type="radio" name="item" value="选项二">
            <label for="item2"></label>
            <span>选项二</span>
        </div>
    </body>
</html>

方法二：使用svg替换按钮（较简单）

4、给四个角分别增加圆角

border-top-left-radius:6px;/*左上角*/
border-top-right-radius:6px;/*右上角*/
border-bottom-left-radius:6px;/*左下角*/
border-bottom-right-radius:6px;/*右下角*/

5、子选择器

/*第一个元素的样式*/
p:first-child{
}

/*最后一个子元素的样式*/
p:last-child{}

/*不是第一个子元素*/
.upime-btns{
   &:not(:first-child) {
   }
}

/*第n个子元素的样式*/
p:nth-child(n){}

区别：

:first-child 匹配的是某父元素的第一个子元素，是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

6、flex布局中，点击触发放大的动画效果，会导致父元素高度撑高，页面抖动。

解决方法：动画元素设置z-index:1。

猜测：flex布局中子元素放大，会导致父元素被撑大。设置z-index后，让子元素跟父元素不在同一层。就不会撑大父元素。

后续：设置z-index后，相同元素仍然会抖动。动画中去除transform，改成设置宽高变大，缩小。问题彻底解决。(为保持中心放大，需绝对定位，然后偏移中心点)

  .big {
    animation: shinestar 0.4s;
  }

/*修改前*/
 @keyframes shinestar {
   50% {
     transform: scale(1.5);
   }
   100% {
     transform: scale(1.0);
   }
 }

/*修改后*/
@keyframes shinestar {
  50% {
    width:21px;
    height: 21px;
    top:-3.5px;
    left:-3.5px;
  }
  100% {
    width:14px;
    height: 14px;
    top:0;
    left:0;
  }
}