self.lib.css 文档布局

2016-11-06  本文已影响0人  forLovn

self.lib.css 文档布局 有好的属性会更新...
lib库可以提高开发效率,减少引入其他家的库(比较大,但可以借鉴)
create by zhailiangbiao

html {
    height: 100%;
    min-height: 100%;
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    position: relative;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
    margin: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
}
p{
    margin: 0;
}
*{
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
a,
a:visited,
a:focus,
a:hover{
    text-decoration: none;
}

a {
    /*color: #0e90d2;*/
}

/*tab*/
.tab-pane{
    display: none;
}

.tab-pane.active{
    display: block;
}
.prelAuto{
    position:relative;
    margin: 0 auto;
    text-align: center;
}
.flexP{
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flexC{
    float: none;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.auto{margin-left:auto; margin-right:auto;}
/* 清除浮动*/
.fix{*zoom:1;}
.fix:after{display:table; content:''; clear:both;}

.rel{position:relative;}
.abs{position:absolute;}

.l{float:left;}
.r{float:right;}
/* 大小不定元素垂直居中 */
.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}

/* 单行文字溢出虚点显 示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

/*text*/
.defaultBorder{border: 1px solid #111111}
.defaultHW{height: 150px;width: 100%}
.defaultH{width: 100%}
.defaultW{width: 100%}

/*
1:浮动元素撑开父元素的区别
absolute:想要div有层叠加的效果目前看来只能用absolute,
            但absolute元素定位时元素是无法撑开父元素的;
参考资料:https://segmentfault.com/q/1010000000686154

  float:元素div(block)是不能叠加在一起的;
  
*/
上一篇 下一篇

猜你喜欢

热点阅读