【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
创始人
2024-05-29 10:14:56

文章目录

  • 一、标签显示模式 ( 块级元素 | 行内元素 )
  • 二、块级元素
    • 1、块级元素简介
    • 2、块级元素特点
    • 3、文字块级元素
    • 4、代码示例





一、标签显示模式 ( 块级元素 | 行内元素 )



标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;

  • 块级元素 : div 标签 独占一行显示 , 对应 块标签 ;
  • 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ;




二、块级元素




1、块级元素简介


块级元素 可以 独占一行显示 , 常见的 块级元素 标签 :

  • 标题标签 :

    ,

    , … ,
    ;

  • 段落标签 :

    ;

  • 块标签 :
    ;
  • 列表标签 :
      ,
        ,
      1. ;

    上述标签都会 独占一行显示 ;


    2、块级元素特点


    块级元素 特点 :

    • 独占一行 : 块级元素 会 独占父容器 的一行 , 宽度默认充满父容器 ;
    • 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ;
    • 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ;
    • 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ;

    3、文字块级元素


    特殊的块级元素 : 存放文字内容的 块级元素 , 只能包含文字内容 , 不能包含其它块级元素 ;

    • 段落标签 :

      标签是特殊的 块级元素 , 其中不能包含

      标签 , 只能放文字内容 ;
      • 如果在 p 标签内放置 块级元素 , 会显示错误效果 ;
    • 标题标签 : 标题标签中只能放置文字 , 不能包含
      标签 , 只能放文字内容 ;

    4、代码示例


    代码示例 : 为 div 块级元素 设置 宽度 , 高度 , 上边距 , 背景颜色 , 文字颜色 ; 下面的代码中 ,

    • 为 div 标签设置了 200x100 像素大小 ,
    • 并设置了 2 像素的上边距 ,
    • 块级元素 整体背景设置为了黑色 ,
    • 文字颜色设置成了 绿色 ;
     
    
         块级元素
    
    
    块级元素1
    块级元素2
    文字

    标题

    显示效果 :

    在这里插入图片描述

相关内容

热门资讯

波兰容量市场中电池储能的经济性 2.5GW波兰最新容量竞价支持的新增额定电池容量(计划于2030年交付)每年14.7欧元/kW波兰2...
种田游戏哪些好玩 十大必玩种田... 想要体验宁静又治愈的种田乐趣?本文为你精选十大必玩种田游戏,涵盖模拟经营、田园生活等多类玩法,带你领...
两会结束,国务院立刻行动 全国两会刚刚落幕,3月13日,国务院常务会议便对深入贯彻党中央决策部署,落实政府工作报告安排,围绕全...
“天空地水工”立体监测  黄河... 来源:科技日报科技日报记者 付丽丽 3月的河套平原,春风中仍裹挟着料峭寒意。但随着气温的回升,沉寂一...
“十五五”规划纲要解读来了!未... 昨天(13日),“十五五”规划纲要正式发布,规划纲要的编制有何特点、亮点?对未来五年经济社会发展进行...