块级元素与行内元素的区别

更多内容,欢迎关注微信公众号“让知识成为资产”

HTML中元素大多数都是块级元素或行内元素。
理解块级元素和行内元素是理解CSS浮动定位的基础。

含义及特点

行内元素(inline element)——也叫做内联元素,只占据它对应标签的边框所包含的空间。
特点——
- 和其他元素都在同一行;
- 高、行高及外边距和内边距不可改变;
- 宽度就是它的文字和图片的宽度,不可改变;
- 内联元素只能容纳文本或者其他内联元素。

块级元素(block element)——块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。
特点——
- 总是在新行上开始;
- 高度、行高以及外边距和内边距都可控制;
- 宽度默认是它容器的100%,除非设定一个宽度;
- 块级元素可以容纳内联元素和其他块级元素。

行内块状元素(inline-block element)——综合了行内元素和块状元素的特性,但是各有取舍。
特点——
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右

区别

  1. 行内元素与其他元素在同一行;块级元素独占一行。
  2. 行内元素,只能容纳文本或其他内联元素;块级元素,能容纳其他块级元素或者内联元素。
  3. 行内元素中宽度(width)、高度(height)、内边距(padding)、外边距(margin)不可改变; 块级元素中宽度、高度、内边距、外边距可以设置。

常见的行内元素和块级元素

常见的行内元素——

  • a
  • span
  • img
  • input
  • select
  • strong

常见的块级元素——

  • div
  • p
  • ul
  • ol
  • li
  • h1~h6
  • form
  • table

行内元素和块级元素之间的转换

diplay

  • 块级元素默认display:block; 行内元素默认为display:inline; 行内块元素默认为display:inline-block;
  • display:none; 不显示该元素,也不会保留该元素原先占有的文档流位置;
  • display:block; 转换为块级元素;
  • display:inline; 转换为行内元素;
  • display:inline-block; 转换为行内块级元素。

float
当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。

position
当为行内元素进行定位时,position:absolute 与 position:fixed 都会使得原先的行内元素变为块级元素。

更多内容,欢迎关注微信公众号“让知识成为资产”

阅读更多

没有更多推荐了,返回首页