zoukankan      html  css  js  c++  java
  • 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;27px;}

    上下左右自适应

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #test{
    position: relative;
    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有用
    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    如何在linux系统安装redis
    关于—单例模式
    2.观察者模式(发布-订阅模式)
    1.提供者模式
    提供者模式:提供者的实例化加锁
    为已有的类添加特性,常用于数据库生成的类模型
    C#特性
    JSON.parse(jsonStr)和eval('('+jsonStr+')')
    a标签的href和onclick
    查看SQL语句执行时间/性能测试
  • 原文地址:https://www.cnblogs.com/windseek/p/6008833.html
Copyright © 2011-2022 走看看