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

原创 2018年04月16日 12:19:16

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

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 都会使得原先的行内元素变为块级元素。

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

简要描述行内元素和块级元素的区别。

块级元素的前后都会自动换行,如同存在换行符一样。默认情况下,块级元素会独占一行。例如,、、都是块级元素。在显示这些元素中间的文本时,都将从新行中开始显示,其后的内容也将在新行中显示。行内元素可以和其他...
  • u012396955
  • u012396955
  • 2016-12-28 16:42:05
  • 1139

盒子模型,块级元素和行内元素特性与区别

盒模型到底是什么? 盒模型是CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提...
  • Mr_yq
  • Mr_yq
  • 2017-11-28 22:22:10
  • 175

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

在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行; ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳内联元素和其他块元...
  • fangqun663775
  • fangqun663775
  • 2016-12-29 18:04:54
  • 719

HTML 行内元素和块级元素 全解析

行内元素(inline elements)和块级元素(block-level elements) 行内元素:a、abbr、acronym、b、big、br、cite、code、dfn、em、font、...
  • QQ80583600
  • QQ80583600
  • 2017-04-08 16:35:24
  • 632

说下行内元素和块级元素的区别?行内块元素的兼容性使用?

行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常...
  • shengming0302
  • shengming0302
  • 2017-07-09 15:32:11
  • 1990

HTML学习之块级元素和行内元素的特征和区别(一)

这几天在学习HTML,这里总结一下块级元素和行内元素的特征和区别,本文也是来自于其他同行的一些文章,在这里感谢一下那些作者,下面先把这些原文粘贴出来 http://www.cnblogs.com/J...
  • liuying1802028915
  • liuying1802028915
  • 2017-10-13 10:18:52
  • 493

HTML 行内元素 与 块级元素

行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素...
  • qingyafan
  • qingyafan
  • 2016-08-15 23:38:22
  • 5727

CSS块级元素与行内元素(内联元素)的区别和联系

块元素是一个元素,占用了全部宽度,在前后都是换行符。 内联元素只需要必要的宽度,不强制换行。其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素,能...
  • JimTrency
  • JimTrency
  • 2017-03-28 19:56:15
  • 601

常用的块级元素(block)、行内元素(inline)以及行内块元素(inline-block)的解析

块级元素、行内元素以及行内块元素的区别
  • cc18868876837
  • cc18868876837
  • 2017-09-22 10:41:01
  • 850

html5行内元素和块级元素介绍

块级元素列表定义地址定义表格标题定义列表中定义条目定义文档中的分区或节定义列表定义列表中的项目定义一个框架集创建 HTML 表单定义最大的标题定义副标题定义标题定义标题定义标题定义最小的标题创建一条水...
  • lvyuan30276
  • lvyuan30276
  • 2016-09-28 21:30:36
  • 1225
收藏助手
不良信息举报
您举报文章:块级元素与行内元素的区别
举报原因:
原因补充:

(最多只允许输入30个字)