CSS常用技巧

1.图片在固定宽高的容器中自适应： 

max-width: a
max-height: b
margin: 0 auto
vehicel-alin:middle

2.容器宽高自适应内容： fit-content

3. 移动端内文字是否可以被选择：

        a. user-select: none;   元素内所有文字都不可以被选择，包括 input 输入框内的文字

        b.user-select: -moz-all；子元素内所有文字都可以被选择，但是 input 输入框内的文字不可以被选择

        c.user-select: -moz-none;子元素内所有文字都不能选择，但是 input 输入框中的文字除外

4.可点击元素在 ios 上点击时，出现带颜色的背景

        -webkit-tap-highlight-color： #color

5.设置 IE 盒模型或者标准盒模型

       a. box-sizing: border-box; // IE 盒模型，宽度为 border + padding + content

        b. box-sizing: content-box；// 标准盒模型，宽度仅仅为内容宽度

6.table 中的合并边框：

        border-collapse: collapse; // 将左右上下边框合并为单一的边框

7.删除线

        text-decoration: line-through

8.下划线

        text-decoration: underline

9.Chrom 下，点击input 输入时，浏览器会自动添加边框，去掉此默认边框的解决办法

        outline:medium

10.解决移动端 iphoneX 下吸底按钮被屏幕遮挡

        

<style>
    .div {
        position: absolute;
        bottom: 0; // 一般情况下
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20px); // 兼容 IphoneX
        padding-bottom: calc(env(safe-area-inset-bottom) + 20px) // 兼容 IphoneX

    }
</style>


<div class="div">
    
    <button class="btn">点击</button

</div>

11.超出省略号(...)展示

<style>
div {

    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>


<div></div>

12.元素内展示两行文字，之后空间不足，省略号展示

        

  .left{
       flex: 4;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
     }