CSS常用技术

1、处理图片底部 5px 间距

<style>
    body {background: #2d97db;}
    .imgBox {
        background: #fff;
        font-size: 0; /* 方式一 */
        line-height: 5px; /* 方式二 */
    }
    img {
        width: 100%;
        display: block; /* 方式三 */
        vertical-align: bottom; /* 方式四 */
    }
</style>
<div class="imgBox">
    <img src="http://dsdximg.dsdxo2o.com/goods/201907031643333142607.jpg"/>
</div>

 

2、元素高度跟随窗口

块级元素宽度是随窗口100%适应的，高度则是随内容而变。

如果希望元素高度和窗口一致，如果用百分比设置，那html、body等元素也要跟着设置height:100%；

<style>
    * {
        padding: 0;margin: 0;
        box-sizing: border-box;
    }
    /*
    方式 1：
    html {height: 100%;}
    body {height: 100%;}
    .eleBox {
        height: 100%;
        background: #2d97db;
    }
    */


    /* 方式 2 */
    .eleBox {
        height: 100vh;
        background: #3FB2FF;
    }
</style>
<div class="eleBox"></div>

3、:not()

所有元素都设置某些样式了，唯独最后一个不需要，这时候使用 not 选择器会特别方便。

li:not(:last-child) { border-bottom: none }

4、caret-color

使得光标颜色和 input 框样式更协调。

input { caret-color: #333}

5、移除 type="number" 尾部的箭头

input::-webkit-inner-spin-button { -webkit-appearance: none; }

6、移除 input 框选中时默认的状态线

input { outline: none; }

7、IOS 滚动条卡顿

html,body,div {-webkit-overflow-scrolling: touch;}

8、画三角形

<style>
    .parent { display: flex }
    .child {
        margin-right: 10px;
        border: 20px solid rgba(0,0,0,0);
    }
    .top { border-top: 20px solid #2d97db }
    .right { border-right: 20px solid #2d97db }
    .bottom { border-bottom: 20px solid #2d97db }
    .left { border-left: 20px solid #2d97db }
</style>
<div class="parent">
    <div class="child top"></div>
    <div class="child right"></div>
    <div class="child bottom"></div>
    <div class="child left"></div>
</div>

 

9、箭头

<style>
    .triangle {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        width: 0;
        height: 0;
        border: 16px solid;
        border-color: transparent #2d97db transparent transparent;
    }

    /* 利用伪元素盖在上面 */
    .triangle::after {
        position: absolute;
        content: '';
        right: -16px;
        top: -16px;
        border: 16px solid;
        border-color: transparent #fff transparent transparent;
    }

    .top { transform: rotate(90deg) }
    .right { transform: rotate(180deg) }
    .bottom { transform: rotate(270deg) }
    .left { transform: rotate(0deg) }

</style>
<div class="box">
    <div class="box-inner">
        <div class="triangle top"></div>
        <div class="triangle right"></div>
        <div class="triangle bottom"></div>
        <div class="triangle left"></div>
    </div>
</div>

 

10、隐藏滚动条(chrome | Safari)

.scrollEle::-webkit-scrollbar { display: none }

11、自定义选中文本样式

p::selection { background-color: #f00 }

12、禁止选择文本

p { usr-select: none }

13、clear: left | right | both

用在被浮动元素影响的元素身上。

<style>
        .d1, .d2 {
            width: 100px;height: 100px;
            border: 1px solid;
        }
        .d1 {float: right;}
        .d2 {clear: both;}
    </style>
    <div class="d1">111</div>
    <div class="d2"></div>

View Code