当前位置:首页 >> 前端

块元素_行内元素_行内块元素的特性和区别

  • 前端
  • 2019-03-22 19:59:01
  • 人已阅读
简介HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换

一、 块元素(block element)

块元素的特性:

1.    独霸一行,总是在新行上开始

2.    宽度缺省是它父级元素的100%,除非设定一个宽度

3.    高度、行高、外边距、内边距都可以设置

4.    可以容纳其他内联元素或者其他块元素

二、行内元素(inline element)

行内元素的特性:

1. 和其他元素都在一行上,遇到父级元素边界会自动换行

2. 高、行高以及内外边距都不可以改变

3. 宽度与内容一样宽,且不可改变

4. 行内元素只能容纳文本或者其他行内元素
对于行内元素,需要注意的是:设置宽度width无效,设置高度无效,可以通过设置line-height来设置,设置margin只有左右有效,上下无效,设置padding只有左右有效,上下无效

行内元素的间距问题:

两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?

1.重设字体

将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释

在两个行内元素之间加入HTML注释,告诉浏览器这中间不是换行也不是空格,而是连接在一起的,这样也可以解决。

三、行内块元素

行内块元素的特性:

1. 元素排列在一行

2. 宽度默认由内容决定

3. 元素间默认有间距

4. 支持宽高、外边距、内边距的所有样式的设置

使用display属性能够将三者任意转换:

display:inline;转换为行内元素

display:block;转换为块状元素

display:inline-block;转换为行内块状元素

Top