CSS标签分类(块元素 行内元素 行内块元素)

块标签:div p h1-h6 hr ul ol li dl dd dt form 

            ①支持宽高,自上而下排列

            ②不受空格影响

            ③一般用于其他标签的容器

            ④默认宽度为100%(独占一行)。

行内标签:span i a b strong em sub sup u label br font

             ①不支持宽高(宽高根据内容大小自动撑开),自左向右排列

             ②受空格影响

             ③不独占一行

行内块标签:img  textarea  input

               ①支持宽高,自左向右排列

               ②受空格影响

               ③不独占一行

标签之间的转换

display:inline(转为行内元素)

              inline-block(转为行内块元素)

              block(转为块元素)

              none(隐藏 不显示)

注意:当元素浮动(float)时会转化成行内块元素特点。

  • 19
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中,块元素(block elements)和行元素(inline elements)是用于定义HTML元素的显示类型。它们有以下特点: 1. 块元素(block elements): - 块元素通常独占一行,即占据整行空间。 - 块元素的默认宽度为其父元素的100%。 - 块元素可以设置宽度、高度、内外边距等属性。 - 块元素可以包含其他块元素或行元素。 - 常见的块元素有div、p、h1-h6、ul、li等。 2. 行元素(inline elements): - 行元素不会独占一行,它只占据它自身内容的大小。 - 行元素的宽度由其内容决定,不能设置宽度、高度属性。 - 行元素只能设置水平方向的内外边距,垂直方向无效。 - 行元素不会破坏文本流,可以与其他行元素或文本混合排列。 - 常见的行元素有span、a、strong、em、img、input等。 通过合理使用块元素和行元素,可以实现页面布局、文本排版和样式设计。例如,使用块元素可以将内容分块展示,设置宽度和高度控制元素大小,并通过盒模型设置内外边距;使用行元素可以实现文本内的样式效果,创建链接、加粗文本等。 需要注意的是,块元素和行元素可以通过CSS的display属性进行转换。通过设置display属性为block,可以将行元素转为块元素;通过设置display属性为inline,可以将块元素转为行元素。这种转换可以为页面的灵活排版和样式效果提供更多的可能性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值