html 图片是块元素吗,关于HTML的行内元素和块状元素

行内元素对于Margin无响应：

行内元素不响应垂直方向的Margin属性，水平方向响应(这个或许就是行内的定义)。

建议：避免对行内元素使用Margin的所有属性，因为严格地来说是Margin是盒子模型的对外属性，是一个布局属性。如果一定需要实现左右缩进效果可以使用padding、文本缩进以及其他效果实现；

行内元素对于垂直方向Padding、Border拥有相应，但是响应不统一：

在IE9和火狐中，就有着截然不同的响应方式，更别说是IE的低端版本，因此绝对不使用行内元素垂直方向的Padding属性。Border也需要谨慎使用，绝大多数情况同样不推荐使用，宁愿不要边框效果，通过text-decoration属性去渲染这样就不会出现问题。

下面说下IE9和FF下对于上面的两个属性不同的响应方式。

在IE9下，这里吐槽下IE系列没有一个浏览器可以算的上好的浏览器，至少从5.5以后都是垃圾作品。

在IE9下，我仅仅针对只有一行的情况下进行讨论。假设是

的标签，此时a元素垂直方向的Padding和Border属性会对a元素在行高属性处理上产生影响。具体情况是这样的：

55555555.......研究数据丢失呀。回忆了一下，当时得出的结论是行内元素关于垂直方向的问题请使用line-height属性在处理，使用line-height属性时也请尽量确保该数值相较与font-size足够大(1.2倍应该足够)。另外，关于垂直方向的对齐可以通过base-line属性进行简单处理。

小结论：inline不响应垂直margin,padding(有但请避免), width, height, max/min width/height 等属性声明。

正文：

block元素的特点：

* 总是另起一行开始；

* 高度，行高以及顶、底边距都可控制；

* 宽度缺省是它所在容器的100%，除非设定一个宽度。(100%是指撑满容器，因为考虑margin、padding元素宽度可能不到100%)

inline元素的特点：

* 和其它元素都在一行上；

* 高度(行高有影响，但是不影响盒子模型的content)以及顶、底边距不可改变；

* 宽度就是它所容纳的文字或图片的宽度，不可改变(自适应宽度，不可设定)。

块级元素的分类

块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。

一.结构化块状元素

这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。

主要的结构化块状元素

1. 、

• 、

支持结构化的元素

、、、、、、、、

二.终端块状元素　　这类元素用于从结构转向内容，它们拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。

终端块状元素

...

、

、

、、

、

三.多目标块状元素

所谓多目标指的是可自由的扩展或嵌套文档的结构，也可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

多目标块状元素既可以包含块状元素，也可以包含内容(文本与行级元素的组合为内容)，但不能同时包含两者(实现上其实是可以的，但是为了文档结构清晰，请确保两者没有同时包含，这个是推荐方式)。

多目标块状元素

、、、 、

XHTML块级元素有哪些呢？(常见的)

◎ address – 地址

◎ blockquote – 块引用

◎ dir – 目录列表

◎ div – 常用块级

◎ dl、ul、ol – 定义列表、非排序列表、排序表单

◎ fieldset – form控制组

◎ h1-6 – 大标题、副标题、 3-6级标题

◎ hr – 水平分隔线

◎ p – 段落

◎ pre – 格式化文本

◎ table – 表格

XHTML行内元素有哪些呢？ (常见的)

◎ a – 锚点

◎ abbr – 缩写

◎ b、i、u、em – 粗体、斜体、下划线、强调

◎ br – 换行

◎ cite – 引用

◎ img – 图片

◎ input – 输入框

◎ label – 表格标签

◎ select – 项目选择

◎ span – 常用内联容器，定义文本内区块

◎ textarea – 多行文本输入框

分享到：更多