zoukankan      html  css  js  c++  java
  • display(block,inline,none),visibility(visible,hidden)之间的关系及区别

    这段时间一直对display属性的block,inline,none和visibility属性的visible,hidden一直很模糊,总觉得很难理解,通过下面这个实例,就可以很好的牢记这几者之间的区别:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
        <P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>
        <P>
            <input type=button value="Inline" onclick="document.getElementById('oSpan').style.display='inline'">
            <input type=button value="Block" onclick="document.getElementById('oSpan').style.display='block'">
            <input type=button value="None" onclick="document.getElementById('oSpan').style.display='none'">
            <input type=button value="Hidden" onclick="document.getElementById('oSpan').style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'">
        </P>

        <UL>
            <LI>将元素设为 block,会在该元素后换行。</LI>
            <LI>将元素设为 inline,会消除元素换行。</LI>
            <LI>将元素设为 none,隐藏该元素内容。</LI>
        </UL>
    </body>
    </html>

    点击Inline,Block,None,Hidden,Visible按钮,将会出现不同的结果。

    通过对比以上的显示,可以对display属性的block,inline,none和visibility属性的visible,hidden一目了然!

  • 相关阅读:
    水调歌头·1024
    网页开发方式-从静态页面到服务端渲染
    完美融合 nextjs 和 antd
    commanderJs编写命令行工具(cli)
    [信息安全] 05 X.509 公钥证书的格式标准
    [Cake] 3. dotnet 本地工具 cake & dotnet format
    [计算机网络] 00 概述
    [Cake] 2. dotnet 全局工具 cake
    [解读REST] 0.REST 相关参考资料
    [OIDC in Action] 3. 基于OIDC(OpenID Connect)的SSO(添加Github OAuth 2.0的支持)
  • 原文地址:https://www.cnblogs.com/ymj0906/p/2550976.html
Copyright © 2011-2022 走看看