关于块级元素、内联元素、inline-block的特性
作者:邹阳 | 发表于:2016-04-15 13:45:20
阅读量:(378) | 所属栏目:编程
“块级元素”译为 block level element,“内联元素”译为 inline element。
一、块级元素在浏览器显示时,通常会以新行来开始(和结束)。可以设置宽高
1、在没有设置宽高的时候,默认撑满一行。
2、默认独占一行。
3、支持所有css命令
例子:<h1>, <p>, <ul>, <table>
二、内联元素在显示时通常不会以新行开始。 不能设置宽高,但是内联元素有一部分特例,称为可置换元素,可设置宽高,如上margin讲解里有解释。
1、宽高由内容撑开
2、不支持宽高
3、一行上挨着显示多个内联元素
4、不支持上下的margin
5、代码换行被解析
例子:<b>, <td>, <a>, <img>
代码换行会被解析为一个空格
三、inline-block:同时具有快、内联的特性:
1、在一行挨着显示
2、支持宽高
3、没有宽度时,内容撑开宽度
例如给<a>设置,让其一行显示,制作按钮
一、块级元素在浏览器显示时,通常会以新行来开始(和结束)。可以设置宽高
1、在没有设置宽高的时候,默认撑满一行。
2、默认独占一行。
3、支持所有css命令
例子:<h1>, <p>, <ul>, <table>
二、内联元素在显示时通常不会以新行开始。 不能设置宽高,但是内联元素有一部分特例,称为可置换元素,可设置宽高,如上margin讲解里有解释。
1、宽高由内容撑开
2、不支持宽高
3、一行上挨着显示多个内联元素
4、不支持上下的margin
5、代码换行被解析
例子:<b>, <td>, <a>, <img>
代码换行会被解析为一个空格
三、inline-block:同时具有快、内联的特性:
1、在一行挨着显示
2、支持宽高
3、没有宽度时,内容撑开宽度
例如给<a>设置,让其一行显示,制作按钮