XHTML元素类型

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 的大多数元素是不可替换元素，即其内容直接表现在客户端（如浏览器）。