内联元素和块级的区分
一般来说,HTML标签可以分为内联元素和块级元素两种,内联元素的别称有很多,如内嵌、行内元素等等。
内联元素的特点
1.和其它元素都在一行上显示。
2.高度、行高、顶外边距及底外边距都不可改变(margin-top、margin-bottom设置无效)。
3.宽的就是字的宽度或者图片的宽度。
块级元素的特点
1.独占一行。
2.高度、行高及内外边距均可改变。
3.可以容纳其它块级元素和内联元素。
常见的内联元素
名称 | 用途 |
---|---|
br | 换行 |
img | 图片 |
input | 输入框 |
label | 表格标签 |
strong | 粗体 |
u | 下划线 |
var | 定义变量 |
常见的块级元素
名称 | 用途 |
---|---|
form | 交互表单 |
div | 常用的块级容器 |
h1~h6 | 标题 |
p | 段落 |
ol | 有序列表 |
ul | 无序列表 |
table | 表格 |
内联元素和块级元素的转换
内联元素—>块级元素
display:block
块级元素—>内联元素
display:inline
还有一个比较特别的就是display:inline-block,这个属性使对象按照行来显示,但可以对其设置高度(具有块级元素的性质)