标签：img 元素 H5 类型 inline border display block

元素类型

• 块状元素　　

1 display：block；

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

• 行内元素

1 　　　display：inline；

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

• 可变元素　

1   display：inline-block；

 

　　在一行显示可以设置宽高 也可以设置padding/border/margin 　　img input 　　属性vertical-alin

• 元素类型的转换

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

 

 

• 素类型的应用

1 图片垂直水平于div  
2 　　给div{
3     　　　　行高=高度text-align：center
4 　　　　}
5 
6 　　给img{
7    　　 　　vertical-align：middle；
8 　　　　}

 

• 解决图片3px问题两种

• 　　第一种 

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

 

• 　　第二种

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

• 置换元素

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

• 非置换元素 

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

标签：img,元素,H5,类型,inline,border,display,block
来源： https://www.cnblogs.com/YiShuizhou/p/14655143.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。