HTML-行内元素块级元素
Posted natsu-cc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-行内元素块级元素相关的知识，希望对你有一定的参考价值。
前言：
html中元素大多数都是块级元素或行内元素。《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。
定义：
块级元素：
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
行内元素：
行内元素只占据它对应标签的边框所包含的空间。
区别：
- 块元素，总是在新行上开始；内联元素，和其他元素在一行；
- 块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
- 块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。
特点：
块级元素：
- 总是在新行上开始，占据一整行；
- 高度，行高以及外边距和内边距都可控制；
- 宽带始终是与浏览器宽度一样，与内容无关；
- 可以容纳内联元素和其他块元素。
内联元素：
- 和其他元素都在一行上；
- 高度，行高及外边距和内边距部分可改变；
- 宽度只与内容有关；
- 行内元素只能容纳文本或者其他行内元素；
- 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用；
常见的元素：
块级元素：
- address - 地址
- blockquote - 块引用
- center - 举中对齐块
- dir - 目录列表
- div - 常用块级容易，也是css layout的主要标签
- dl - 定义列表
- fieldset - form控制组
- form - 交互表单
- h1 - 大标题
- h2 - 副标题
- h3 - 3级标题
- h4 - 4级标题
- h5 - 5级标题
- h6 - 6级标题
- hr - 水平分隔线
- isindex - input prompt
- menu - 菜单列表
- noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
- noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
- ol - 排序表单
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
行内元素（内联元素）：
- a - 锚点
- abbr - 缩写
- acronym - 首字
- b - 粗体(不推荐)
- bdo - bidi override
- big - 大字体
- br - 换行
- cite - 引用
- code - 计算机代码(在引用源码的时候需要)
- dfn - 定义字段
- em - 强调
- font - 字体设定(不推荐)
- i - 斜体
- img - 图片
- input - 输入框
- kbd - 定义键盘文本
- label - 表格标签
- q - 短引用
- s - 中划线(不推荐)
- samp - 定义范例计算机代码
- select - 项目选择
- small - 小字体文本
- span - 常用内联容器，定义文本内区块
- strike - 中划线
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
- tt - 电传文本
- u - 下划线
- var - 定义变量
可变元素（根据上下文语境决定该元素为块元素或者行内元素）
- applet - java applet
- button - 按钮
- del - 删除文本
- iframe - inline frame
- ins - 插入的文本
- map - 图片区块(map)
- object - object对象
- script - 客户端脚本
行内元素和块级元素的转换：
display：
- 行内元素 display:inline
- 块级元素 display:block
- 行内块元素 display:inline-block
- 行内元素转换块级元素 display:block
- 块级元素转换行内元素 display:inline
float：
若设置行内元素 float:left/right，则该行内元素转换为块级元素 ，且具有浮动特性。
position：
若为行内元素进行定位，position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。
以上是关于HTML-行内元素块级元素的主要内容，如果未能解决你的问题，请参考以下文章