zoukankan      html  css  js  c++  java
  • 盒子模型

    文字对其线

    <!-- log -->
    <div><span id="testSpan1">一二三</span>四五六</div>
    <hr>
    <div><span id="testSpan2">一二三</span>四五六</div>
    <style>
      #testSpan1 {
        display: inline-block;
         100px;
        height: 100px;
        background-color: green;
        font-size: 2em;
      }
      #testSpan2 {
        display: inline-block;
         100px;
        height: 100px;
        background-color: green;
        font-size: 2em;
        /* 可改变竖向位置 */
        vertical-align: 30px;
      }
    </style>
    

    隐式转化inline-block

    要想为span标签指定宽度/高度,必须修改其display属性,但是有时候我们也可以不显式修改。下面是一个例子。

    <!-- log-after -->
    <span id="span1">span1</span>
    <span id="span2">span2</span>
    <div class="clear"></div>
    <style>
      #span1 {
         100px;
        height: 100px;
        background-color: red;
      }
    
      #span2 {
        /* 或者position: absolute */
        float: right;
         100px;
        height: 100px;
        background-color: red;
      }
    </style>
    

    解释:
    position: absolute;float会把 display 属性值 变为inline-block

  • 相关阅读:
    如何书写bat文件?(转)
    Bogon
    recursive
    ssh
    verbose
    mii-tool
    ExtJs 中的ext.date
    一个打包机~~~
    图标库--宝藏
    几种常用的控件(下拉框 可选框 起止日期 在HTML页面直接读取当前时间)
  • 原文地址:https://www.cnblogs.com/oceans/p/13589310.html
Copyright © 2011-2022 走看看