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 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>
<img 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></tr>
12.两个div之间加个竖线样式
<div></div>
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。
word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。
满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!
我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。
定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。
css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性
编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!