在学习HTML和CSS的最开始的时候,大家可能都有一个疑问,为什么
标签和
标签的使用的时候,有的可以在一行显示,而有的却不可以,我们来简单的探讨下
inline 行标签
在HTML中给我们提供了一些行标签,这里给大家列举几个常见的 行标签 比如 span,i,a,b等等,这些都是大家经常用到的。
行标签的使用相对于块标签来说,可能在开发中使用的少一些,但是它的一些特性还是需要我们掌握的,这里咱们先来看下它的特点:
- 同排序跟显示,遇到父级边界换行,这个很好理解,行标签在同一排可以同时显示,直到遇到父级标签的边界才会换行。
- 不支持宽高,内容撑开高度,给行便签设置宽度和高度是没有办法来显示的,这个也是行标签的特向。
- 不支持上下外边距,根据上一点我们可以知道行标签是没有办法设置特定的宽度和高度的,所有显而易见,也没有上下的外边距。
- 不正常显示上下内边距,这个需要大家注意下,不是不可以显示,而是不正常显示,容易造成标签内内容的一些影响。
block块便签
块标签在我们的开发中可以说是根基,有人有网站就是一个一个的盒模型搭建出来的,而盒模型大多数就是我们块便签div,以及一些相关的特性,我们常用到的块标签也有很多,比如div,p,h1~h6,pre,ol,ui,li等等,咱们来看下块标签的一些特点:
- 首先呢,块标签是独占一行的,这个也是和行标签形成一个对比,当然,这个也是我们布局所必须的,因为只有这样咱们再布局的时候才可以完成简单的从上到下,以此布局。
- 块标签的默认宽度是父亲的宽度,而高度是0,由子级标签来撑开,当然在很多时候,我们也会给块便签来添加一些浮动,定位,来完成我们的整体布局,但是这些的前提是,我们也会给块标签一个宽度和高度,以便我们更好的完成布局。
display的一些用法
在我们的学习和之后的工作中,可能需要行标签独占一行,也可能需要块标签同行显示,这里就需要用到我们的一个属性了,display:inline-block;
它可以将我们的标签转换为行内块元素,即这个标签同时拥有行内元素和块元素的属性,根据我们的需要来进行设置即可。