HTML元素类型

一．Html元素类型

Html元素分为：块元素，内联块，可变元素

也可分为;块元素，内联元素，内联块元素

1， 块元素

Div p

ul ol li dl dt dd 

table tr td 

form

h1~h6

fieldset

hr

块元素的特点：以块的形式显示为一个矩形区域

             默认情况下独占一行，自上而下排列

             块元素可以定义自己的宽高，以及盒模型中的任意属性

             块元素可以作为一个容器来容纳某些块元素和内联元素

             但块级元素不能放在p标签里面

H1~h6，p dt 只能嵌套内联元素

2. 内联元素

   常见的有;span  a 
   
    	strong  b  em I 
    	label 
            br
    	Img
    	Input 
    	select  textarea
   
       内联元素的特点：在一行逐个显示
   
                        没有自己的形状，不能定义宽高，宽高由内容来决定
   
                        可以设置左右内边距和左右外边距,不能设置与高度相关的属性
   
                        内联元素只能嵌套内联元素
   

内联元素------------内联块元素

          常见的有：input  img 
		select    textarea

                 内联块元素具有的特点：1 .在一行中逐个进行显示

                                                      2.可以定义宽高和任意的margin,padding  border

注：vertical-align:只针对于此类型元素有效

可变元素：根据上下文关系来决定元素类型

1 块级元素与块级元素并列，内联与内联并列

2     a标签不嵌套其他a标签

3     lable标签不嵌套其他lable标签

4     form标签不嵌套其他form标签

默认情况下有margin padding border的元素

H1~h6  dd  dl p有默认的margin

Td :有默认的padding

ul ol 有默认的margin padding

input  textarea:有默认的border padding

select: 有默认的 border

注：使用内联元素时任何的回车换行都会给内联元素之间产生一个空格间隔

3.元素类型转换

语法：display：Block / inline / inline-block/none/list-item

display：none和overflow:hidden的区别

display:none是将元素隐藏不可见

overflow:hidden是将溢出部分进行隐藏

display:list-item(将元素转换为Li这种类型，是li的diaplay默认属性值)

注：给元素设置默认display属性值可以让元素再次显示

Float对内联元素和块元素的影响

1.    内联元素设置float后相当于设置了display:block;

2.    块元素设置float后脱离了默认的文档流，在一行显示；如果块元素没有设置宽度，则float设置前宽度为父元素的宽度，float设置后宽度则由内容大小决定

置换元素

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

例如：img标签的src属性不同，决定了在网页中显示的图片不同

非置换元素：

 除了置换元素意外大部分都是置换元素，其内容直接在浏览器显示

首行缩进：text-indent:设置较大的负值时隐藏其文字
加浮动也可以消除元素间的空隙

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

      1. 给元素和表单添加vertical-align:middle属性

      2.或者给表单和元素添加float:

扩展二：去掉input框的外边线

      语法input{  outline : 

none; }