块元素简介
块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。
内联元素简介
内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念。内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。
block元素的特点
- 总是在新行上开始;
- 高度,行高以及外边距和内边距都可控制;
- 宽度缺省是它的容器的100%,除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
inline元素的特点
- 和其他元素都在一行上;
- 高,行高及外边距和内边距不可改变;
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其他内联元素
常见块元素(block element)
- 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 – 非排序列表(无序列表)
常见内联元素(inline element)
- 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 – 定义变量
可变元素
- 可变元素由上下文语境来决定是块元素还是内联元素[1] 。
- applet – java applet
- button – 按钮
- del – 删除文本
- iframe – inline frame
- ins – 插入的文本
- map – 图片区块(map)
- object – object对象
- script – 客户端脚本