美文网首页
self.lib.css 文档布局

self.lib.css 文档布局

作者: forLovn | 来源:发表于2016-11-06 22:16 被阅读0次

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)是不能叠加在一起的;
  
*/

相关文章

  • self.lib.css 文档布局

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

  • CSS的常见布局方式

    Css中目前常见的布局方式有:文档流布局,定位布局,浮动布局,flex布局,grid 网格布局#1:文档流布局(d...

  • HTML布局问题

    1:html中常见的有3种布局方式: 1:文档流布局(电脑默认的布局方式) 2:浮动布局 3:定位 文档流布...

  • HTML常用标签

    一、布局标签: 定义文档的分区,主要用于布局; 定义文档的头部; 定义文档的章、节; 定义文档的页脚。 二、文本标...

  • HTML常用标签

    1. 布局标签 :定义文档的分区,主要用于布局 :定义文档的头部 :定义文档的章、节 :定义文档的页脚 2. 文本...

  • HTML标签基础简介

    1. 布局标签 :定义文档的分区,主要用于布局分布 :定义文档的头部 :定义文档的章、节 :定义文档的页脚 2. ...

  • HTML常用标签介绍

    HTML文档标签 定义文档类型 定义HTML文档 定义文档头部 定义文档主体 布局标签(包含...

  • css-布局详解

    正常的默认文档流方式布局就不说了。主要说以下几种布局: table布局 float布局 position定位布局 ...

  • 前端第五天

    前端第五天 目录 文档流 浮动布局 清除浮动 流式布局 定位布局应用 相对定位 绝对定位 固定定位 一、文档流 1...

  • css布局之文档流,定位与浮动

    网页布局的定义 网页的布局方式就是浏览器如何对网页中的元素进行排版。主要分为:文档流,定位,浮动。 文档流 文档流...

网友评论

      本文标题:self.lib.css 文档布局

      本文链接:https://www.haomeiwen.com/subject/xhpnuttx.html