HTML学习笔记Day6

一、元素类型

　　1.元素类型分类依据和元素类型分类

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

　　2.块状元素

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

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

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

　　　　4）块状元素严格遵循盒模型规则，即都可以定义padding/border/margin的属性；

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

　　　　注：h1~h6、p标签里面不能再容纳其他块状元素，包括其本身；

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

　　3.内联元素：（inline element称内嵌元素，行内元素，直进式元素等）

　　　　1）任何不是块状元素的可见元素都可以称之为内联元素，常见的内联元素如：a，img，span，input，b，select，i，em，strong，u，del，sub，sup等；

　　　　2）内联元素的表现形式是始终以行内逐个显示的，和文字一样，自左向右排列（默认情况下）

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

　　　　4）内联元素也会遵循盒模型的规则，也可以定义padding、border、margin属性，但部分内联元素需要特殊处理后才能正确显示；

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

　　5.行内块元素

　　　　1）Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行；可直接设置width/height；

　　　　注：（只有这一个元素类型支持vertical-align属性）img，input垂直对齐方式{vertical-align：top/bottom/middle；}

　　6.可变元素

　　7.元素转换{display：none/block/inline/inline-block/list-item/table-cell/table-header-group/table-footer-group该属性规定元素应该生成的盒模型（元素类型）

　　　　none：此元素不会被显示（隐藏该元素）

　　　　block：此元素将显示为块状元素（显示该元素）

　　　　inline：此元素会被显示为行内元素（内联元素）

　　　　inline-block：行内块元素

　　　　list-item：将元素转换为列表格式

　　　　注：HTML中的置换元素与非置换元素

　　　　　　大部分内联元素的元素类型为inline，其中有类特殊的元素：如img，input，select，textarea，button等，他们被称为可置换元素（Replaced element）；他们区别一般inline元素，这些元素拥有内在的尺寸（intrinsic dimensions），他们可以设置width/height属性；他们的性质同设置了display：inline-block的元素一致；

　　　　　　内联元素添加浮动后（float）；自动转成（行内块）元素，块元素加浮动后，体积与内容同宽。