美文网首页前端技术
前端样式布局总结

前端样式布局总结

作者: 剑有偏锋 | 来源:发表于2018-12-21 17:40 被阅读25次

    一 定位

    子绝父相
    即子对象绝对定位position: absolute;
    父对象相对定位 position: relative;

    二 居中

    《1 水平居中
    文字居中:text-align: center;
    div居中: margin: auto;

    《2 垂直居中
    文字居中: line-height:等于夫对象的高度height
    div居中 display: flex;

    《3 水平垂直居中

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    

    三 div在同一行

    同一行的子对象

    display: inline-block;
    

    四 四个角停靠对象

    左下角停靠

    position: absolute;
    float: left;          
    bottom: 1px;
    

    其他可以举一反三

    相关文章

      网友评论

        本文标题:前端样式布局总结

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