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

文章目录

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





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



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

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




二、块级元素




1、块级元素简介


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

  • 标题标签 :

    ,

    , … ,
    ;

  • 段落标签 :

    ;

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

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


    2、块级元素特点


    块级元素 特点 :

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

    3、文字块级元素


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

    • 段落标签 :

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

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

    4、代码示例


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

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

    标题

    显示效果 :

    在这里插入图片描述

相关内容

热门资讯

谁能给我发几个好看的穿越文,女... 谁能给我发几个好看的穿越文,女主要聪明点的,还有请给我发下《蛇蝎皇后》这篇小说我有比较多的小说,但是...
网络语叫粉丝是什么意思? 网络语叫粉丝是什么意思?'粉丝’是英语‘Fans’(狂热、热爱之意,后引申为影迷、追星等意思)的音译...
你们希望柯南的最后大结局是新兰... 你们希望柯南的最后大结局是新兰永恒吗肯定滴啊,如果新兰都不永恒了谁还相信爱情、、、 上次预告还有五年...
出师表朗诵 出师表朗诵出师表的朗诵应该配上什么音乐,或者歌曲(最好是现代的),给点建议!新三国片头曲吧试试王宗贤...
《率土之滨》平民新手开局怎么玩... 《率土之滨》平民新手开局怎么玩?前期开荒核心是完美的利用每一点资源,把他变为你前期最有利的抢地武器!...
咒怨里面的白老妇[那个鬼 的扮... 咒怨里面的白老妇[那个鬼 的扮演者是谁?告诉我吧求求你们了 我要是不知道他是活人演的拿篮球的那个老婆...
体验当家的辛苦 体验当家的辛苦自己体会会有灵感的。什么事情还是自己做一下比较真实这样的作文就必须要自己去亲身体会,让...
(只要人物时间地点的正确就能开... (只要人物时间地点的正确就能开启尘封已久的记忆)能解释一下这个是什么含义是一个女的写给我的是表白吗大...
科学和迷信你们信哪个?不能解释... 科学和迷信你们信哪个?不能解释的东西事物算得上是迷信吗迷信我是不会相信的,如果对所谓的科学百分之百的...
请问延世大学韩语教程和标准韩国... 请问延世大学韩语教程和标准韩国语哪本更适合自学?哪本语法更详细,更易于学习。先谢谢啦。你好,标准韩国...
有谁曾经暗恋一个人,很久都没有... 有谁曾经暗恋一个人,很久都没有见到却还是很想念他想就想呗,随自己的意就可以了让她留在心里吧.我也曾暗...
昨天在车上看的碟子,好像是,一... 昨天在车上看的碟子,好像是,一个DJ现场,一个人边唱边喝酒,还互动问题,答完就喝。提问的歌曲有:洪湖...
魔兽世界小白任务和战场问题 魔兽世界小白任务和战场问题去魔兽数据库里找 多玩 嘟牛 这两个网站的 数据库很全 什么任务...
《公主回宫》什么时候开播? 《公主回宫》什么时候开播?已经开播了,祝你愉快.
到底大灰狼和小绵羊是一对,还是... 到底大灰狼和小绵羊是一对,还是和小白兔是一对很显然小绵羊和小白兔是一对
你觉着《他来了请闭眼》中霍建华... 你觉着《他来了请闭眼》中霍建华演技如何?《他来了请闭眼》中霍建华演技很好。霍建华的演技很好,能够表现...
九色神鹿故事? 九色神鹿故事?很久以前,在恒河边上有一只九种毛色的鹿,它那闪闪发光的鲜艳毛色和洁白如雪的美丽鹿角,以...
刘州成坚强的故事 刘州成坚强的故事就是男子汉一点的 刘小美的刘州成他是一个很坚强的人来的.. 一路走来他都是勇敢地走来...
书籍设计的内容简介 书籍设计的内容简介《书籍设计》立足于新世纪中国艺术教育的改革,将艺术理论与技能培训融会贯通,从内容选...
2024年山西中考初二考地理生... 2024年山西中考初二考地理生物吗不考。截止2022年6月1日山西中考除晋中和阳泉两个改革试点区域外...