zoukankan      html  css  js  c++  java
  • inline-block

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                span{
                    400px;
                    height: 400px;
                    background-color: red;
                }
            </style>
        </head>
        <body>
            <span>span1</span>
            <span>span2</span>
            <span>span3</span>
            <!--
                内联元素的特征
                1、宽高由内容撑开
                2、不支持宽高
                3、一行上可以显示继续跟同类的标签
                4、不支持上下的margin
                5、代码换行被解析
            -->
        </body>
    </html>


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                    height: 400px;
                    background-color: red;
                    margin-bottom: 20px;
                }
            </style>
        </head>
        <body>
            <div></div>
            <div></div>
            <!--
                块元素的特征
                1、在没有设置宽度的时候,默认撑满一行。
                2、默认块元素独占一行
                3、支持所有css命令
            -->
        </body>
    </html>


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div, span{
                    height: 400px;
                    background-color: red;
                    display:inline-block;
                }
            </style>
        </head>
        <body>
            <div>div1</div>
            <div>div2</div>
            <hr />
            <span>span1</span>
            <span>span2</span>
            <!--
                inline-block的特征
                1、块元素能在一行上显示
                2、内联元素支持宽高
                3、没有宽度时,由内容撑开宽度
            -->
        </body>
    </html>

  • 相关阅读:
    Java 中的定时任务(一)
    超实用 Git 使用方式介绍
    TCP 建立连接为什么要握 3 次手?
    OSI、TCP、IP、UDP 这些都是啥??
    Java 中线程安全问题
    PlantUML——3.Graphviz的安装
    PlantUML——2.中文乱码及解决
    PlantUML——1.Hello
    maven实战系列
    NGUI优化之Drawcall
  • 原文地址:https://www.cnblogs.com/jiechen/p/4752673.html
Copyright © 2011-2022 走看看