H5学习笔记6 元素类型 元素类型应用

元素类型

• 块状元素　　

display：block；

　  独占一行 可以嵌套任何元素 （p只能嵌套行内元素） text-align和margin：0auto；只能给块元素设置

• 行内元素

　　　display：inline；

　　 在一行显示 不可以设置宽高 不配设置上下padding/border/margin

 

• 可变元素　

  display：inline-block；

 

　　在一行显示可以设置宽高 也可以设置padding/border/margin

　　img input

　　属性vertical-alin

• 元素类型的转换

display：block；转换为块状元素
display：inline；转换为内联/行内元素
display：inline-block；转换为行内块元素
display：none； 元素消失不占位置
display:list-item; li的默认值

 

 

• 素类型的应用

图片垂直水平于div  
　　给div{
    　　　　行高=高度text-align：center
　　　　}

　　给img{
   　　 　　vertical-align：middle；
　　　　}

 

• 解决图片3px问题两种

• 　　第一种 

img{
    vertical-align：top;border:0;；
}

 

• 　　第二种

1 img{
2     display：block；border：0；
3     图片转成块元素居中 直接用margin：0 auto；
4 }

• 置换元素

　　　　可以大概理解为：不设置元素大小时它自己有默认的大小 比如 input img 他们其实自带边框（img现在看不见了）

• 非置换元素 

 　　　　除了置换元素都是非置换元素 例如 div span。。。