关于css样式总结

表单样式表

移除input=number的上下箭头

在chrome下:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

Firefox下:

input[type="number"]{-moz-appearance:textfield;}

第二种方案:

将type=”number”改为type=”tel”,同样是数字键盘,但是没有箭头。


禁止textarea缩放
textarea {resize: none;}

CSS3中新增了resize缩放属性
none:用户不能操纵机制调节元素的尺寸;
both:用户可以调节元素的宽度和高度;
horizontal:用户可以调节元素的宽度;
vertical:让用户可以调节元素的高度;
inherit:默认继承。

placeholder字体颜色
::-moz-placeholder {
    color: #909090;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #909090;
}
::-webkit-input-placeholder {
    color: #909090;
}

段落样式表

多行省略号
.box {
    text-overflow:-o-ellipsis-lastline;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

字间距/首行缩进
//text-indent设置抬头距离css缩进
//letter-spacing来设置字与字间距_字符间距离

移动端

解决移动端Retina屏幕1px边框

方法1

div{border:1px solid #000;} 
@media (-webkit-min-device-pixel-ratio: 2) { 
    div{border:0.5px solid #000; }
}
/*缺点:问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,还有 Android 设备。*/

方法2

div {
    border: 1px solid #bbb;
}
.hairlines div {
    border-width: 0.5px;
}

if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var testElem = document.createElement('div');
    testElem.style.border = '.5px solid transparent';
    document.body.appendChild(testElem);
    if (testElem.offsetHeight == 1) {
        document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(testElem);
}

/*缺点:无法兼容安卓设备,iOS8以下设备*/

方法3:border-image实现
这里写图片描述

.border-image-1px {
    border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px {
        border-bottom: none;
        border-width: 0 0 1px 0;
        -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

/*缺点:修改颜色麻烦, 需要替换图片;圆角需要特殊处理,并且边缘会模糊*/

方法4:background-image实现

.background-image-1px {
    background: url(../img/line.png) repeat-x left bottom;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}
/*缺点:修改颜色麻烦, 需要替换图片;圆角需要特殊处理,并且边缘会模糊*/

方法5:多背景渐变实现

.background-gradient-1px {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}

/* 或者 */
.background-gradient-1px{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
    background-size: 100% 1px;
}
/*缺点:代码量不少,圆角没法实现*/

方法6:box-shadow实现

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
/*缺点:边框有阴影,颜色变浅*/

方法7:伪类 + transform实现(推荐)

//单条
.scale-1px{
    position: relative;
    border:none;
}
.scale-1px:after{
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

//四条
.scale-1px{
    position: relative;
    margin-bottom: 20px;
    border:none;
}
.scale-1px:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

其他

内容不满一屏时底部永远居于页面底部(支持box-sizing的浏览器版本)
html,body{height: 100%;}
body{margin:0;}  
.page{  
    box-sizing: border-box;  
    min-height: 100%;  
    padding-bottom: 50px;  
}  
footer{  
    height: 50px;  
    margin-top: -50px;  
    background:red;
}  

<div class="page">主要页面<br></div>  
<footer>底部</footer> 

透明度兼容ie8
.box {
    background: rgb(0, 0, 0);    /*不支持rgba的浏览器*/
    background: rgba(0,0,0,.5);  /*支持rgba的浏览器*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);    /*IE8支持*/
}

//IE9同时支持RGBA和filter,导致两个重叠,透明效果变差,补充如下:
<!--[if lt IE 9]>
   <style type="text/css">
   .box {
       background:transparent;   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
       zoom: 1;
    }
    </style>
<![endif]-->

解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

透明度IEfilter
0.119
0.233
0.34C
0.466
0.57F
0.699
0.7B2
0.8C8
0.9E5

css hack

条件注释法

这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

类内属性前缀法
  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

选择器前缀法
  • html 前缀只对IE6生效
  • +html +前缀只对IE7生效
  • @media screen\9{…}只对IE6/7生效
  • @media \0screen {body { background: red; }}只对IE8有效
  • @media \0screen,screen\9{body {background: blue; }}只对IE6/7/8有效
  • @media screen\0 {body { background:green; }} 只对IE8/9/10有效
  • @media screen and (min-width:0\0) {body {background: gray; }} 只对IE9/10有效
  • @media screen and (-ms-high-contrast:active), (-ms-high-contrast: none){body { background: orange; }} 只对IE10有效
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值