XHTML元素分类

依据css显示状态，XHTML元素被分为
三种类型：块状元素，内联(行内)元素，可变元素。

块状/块级元素（block element）

三大特点：

1.默认状况下，块状元素占一行，两个相邻块状元素不会并列显示；默认状况下，块状元素会按程序从上到下排列。

2.块状元素能够定义宽度和高度。

3.块状元素个别作为其余元素的容器，开始标签和完结标签之间能够嵌套内联元素和块状元素。一个块级元素能够看作一个盒子，盒子里能够装其余的物件。

  • 罕用块级元素：

    • div--最罕用的块级元素
    • dl--和dt-dd 搭配应用的块级元素
    • form--交互表单
    • h1-h6--大题目
    • ol--有序列表
    • p--段落
    • ul--无序列表
    • fieldset--表单字段集
    • colgroup-col--表单列分组元素
    • table-tr-td--表格及行-单元格

内联元素/行内元素（inline element）

三大特点：

1.一行能够显示多个内联元素

2.内联元素不能定义宽和高,它的宽度、高度由元素内的内容的高度和宽度决定。

3.内联元素也会遵循盒模型根本规定，能够定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top/bottom;margin-top/bottom;)

  • 罕用行内元素

    • a –-超链接（锚点）
    • b -- 粗体(不举荐)
    • br -- 换行
    • i -- 斜体
    • em -- 强调
    • font -- 字体设定（不举荐）
    • img -- 图片
    • input -- 输入框
    • label -- 表单标签
    • span -- 罕用内联容器，定义文本内区块
    • strong -- 粗体强调
    • sub -- 下标
    • sup -- 上标
    • textarea -- 多行文本输入框
    • select -- 项目选择

其余元素

如：行内块级（inline-block），列表项（list-item）

XHTML元素类型转换

  • 通过css的display属性来扭转默认的显示类型

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

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

作用：该属性设置或检索元素生成的类型。

  • block：块状显示，相似在元素前面增加换行符，其余元素不能在其后并列显示。(将元素转为块状元素，使该元素领有块状元素的特点；)
  • inline：内联显示，多个元素能够在一行内并列显示。（元素转换为内联元素）
  • inline-block：行内块级元素显示，一行显示多个、能够设置宽高。
  • none：暗藏元素，不占地位。
  • list-item:将元素转换成列表项。

1.当元素设置了float属性后，就相当于给该元素加了display:inline-block;申明（设置宽高、一行显示多个）。

2.大部分块元素display属性值默认为block，其中列表li的默认值为list-item。

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

内联元素/行内元素在容器中垂直居中

<!--html--><div>    <p></p>    <span></span></div><!--css-->div {    width: 200px;    height: 200px;    text-align: center;    background: pink;}p {    display: inline-block;    width: 40px;    height: 40px;    vertical-align: middle;    background: green;}span {    vertical-align: middle;    width: 0;    height: 100%;    display: inline-block;}三个条件：1：给父元素加上text-align:center;2：以后元素转成行内块元素（display:inline-block;）再设置vertical-align:middle;3：在以后元素的前面加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;

文字在容器中垂直居中

<!--css-->div {    width: 200px;    height: 200px;    text-align: center;    line-height: 200px;}<!--html--><div>    <p>测试测试</p></div>要害：text-align: center;line-height: 200px;line-height的值放弃和height统一。

置换元素(行内可置换元素)与非置换元素

1.置换元素：

浏览器依据元素的标签和属性，来决定元素的具体显示内容。

例如：
浏览器会依据img标签的src属性的值来读取图片信息并显示进去，而如果查看(x)html代码，则看不到图片的理论内容，input标签的type属性来决定是显示输入框，还是单选按钮等； (x)html中的img、input、textarea、select都是置换元素,这些元素往往没有理论的内容，即是一个空元素。
  • 置换元素在其显示中生成了框，这也就是有的内联元素（img,input）可能设置宽高的起因。

2.不可替换元素（非置换元素）:

(x)html 的大多数元素是不可替换元素，即其内容间接体现在客户端（如浏览器）。