关于css样式总结

最新推荐文章于 2022-07-20 17:51:23 发布

se7en灬柒柒

最新推荐文章于 2022-07-20 17:51:23 发布

阅读量541

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表单样式表

移除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.1	19
0.2	33
0.3	4C
0.4	66
0.5	7F
0.6	99
0.7	B2
0.8	C8
0.9	E5

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有效