开发中常用到的通用 scss 模块

仅作备份，开发中，需要时能快速找到

1:清除浮动

<!-------scss-------->
.clear {　　*zoom: 1;　　&:after{　　　　content: "";　　　　display: table;　　　　clear: both;　　}}
<!-------html-------->
<div class="clear"><div class="float"></div>
</div>

2:万能的inlin-block

.inblock{display: -moz-inline-stack;display: inline-block;vertical-align: top;zoom: 1;*display: inline;
}

inline block 会存在字间距，模块布局不采用，字体内icon小图标之类的可以用。

3:垂直居中解决方案

.hv-wrap {display: table;　　overflow: hidden;  　　margin: 0 auto;  　　height: 100%;*position: relative;  position: relative;  z-index: 1;.hv-panel {display: table-cell;　　　　vertical-align: middle;　　　　*position: absolute;　　　　top: 50%;.hv-inner {word-break: break-all;  　　　　　　*position: relative;　　　　　　*top: -50%;　　　　}　　}}

配合上 min-height,lin-height ，max-height,之类的属性一起使用更好。

但是有个场景下暂时没有比较好的解决方案，一行的时候是居中，如果两行自动垂直居中，多余两行第二行末尾省略号，这种暂时没想到好的方案。

5:一行内超出省略号

.els{ white-space:nowrap;text-overflow:ellipsis;  overflow:hidden;
}

6:强制换行

.break{　word-break:break-all;　word-wrap:break-word;
}

7：透明度遮罩

.mask{   width:100%;height:22px;position:absolute;background: rgba(0, 0, 0, 0.5);filter:alpha(opacity=50);
}

8：三角

.tri{   border: 5px solid transparent;width: 0px;height: 0px;border-left: 6px solid #df1155;margin-right: -6px;
}

9：input textarea

input[type="text"],textarea{padding: 6px;border-radius: 2px;border: 1px solid #ccc;outline: none;resize:none;
}

10:小弹窗

#alert{position:fixed;width:100%;height:100%;z-index:1000;top:0px;display:none;.cbk{background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;width:100%;height:100%;position:absolute;z-index:1;}.panel{width:366px;position:absolute;z-index:2;top:25%;left:50%;margin-left:-150px;background: #fff;border-radius:3px;padding-bottom:8px;}
}

11：固定页脚

html,body{height: 100%;width: 100%;
}
body{  padding-bottom: 110px; box-sizing: border-box;  min-height: 100%; height: auto; position: relative;
}
#footer{  position: absolute;bottom: 0px;
}

转载于:https://www.cnblogs.com/liuyuanhang/p/5487751.html

开发中常用到的通用 scss 模块相关推荐

php开发中常用函数总结,PHP开发中常用函数总结
PHP开发中常用函数总结发布于 2014-10-31 08:34:03 | 48 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Preproc ...
NC65在日常开发中常用的代码写法
标题 NC65开发相关代码版本 1.0.1 作者 walton 说明收集NC在日常开发中常用的代码写法,示例展示 1.查询 1.1 通过BaseDAO查询结果集并转换 //通过BaseDAO进行查 ...
JAVA 开发中常用的工具有哪些？
Java开发中常用的工具有以下几种: Eclipse:一款非常流行的开发工具,提供了很多方便的功能,如代码自动补全.调试.版本控制等. IntelliJ IDEA:一款功能强大的Java集成开发环境, ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
浅谈实际开发中常用的分布式事物处理
浅谈实际开发中常用的分布式事物处理文章目录前言一.分布式事物二.常用方案 1.使用记录表+mq机制前言随着微服务的流行,越来越多系统不在是单体结构,根据业务和功能拆分成不同微服务,这就导致 ...
python通过什么连接数据库_python中常用的各种数据库操作模块和连接实例
这篇文章主要介绍了python中常用的各种数据库操作模块和连接实例,包括sqlite3.oracle.mysql.excel,需要的朋友可以参考下工作中,经常会有用python访问各种数据库的需求, ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
python web开发第三方库_Python Web开发中常用的第三方库
Python Web开发中常用的第三方库 TL;DR 经常有朋友问,如果用Python来做Web开发,该选用什么框架?用 Pyramid 开发Web该选用怎样的组合等问题?在这里我将介绍一些Pytho ...
java开发常用jar包_Java开发中常用jar包整理及使用
本文整理了我自己在Java开发中常用的jar包以及常用的API记录. 一.common-lang3 简介:一个现在最为常用的jar包,封装了许多常用的工具包依赖: org.apache.common ...