开始编写寄几的 CSS 基础库 - Daryl(2)_H5之家 - 中国HTML5教程资源分享第一站

.lh-100 { line-height: 100%; } .lh-130 { line-height: 130%; } .lh-150 { line-height: 150%; } .lh-170 { line-height: 170%; } .lh-200 { line-height: 200%; }

元素类型

.inline { display: inline; } .block { display: block; } .inline-block { display: inline-block; }

box-sizing

.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

清除浮动

.clear { clear: both; }

超出隐藏

.overflow { overflow: hidden; }

字符居左/中/右

.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }

字体超出隐藏，以省略号代替

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

首行缩进2字符

.text-indent { text-indent: 2em; }

强制文字换行

.text-wrap { word-wrap: break-word; word-break: normal; }

常用的3种定位方式

.absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; }

浮动光标改变

.cusor { cursor: pointer; }

上面例举了一部分公共样式，希望能给大家一些启发。命名和抽象方式可以按照自己的喜好来，将平常工作中用到的样式慢慢积累，很快就会拥有自己专属的强大 css 基础库。祝大家都能做好自己业务的工程化，流水化，下一篇博文是跟大家分享寄几的公共 JS。

感谢你的浏览，希望能有所帮助