元素类型及其转换

一、html元素类型

html元素分为两大类：块元素和内联元素(行内元素);

注：也可以将html元素这样分类：块元素，内联元素，内联块元素

1.块元素

常见块元素：div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,fieldset,hr

块元素特点：

a) 块元素以块的形式显示为一个矩形区域，默认不设置宽度时，继承父元素的宽度

b) 默认情况下，块元素独占一行，自上而下排列，相邻块元素不会出现并排显示的现象

c) 块元素可以定义自己的宽度和高度，以及盒模型中任意的margin,padding,border

d) 块元素可以作为一个容器容纳其他的块元素和内联元素

2.内联元素(行内元素)

常见内联元素：a,span,strong,b,em,i,img,input,select,textarea,br,iframe,label

内联元素特点：

a) 内联元素在一行逐个进行显示

b) 内联元素不能定义宽度和高度，宽高由里面内容决定

c) 内联元素设置与高度相关的属性是没有效果的，如

margin-top,margin-bottom,padding-top,padding-bottom,line-height

d) 内联元素可以设置左右内边距和外边距

e) 内联元素只能嵌套内联元素，不要嵌套块元素

常见内联块元素：img,input,select,textarea

内联块元素特点：

a) 即具有内联元素特点，在一行逐个进行显示

b) 又具有块元素的特点，可以定义宽高及任意margin,padding,border

注：vertical-align属性只针对内联元素(行内元素)设置有效

注：默认有margin或padding或border的元素

body 默认margin

h1~h6 默认margin

p 默认margin

ul,ol 默认margin和padding

dl,dd 默认margin

input 默认padding和border

select 默认border

textarea 默认padding和border

td 默认padding

二、元素类型转换

语法：display:block|inline|inline-block|none|list-item;

1.display:block;

将元素转换为块元素，是大部分块元素的默认display属性值

2.display:inline;

将元素转换为内联元素，是内联元素(例如a,span)的默认display属性值

3.display:inline-block;

将元素转换为内联块元素，是内联块元素(例如img,input)的默认display属性值

4.display:none;

将元素隐藏不可见

注：如果需要元素再次显示，设置除none以外的其他属性值即可

★ display:none;和overflow:hidden;的区别

display:none;是整个元素隐藏不可见，不管是否有溢出

overflow:hidden; 是溢出部分隐藏不可见，没有溢出的部分正常显示

5.display:list-item;

将元素转换为列表项这种类型，是li的默认display属性值

注：float对块元素的影响：

给块元素设置float后，会脱离默认文档流，在一行逐个进行显示。

如果默认情况下，块元素没有设置宽度，float后，宽度将由内容撑开

注：float对内联元素的影响

给内联元素设置float后，就隐性的转换为了块元素，原本空格，回车换行符所占据的空间也会消失

三、置换元素和非置换元素

1.置换元素(替换元素)

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

img标签的src属性值不同决定了在网页中呈现的图片内容不同

input标签的type属性值不同决定了在网页中呈现的表单元素类型不同

常见置换元素：img,input,textarea,select,object

2.非置换元素

除了置换元素，大部分html元素都是非置换元素，其内容直接显示在网页中

扩展：表单元素行高不一致，解决方案如下：

方案一：给表单元素添加一致的vertical-align属性值

方案二：给表单元素添加float属性

扩展：去掉表单元素的外边框

语法：input{outline:none;}

扩展：图片默认有空隙，解决方案：

方案一：img{float:left;}

方案二：img{display:block;}

方案三： img{vertical-align:bottom;}