元素分类及display属性

48 阅读1分钟

在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>标签转换为行内块元素
}