zoukankan      html  css  js  c++  java
  • 常见标签

    块元素和内嵌元素

    块的特征:

    • 默认独占一行
    • 没有宽度时,默认撑满一行
    • 支持所有CSS命令

    内嵌的特征:

    • 同排可以继续跟同类的标签
    • 内容撑开宽度
    • 不支持宽高
    • 不支持上下的margin和padding
    • 代码换行被解析

    块和内嵌:

     1 <DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <title>块和内嵌</title>
     5     <meta charset = "utf-8"/>
     6     <style>
     7         div{height: 200px; background: blue;}
     8         span{height: 200px; background: blue;}
     9     </style>
    10 </head>
    11 <body>
    12     <div>div1</div>
    13     <div>div2</div>
    14     <div>div3</div>
    15     <span>span1</span>
    16     <span>span2</span>
    17     <span>span3</span>
    18 </body>
    19 </html>

    分析:

      因为div没有设置width,所以默认撑满一排,span虽然设置了height但是是内嵌不支持宽高,所以没有显示,span之间有间隔是因为代码中换行被解析了。间隔的宽度和字体大小有关。

    修改后的span则不会出现间隔,

    修改前的span:

    1     <span>span1</span>
    2     <span>span2</span>
    3     <span>span3</span>

    修改后的span:

    1     <span>span1</span><span>span2</span>
    2     <span>span3</span>

    span1和span2没有换行,所以span1和span2没有间隔,而span2和span3有换行所以有间隔。

    设置div和span中的width:

     1 <DOCTYPE HTML>
     2 <html>
     3 <head>
     4     <title>块和内嵌</title>
     5     <meta charset = "utf-8"/>
     6     <style>
     7         div{height: 200px; width: 400px; background: blue;}
     8         span{height: 200px; width: 400px; background: blue;}
     9     </style>
    10 </head>
    11 <body>
    12     <div>div1</div>
    13     <div>div2</div>
    14     <div>div3</div>
    15     <span>span1</span>
    16     <span>span2</span>
    17     <span>span3</span>
    18 </body>
    19 </html> 

    div中设置了width,虽然后面空白很大,第二个块也没有接着第一个块出现,故每一排只显示一个div,所以块默认独占一行, 上面说到了span是内嵌不支持宽高,故不显示宽高。

    给span设置margin:

     1 span{height: 200px; 400px; background: blue; margin: 100px;}  

    由网页只看出来span不支持上margin,其实同样也不支持下margin 

  • 相关阅读:
    3.15SQL
    SQL注入
    黑盒渗透测试【转自HACK学习-FoxRoot】
    【学校作业】某项目网络安全技术解决方案
    小米手环4使用半年后的测评报告
    GKCTF赛后复盘
    RCTF赛后复盘
    【课堂笔记】常见漏洞总结
    原型链污染问题的研究
    CTF之Web常见题型总结
  • 原文地址:https://www.cnblogs.com/skylangjitianya/p/9220139.html
Copyright © 2011-2022 走看看