self.lib.css 文档布局

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)是不能叠加在一起的;
  
*/
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,519评论 25赞 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,350评论 1赞 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,197评论 19赞 139
  • 太阳下一切都是亮晶晶的 你可以看到空气中飞舞的亮晶晶的灰尘 衣服上亮晶晶的丝线 眼镜框上亮晶晶的反光 头发丝、睫毛...
    岚裳如何阅读 384评论 0赞 0
  • 昨天有人提问:如何系统提高学习力? 这个问题我想了想,没有回答,它的答案就是我开社群的初衷之一,这是一个很宏大的架...
    小铮古阅读 211评论 0赞 0

友情链接更多精彩内容