美文网首页
CSS常用知识点

CSS常用知识点

作者: MrAlexLee | 来源:发表于2017-02-05 18:41 被阅读20次

    1,居中布局

    语法:margin:0 auto;
    将div框宽度设置为100%就能占满屏幕,如果不想占满屏幕,只希望在任何分辨率的屏幕上居中布局设定好的宽度,只需要定义宽度大小。此时是看不到div框的,可以设置高度,或者填充内容,内容高度即div高度。

    2,关于display:inline-block

    简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性

    3,关于background-size:cover

    在写手机端页面或者PC端页面的时候,如果要写一些纯色提示的,直接用background-size:cover来设置
    HTML:
    <code><div class="wrap-one">
    <div class="bg"></div>
    </div>
    </code>
    <code><div class="wrap-two">
    <div class="tip">注意安全</div>
    </div>
    </code>
    CSS:
    <code>
    .wrap-one{
    margin: 0 auto;
    width: 300px;
    height: 100px;
    background-color: rgb(48, 133, 133)
    }
    .bg{
    background-color: rgba(0,0,0,.7);
    background-size: cover;
    padding-top: 20%;
    }
    .wrap-two{
    margin: 0 auto;
    width: 300px;
    height: 90px;
    background-color: #c7202f;
    }
    .tip{
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background-color: rgba(135, 25, 46, 0.7);
    color: #FFF;
    }

    </code>

    相关文章

      网友评论

          本文标题:CSS常用知识点

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