学习目标1.元素类型分类基础与元素类型分类2.元素类型转换3.inline-block元素类型应用4.替换与非替换的概念与应用元素案例一、元素类型分类依据及元素类型分类根据css显示分类，XHTML元素分为三种类型：块元素、行内元素1、块元素（blockelement）a)网页中的块元素显示在块的形式，所谓块就是将元素显示为一个矩形区域，常用的块元素包括div、dl、dt、dd、ol、ul、li、(h1-h6)、p、form、hr,table,tr,td等；B)默认情况下，块元素会占一行。通俗地说，两个相邻的块元素不会并排出现；默认情况下，块元素会自动从上到下排列。C)块元素可以定义自己的宽度和高度。d)块元素一般用作其他元素的容器，可以容纳其他行内元素和其他块元素。我们可以把这个容器比作一个盒子注意：p标签是块元素，但是它只能作为内联元素的容器；2、行内元素（或行内元素）A)常见的行内元素如：a、span、i、em、strong、b、u、del、s、input、img、br、sub、sup等B)的内联元素的表达式总是被inline一个一个地显示；C)内联元素没有自己的形状，不能定义它的宽高。它的显示宽度和高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现一个矩形；D)行内元素也会遵循盒模型的基本规则。例如可以定义padding、border、margin、background等属性。改变一个元素的默认显示类型1）显示属性和属性值（18个属性值）属性值：block/inline/inline-block(img,input)/none/list-item(li)/table-row/table（表格）/表格单元格（td）/表格标题组（thead）/表格页脚组（tfoot）；功能：块元素和行内元素之间的转换。说明：各个属性值的作用1)Block块显示：类似于在元素后加一个换行符，也就是说其他元素不能在它后面并排显示。或者只是让元素垂直显示。2）inline行内显示：删除元素后的换行符，多个元素可以在一行中并排显示。或者只是让元素水平显示。3）inline-block块显示：元素的内容显示在一个块中，该行中的其他元素显示在同一行。(该元素类型支持vertical-align属性)img,input4)none:隐藏元素，该元素不会显示。5）list-item：将元素转换成列表。li的默认类型。6）当元素设置了float属性时，相当于给元素加上了display:block；注意：A.大部分块元素的display属性默认值为block，li列表默认值为list-item。B、大部分内联元素的display属性值默认为inline，img和input默认为inline-block。3.inline-block元素类型的应用inline-block块状元素显示：元素的内容以块的形式显示，该行中的其他元素显示在同一行。(该元素类型可以支持vertical-align属性)img,inputvertical-alignment{vertical-align:top(元素的顶部与行中最高元素的顶部对齐)/bottom元素的底部为与行中最低元素的底部对齐Alignment/middle/sub（与父元素的下标字体基线对齐）/super（与父元素的上标字体基线对齐）/text-top（与父元素的字体顶部对齐）)/text-bottom（与父元素字体底部对齐）;}四、替换元素和非替换元素的概念扩展：替换元素/替换元素的概念：一种内容不受CSS视觉格式化模型控制，而CSS渲染模型并没有考虑这个内容的渲染，并且元素本身一般都有固有尺寸（宽，高，纵横比）的元素。这些元素通常没有实际内容，即空元素。替换元素是浏览器根据元素的属性和属性值来决定元素的具体内容。显示内容。大多数替换元素的元素类型都是行内块；它们被称为替换元素。HTML中的img和input是替换元素。例如，浏览器会根据img标签的src属性的值来读取并显示图片信息。再比如根据input标签的type属性来判断是显示输入框还是单选按钮。Non-replaceableelements/不可替换元素：除了HTML中的可替换元素外，其他元素都是不可替换元素（即它们的内容直接显示给浏览器等用户终端）
