前端技术

前端样式布局总结

2018-12-21  本文已影响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;

其他可以举一反三

上一篇下一篇

猜你喜欢

热点阅读