欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css常见小问题(自己遇到的)

程序员文章站 2022-10-09 12:17:25
1.禁止div点击 //css属性: pointer-events: none; //或者定义属性,在js中添加: $(".原类名").addClass("新类名"); //js: //禁用 $.fn.disable = function () { $(this).addClass("disable ......

1.禁止div点击

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

2.鼠标放置显示“小手”手势,并显示提示文字

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

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

//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 onmouseover="selbox($(this))" ></select>
<script>
function selbox(a){
var val = a.val();
a.attr("title",val);
}

4.div+css控制图片等比例缩放:

/*外侧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>

5.ui样式

第一个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;  }

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

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

7.设置背景颜色,不透明度

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

8.select文字对齐方式

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

9.input设置提示文字的颜色

/* 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; } 

 10.修改select下拉按钮的样式是自定义的:

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;
}

11.table中多个tr之间的间距

<tr style="display:block;margin-top:10px;"></tr>

12.两个div之间加个竖线样式

<div style="margin-top: 20px;width:1px;height:80px;float:left;background:#e4e4e4;"></div>