元素类型

一、XHTML元素分类
根据css显示分类，XHTML元素被分为三种类型:块状元素，内联元素，可变元素

1.块状元素（block element） 

   1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等；

  2）默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。

  3）块状元素都可以定义自己的宽度和高度。 

  4）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

  5）一般来说，块元素如：div、h1其默认的宽度为父元素的宽，高度为零；在设置绝对定位absolute或浮动float后，及脱离文档流，其默认的高度为0，宽度也为0

 

2.内联元素（inline element）（或是行内元素）

1) 常见的内联元素如：a,span,i,em,strong,b,del,等

2) 内联元素的表现形式是始终以行内逐个进行显示；

3) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；

4)内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;如：margin-top，margin-bottom，虽然在页面中可以看到效果，但是下方或上方元素会抢占这部分空间

内联元素不能嵌套块元素，因为浏览器解析的时候会出错；块元素可嵌套其他块元素，如：div（除p以外）

3、可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

4、 元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

1）display属性与属性值 (18个属性值)

属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group....

作用：该属性设置或检索对象元素应该生成的盒模型的类型。

说明：各属性值的作用 

1)Block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。

2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。

3)当元素设置了float属性后，就相当于给该元素加了display:block;属性；

4)Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。img,input属于inline-block。
（只有这一个元素类型支持vertical-align属性,vertical-align：baseline（默认）/top/bottom/middle居中指的是兄弟元素的垂直对齐方式，与父元素无关,）

在一个div中若想让图片img居中，可定义一个高度等于父元素，宽度为零的span，将span设置为vertical：middle;text-align:center

.span_vam{height: 100%;width: 0;display: inline-block;vertical-align: middle;}

此外，也可将父元素的display：table-cell，因为在表格中默认的就是垂直居中

img行内块元素，在一个div中有多个img，默认情况下img左右不会有间隙，上下间隙是由于默认img的vertical：baseline，baseline的位置一般以英文字母X在网页中显示的底部为准，baseline基线与真正的bottom底部之间还有一小段间隙

注：在代码中多个并列的inline-block的元素间换行，在页面中会解析为空格

5)none 此元素不会被显示。

6)list-item:将元素转换成列表。li的默认类型

1、大部分块元素display属性值默认为block，其中li默认值为list-item。

2、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。 

三、置换元素/替换元素 

概念：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素

置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来。

又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。 

非置换元素/不可置换元素 ：HTML中除了可转换元素外，其它都是不可转换元素（即其内容直接表现给用户端例如浏览器）

删除线标签

以下转自：https://www.douban.com/group/topic/4583932/

CSS块元素(block)、内联元素(inline)、可变元素

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。 
　　如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。 
　　你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。 
　　内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。 
　　需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。 
　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。 
　　可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。 


html标签的block、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 - 定义变量 


可变元素 
　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。 
　　◎ applet - java applet 
　　◎ button - 按钮 
　　◎ del - 删除文本 
　　◎ iframe - inline frame 
　　◎ ins - 插入的文本 
　　◎ map - 图片区块(map) 
　　◎ object - object对象 
　　◎ script - 客户端脚本