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>

  • 相关阅读:
    【TJOI2019 Day2】简要题解
    【TJOI2019 Day2】简要题解
    【Codeforces 750G】—New Year and Binary Tree Paths(数位dp)
    【Codeforces 750G】—New Year and Binary Tree Paths(数位dp)
    【TJOI2019 Day1】简要题解
    【TJOI2019 Day1】简要题解
    【LOJ #6503】【雅礼集训 2018 Day4】—Magic(生成函数+分治NTT)
    【LOJ #6503】【雅礼集训 2018 Day4】—Magic(生成函数+分治NTT)
    【HihoCoder #1529】— 不上升序列(dp+斜率)
    【HihoCoder #1529】— 不上升序列(dp+斜率)
  • 原文地址:https://www.cnblogs.com/jiechen/p/4752673.html
Copyright © 2011-2022 走看看