• 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>

    执行结果如下:

  • 相关阅读:
    ORB Test Hanson
    ajax异步传输中的乱码问题
    调用淘宝API遇到的问题
    doc命令查看电脑配置大全
    从关联数组中取得键名
    php图片上传
    doc命令查看电脑配置
    一个空间配置多个虚拟主机
    淘客网站中系统信息获取
    opendir(path,context)
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12334932.html
Copyright © 2020-2023  润新知