常用样式小技巧集锦

june18
1,578 阅读3分钟

工作中总结一些实用小技巧很重要，也是一个人经验的体现！

父元素控制状态改变（CSS）

当某个元素中包含多个变化状态的子元素时，比如显示隐藏，比如改变字体颜色等，建议直接通过最外层的父元素控制，避免为每个子元素都设置一个样式类，比如：

// good
.parent {}
.parent .child1 {display: none;}
.parent .child2 {color: red;}

.parent.status .child1 {display: block;}
.parent.status .child2 {color: green;} 

// bad
.parent {}
.child1 {display: none;}
.child2 {color: red;}

.child1.show {display: block;}
.child2.green {color: green;}

很明显，第一种写法方面后期再新增第三个子元素，可维护性高。

半透明背景上的白色文字（CSS）

先上个带半透明背景的截图。


带半透明背景的截图

仔细看，可以发现，背景图上的文案“白色字体”也被半透明了，从代码中也可以看出来：

<div class="box">
    <img src="//img13.360buyimg.com/n1/jfs/t1/123613/32/33750/145057/64b16e49Fecd729f6/1b41a57175756482.jpg" alt="">
    <div class="shadow-text">白色字体</div>
</div>

.shadow-text {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 150px;
    line-height: 150px;
    border-radius: 50%;
    background-color: #000;
    opacity: .7; // 整体半透明了
    text-align: center;
    color: white;
    font-size: 25px;
}

“处女座”的我一定要 fix 这个问题，解决方案也很简单，只需要把半透明背景和文案分离成两个不同的层叠上下文即可。

<div class="box">
    <img src="//img13.360buyimg.com/n1/jfs/t1/123613/32/33750/145057/64b16e49Fecd729f6/1b41a57175756482.jpg" alt="">
    <div class="shadow">白色字体</div>
    <div class="text">白色字体</div>
</div>

.shadow,
.text {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 150px;
    line-height: 150px;
    border-radius: 50%;
}

.shadow {
    background-color: #000;
    opacity: .7;
    z-index: 0;   
}

.text {
    text-align: center;
    color: white;
    font-size: 25px;
    z-index: 1;
}

下面是优化过的代码截图，和第一版形成鲜明的对比。

带半透明背景的截图

透明边框（CSS）

试想一种场景，某元素默认没有边框，鼠标滑过后展示一条带颜色（比如红色）的边框，很常见对吧。

效果也很容易实现：

element {
    ...
}

element:hover {
    ...
    border: 1px solid red;
}

上个动画：
透明边框

有没有发现文字有点儿闪，咋回事儿呢？

原因是初始化时没有设置边框，只要在初始化时设置一条透明边框就行。

element {
    ...
    border: 1px solid transparent; // 不推荐设置成白色，原因是用户可能会更换设备的背景颜色，比如手机端设置成暗黑模式。
}

element:hover {
    ...
    border-color: red;
}

图片宽度100%（CSS）

移动端的 banner 图片想要实现兼容各种手机型号的自适应铺平效果，只需要为图片设置 100% 的宽度就行，无需设置额外的高度属性。

图片宽度100%

<img src="xxx" alt="xxx" />

.banner {
    width: 100%;
}

v-if/show 样式（Vue）

这里我想说两点。

  1. 适用场景 遵循一个原则，展示/隐藏切换频繁的场景使用 v-show，否则使用 v-if。 比如 Dropdown 组件：

img11.360buyimg.com/imagetools/…

点击“...”展示/隐藏下拉框的内容这个操作就比较频繁，就可以考虑使用 v-show。

再比如页面有个模块是带权限控制的，页面首次渲染时就不会出现，此时就可以使用 v-if。

  1. v-if/show 设置在最外层 标题可能有点儿晦涩，直接上代码：
    <!-- bad -->
    <div class="out">
        <div v-if=""></div>
    </div>

    <!-- good -->
    <div class="out" v-if="xxx">
        <div></div>
    </div>

对比上面两段代码，区别是 v-if 的位置。

试想，假如有以下样式：

.out {
    padding-top: 100px;
    border: 1px solid red;
}

上面第一段代码的表现就不友好，因为显示了一块带红色边框的区域。

avatar
文章
阅读
粉丝