dispaly属性，position属性

position:absolute;绝对定位相对于父元素（父元素设为relative）

position:relative;相对定位相对于自己

position:fixed;固定定位相对于浏览器

display:inline;行内元素，不换行,text-align:center不起作用

display:block;块级元素，换行，能设置宽高

display:inline-block;能设置宽高,不换行,text-align:center起作用

注意，如果父元素不设置高度的话，子元素浮动，或者绝对定位的话，撑不开父元素的高度，最终父元素的高度为0

自适应居中

<div class="title">
    <span class="message">等待钣金</span>
    <span class="num">12</span>
</div>
.content .title span{position: relative;top:12px;height:15px;line-height: 15px;}
.content .title span:last-child{display:inline-block;font-size: 14px;color:white;border-radius: 15px; background-color:#c19b74;width:27px;}

上下左右自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test{
            position: relative;
            width:100px;
            height:100px;
            background: green;
        }
        img{
            position: absolute;
            margin-top: auto;
            margin-bottom : auto;
            top: 0;
            bottom: 0;
            height:100%;
        }
    </style>
</head>
<body>
<div id="test">
<img>
    </div>
</body>
</html>
只是对img有用

posted on 2016-10-28 17:55  杨龙飞  阅读(728)  评论(0)  编辑  收藏  举报

导航

Fork me on GitHub