【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
创始人
2024-05-29 10:14:56
0次
文章目录
- 一、标签显示模式 ( 块级元素 | 行内元素 )
- 二、块级元素
- 1、块级元素简介
- 2、块级元素特点
- 3、文字块级元素
- 4、代码示例
一、标签显示模式 ( 块级元素 | 行内元素 )
标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;
- 块级元素 : div 标签 独占一行显示 , 对应 块标签 ;
- 行内元素 : span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ;
二、块级元素
1、块级元素简介
块级元素 可以 独占一行显示 , 常见的 块级元素 标签 :
- 标题标签 :
,, … ,; - 段落标签 :
; - 块标签 : ;
- 列表标签 :
;上述标签都会 独占一行显示 ;
2、块级元素特点
块级元素 特点 :
- 独占一行 : 块级元素 会 独占父容器 的一行 , 宽度默认充满父容器 ;
- 大小可控 : 标签 的 高度 , 宽度 , 内边距 , 外边距 可以自定义设置 ;
- 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ;
- 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ;
3、文字块级元素
特殊的块级元素 : 存放文字内容的 块级元素 , 只能包含文字内容 , 不能包含其它块级元素 ;
- 段落标签 :
标签是特殊的 块级元素 , 其中不能包含标签 , 只能放文字内容 ;- 如果在 p 标签内放置 块级元素 , 会显示错误效果 ;
- 标题标签 : 标题标签中只能放置文字 , 不能包含
标签 , 只能放文字内容 ;
4、代码示例
代码示例 : 为 div 块级元素 设置 宽度 , 高度 , 上边距 , 背景颜色 , 文字颜色 ; 下面的代码中 ,
- 为 div 标签设置了 200x100 像素大小 ,
- 并设置了 2 像素的上边距 ,
- 块级元素 整体背景设置为了黑色 ,
- 文字颜色设置成了 绿色 ;
块级元素 块级元素1块级元素2文字标题
显示效果 :
相关内容
热门资讯这个周末邂逅人艺之友 一起“再... 【这个周末#邂逅人艺之友# 一起“再造时光”】5月10日至11日，北京人民艺术剧院联合东城区委区政府...它博会纳新采购节成交额破350... 转自：上观新闻如何通过创新项目为参展商开辟增量新渠道，是TOPS它博会始终关注的核心问题之一。去年T...龙江交投：助力龙江旅游经济由“... 新华信用杭州5月11日电（王思凝）作为2025世界品牌莫干山大会的重要组成部分，以“促消费 树品牌 ...女演员陷“辱华”争议，疑被新剧... 5月10日，女演员李凯馨相关话题连上热搜。日前，一名自称是李凯馨前助理的网友在微博爆料。在其曝光的录...《三餐四季》广东篇今晚开播：食... 每当人们谈到广东，总有一个绕不开的话题——粤菜。在这个美食天堂里，藏着无数让人念念不忘的老味道。央视...既当“护企卫士” 也做“贴心管... 转自：中国警察网从精准打击民营企业内部“蛀虫”到出台相关政策打通惠企服务“最后一公里”，近年来，上海...当事人回应上门做饭月薪2万质疑... 转自：JSTV荔枝视频 【#当事人回应上门做饭月薪2万质...今年秋天，中国将隆重纪念中国人... 来源：新华社2025年5月7日至10日，国家主席习近平应邀对俄罗斯进行国事访问并出席纪念苏联伟大卫国...“下辈子还要做妈妈的女儿” “今天是母亲节，让我们一同重温江西革命史上的那些无私伟大的“革命母亲”。”作者 | 何丹凤题图 | ...政商学界共话中欧合作前景：探索... 经济观察报 记者 陈姗5月9日，在“中欧建交50周年论坛”上，来自中国和欧盟的政治家、商界领袖、名师...王涵：资本市场改革要为创新企业... 炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ 兴业证券股份有限公司...美股巨震后迎来5月魔咒，特朗普... 4月是美股近5年来最动荡的月份。 刚过去的4月是美股近5年来最动荡的月份。华尔街股谚有“卖在五...为什么选出美国籍教皇？梵蒂冈消... ► 文 观察者网 陈思佳当地时间5月8日，来自美国的枢机主教罗伯特·普雷沃斯特当选第267任天主教罗...母亲节 | 有爱莫迟 转自：人民政协报母亲节又到了！想想母亲离开我已经五年了，思念之情油然而生。母亲犹如一朵永远不败的鲜花...他们围在一起给特朗普打电话，随... 乌克兰外交部长瑟比加10日下午在社交媒体发文说，乌方准备自12日起实施至少30天的全面无条件停火。瑟...山西鹏飞集团有限公司等13家企... 新华信用杭州5月11日电（徐淑明）作为2025世界品牌莫干山大会的重要组成部分，以“促消费 树品牌 ...再官宣丨飞天之夜黄小西音乐盛典... 惊喜不断 “乐”享不停！继「黄小西」T次方音乐与艺术节及首批阵容官宣后，我们再次带来重磅消息：由总台...中芯国际：指引大“翻车”，“国... 中芯国际（0981.HK/688981.SH）北京时间2025年5月8日晚，港股盘后发布2025年度...平谷快递小哥听到微弱呼救声，被... 转自：北京日报客户端“大姐，您别怕，我马上报警救您出来！”5月5日下午3点40分，顺丰快递小哥高海在...男子得物买52瓶古驰香水包装是... 转自：河南商报 【#男子得物买52瓶古驰香水包装是假的#... - 列表标签 :