zoukankan      html  css  js  c++  java
  • css边框及float、display样式

    1、css边框:

    text-align: center; 水平方向居中
    line-height: 48px;跟标签高度一样,为竖直方向居中
    font-weight: bold;字体加粗
    <body>
        <div style="border:1px dotted red">
            1234
        </div>
        <div style="height:50px;
        80%;
        border:1px solid red;
        font-size:16px;
        text-align:center;
        line-height:50px;
        font-weight:bold;
        ">5678
        </div>
    </body>

    2、float样式

    float:让标签飘在空中,可以使块级标签堆叠

    <body>
        <div style="20%;background-color:red;float:left">1</div>
        <div style="20%;background-color:black;float:right">2</div>
    </body>

    执行结果如下:

    如果这两个div的width超过了100%,则不会在一行中堆叠,执行结果如下:

    3、display样式

    display: none; 让标签消失,默认看不见标签
    display: inline;可以使块级标签有行内标签的特性
    display: block;可以使行内标签有块级标签的特性
    display: inline-block;
              inline,默认自己有多少占多少
              block,可以设置无法设置高度,宽度,padding(内边距)  margin(外边距)

    示例如下:

    div为块级标签;span为行内标签

    span无法设置高度、宽度等,但使用display属性后,便可以了

    <body>
        <div style="background-color: red;display: inline;">1234</div>
        <span style="background-color: red;display: block;">5678</span>
        <span style="display:inline-block;background-color: red;height: 50px; 70px;">WUWU</span>
        <a style="background-color: red;">Eric</a>
    </body>

    执行结果如下:

  • 相关阅读:
    HDU 3547 DIY Cube
    POJ 2975 Nim
    POJ 1678 I Love this Game!
    POJ 2234 Matches Game
    POJ 3537 Crosses and Crosses
    POJ 3710 Christmas Game
    POJ 1704 Georgia and Bob
    HDU 3923 Invoker
    POJ 2154 Color
    PLM更新自定义CLASS
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12334932.html
Copyright © 2011-2022 走看看