HTML,CSS行便签和块便签的杂谈

在学习HTML和CSS的最开始的时候,大家可能都有一个疑问,为什么

标签和 标签的使用的时候,有的可以在一行显示,而有的却不可以,我们来简单的探讨下

inline 行标签

在HTML中给我们提供了一些行标签,这里给大家列举几个常见的 行标签 比如 span,i,a,b等等,这些都是大家经常用到的。
行标签的使用相对于块标签来说,可能在开发中使用的少一些,但是它的一些特性还是需要我们掌握的,这里咱们先来看下它的特点:
在这里插入图片描述

  1. 同排序跟显示,遇到父级边界换行,这个很好理解,行标签在同一排可以同时显示,直到遇到父级标签的边界才会换行。
  2. 不支持宽高,内容撑开高度,给行便签设置宽度和高度是没有办法来显示的,这个也是行标签的特向。
  3. 不支持上下外边距,根据上一点我们可以知道行标签是没有办法设置特定的宽度和高度的,所有显而易见,也没有上下的外边距。
  4. 不正常显示上下内边距,这个需要大家注意下,不是不可以显示,而是不正常显示,容易造成标签内内容的一些影响。

block块便签

块标签在我们的开发中可以说是根基,有人有网站就是一个一个的盒模型搭建出来的,而盒模型大多数就是我们块便签div,以及一些相关的特性,我们常用到的块标签也有很多,比如div,p,h1~h6,pre,ol,ui,li等等,咱们来看下块标签的一些特点:

  1. 首先呢,块标签是独占一行的,这个也是和行标签形成一个对比,当然,这个也是我们布局所必须的,因为只有这样咱们再布局的时候才可以完成简单的从上到下,以此布局。
  2. 块标签的默认宽度是父亲的宽度,而高度是0,由子级标签来撑开,当然在很多时候,我们也会给块便签来添加一些浮动,定位,来完成我们的整体布局,但是这些的前提是,我们也会给块标签一个宽度和高度,以便我们更好的完成布局。
    在这里插入图片描述

display的一些用法

在我们的学习和之后的工作中,可能需要行标签独占一行,也可能需要块标签同行显示,这里就需要用到我们的一个属性了,display:inline-block;
它可以将我们的标签转换为行内块元素,即这个标签同时拥有行内元素和块元素的属性,根据我们的需要来进行设置即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值