css常见小问题（自己遇到的）

妖狐艹你老母 2021-10-16 01:16 314阅读 0赞

*  禁止div点击

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//css属性：
        pointer-events: none;   
        //或者定义属性，在js中添加：
        $(".原类名").addClass("新类名");  
    //js：
        //禁用
        $.fn.disable = function () {
         
            $(this).addClass("disable");
        };
        //启用
        $.fn.enable = function () {
         
            $(this).removeClass("disable");
        };
        //或者
        $("#@id").disable();
        $("#@id").enable();

*  鼠标放置显示“小手”手势，并显示提示文字

<div style="cursor:pointer;" title="提示的信息">这里是文字内容</div>

*  超出区域的文字显示省略号

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//1.普通情况
    display:inline-block;   //这个看情况加 
    overflow:hidden; /*超出部分隐藏*/
    white-space:nowrap; /*让文本强制在一行不换行*/
    text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/
    
    /*2.长的英文单词换行*/
    word-break:break-all; /*支持IE，chrome，FF不支持*/
    word-wrap:break-word;/*支持IE，chrome，FF*/
    
    
    /*3.两行截取  2行超出显示...*/
    .mui-ellipsis-2 {
         
        display: -webkit-box;
        overflow: hidden;
        white-space: normal!important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /*4.select的情况下*/
    <select οnmοuseοver="selbox($(this))" ></select>
    <script>
    function selbox(a){
         
    var val = a.val();
    a.attr("title",val);
    }

*  div+css控制图片等比例缩放：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

/*外侧div设置宽、高，内侧图片设置宽、高为auto;并且设置max-width和max-height为同等比例*/
    
    .imgbox50{
         
        width:200px;
        height:50px;
        border-radius:50%;
        text-align: center;
        margin:0 auto;
    }
    .Img50{
         
        max-width:85%;
        max-height:85%;
        border-radius:5px;
        width:auto;
        height:auto;
    }
    <div class="imgbox50 mt5">
        <img class="Img50" src="">
    </div>

*  ui样式

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

第一个li的样式：li:first-child {
           background:#f00;  }
    最后一个li的样式：li:last-child {
           background:#000;  }
    第n个li的样式：li:nth-child(n) {
           background:#000;  }
    倒数第二个li的样式：nth-last-of-type(2){
           background:#000;  }
    奇数列表：li:nth-child(odd) {
           background:#f00;  }
    偶数列表：li:nth-child(even) {
           background:#f00;  }

*  设置元素在另一个元素的最底部

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//设置父div的
    position:relative;
    //子div
    position: absolute;
    bottom:0;

*  设置背景颜色，不透明度

background-color:#6d7a83;
    opacity:0.75;

*  select文字对齐方式

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//右对齐
    select {
         
        direction: rtl;
    }
    //左对齐
    select option {
         
        direction: ltr;
    }
    //居中对齐设置padding

*  input设置提示文字的颜色

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

/* WebKit browsers */ 
    input::-webkit-input-placeholder {
         color: red; } 
    /* Mozilla Firefox 4 to 18 */ 
    input:-moz-placeholder {
          color: red; } 
    /* Mozilla Firefox 19+ */ 
    input::-moz-placeholder {
          color: red; } 
    /* Internet Explorer 10+ */ 
    input:-ms-input-placeholder {
         color: red; }

*  修改select下拉按钮的样式是自定义的：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

select::-ms-expand {
          display:none; }//隐藏自带的样式
    select{
         
            height:30px;
            line-height:28px;
            padding:0 16px 0 5px;
            border:1px solid #e4e4e4;
            background: url("/zbw/img/mobile/public/icon/sjxdown.png") right center no-repeat #fff;
            background-size:16px;
            text-align:left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            cursor:pointer;
    }

*  table中多个tr之间的间距

*  两个div之间加个竖线样式

*  textarea禁止拉伸

style="resize:none"

转载于:https://www.cnblogs.com/M-miao/p/11314908.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211015/6e488b9a25f9449db3c9b77dba116a48.png