在css中元素基本可以分为三类
- 块状元素
- 行内元素
- 行内块元素
1. 块状元素
<div> <ul> <ol> <p> <h> <table> <form>
以上这些标签都属于块状元素
特点:
- 独占一行
- 可以设置宽高,如果不设置宽度,默认是父级的100%宽度
2. 行内元素
<a> <span> <em> <strong> <label>
以上这些标签都属于行内元素
特点:
- 在一行内显示
- 不能设置宽高,默认的宽高为文本内容占据的宽高
3.行内块元素
<input> <img>
以上这些标签都属于行内块元素
特点:
- 在一行内显示
- 可以设置宽高
display属性
我们可以在通过以下display属性给不同类型元素转换为别的类型元素
- 块级元素 display:block;
- 行内元素 display:inline;
- 行内块元素 display:inline-block;
- 隐藏元素 display:none;
例:
div{
display:inline-block; //这样我们就可以把<div>标签转换为行内块元素
}