• 常见标签


    块元素和内嵌元素

    块的特征:

    • 默认独占一行
    • 没有宽度时,默认撑满一行
    • 支持所有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 

  • 相关阅读:
    关闭ThinkPHP Runtime Log
    Robots协议的写法
    Getif工具获取 交换机的OID/Zabbix设置
    命令方式启动 vmware 虚拟机
    wireshark 抓包使用教程
    Sniffer 交换机端口抓包
    H3C 开启ssh/snmp
    Apache Superset BI
    洛谷5588 小猪佩奇爬树
    luogu5536 核心城市
  • 原文地址:https://www.cnblogs.com/skylangjitianya/p/9220139.html
Copyright © 2020-2023  润新知