刘家姥姥

元素分类

在CSS中，HTML的标签元素大体被分为三类：块状元素、内联元素（又叫行内元素）和内联块状元素。

常用的块状元素：

<div>、<p>、<h1>...<h6>、<table>、<ul>、<ol>、<li>、<dl>、<form>、<address>、<blockquote>

常用的内联元素：

<a>、<br>、<q>、<span>、<i>、<strong>、<em>、<label>、<code>、<var>、<cite>

常用的内联块状元素：

<img>、<input>

1. 块状元素

   display:block;可以设置元素为块状元素，如a{display:block;}
   

   特点：一个块状元素独占一行；

             块状元素的宽、高、行高以及顶和底边距都可以设置；

             在未设置宽度时，其宽度是父元素的100%。

2. 内联元素

   display:inline;可以设置元素为内联元素，如div{display:inline;}

   特点：和其他元素在一行上；

              内联元素的宽、高、行高以及顶和底边距不可设置；

              元素的宽度就是其包含的文字或图片的宽度，不可改变。

   --》解决行内元素间隙bug问题

   出现的原因：当行内元素之间有回车、tab、空格，就会有间隙出现。

   如
   

   <div>
      <a>1</a>
      <a>2</a>
      <span>33333</span>
      <span>44444</span>
      <em>555555</em>
   </div>
   

   方法1：把行内元素写在同一行。

   如

   <div>

       <a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em>

   </div>
   

   方法2：用font-size

   如

   div{font-size:0;}

   a,span,em{font-size:16px;}
   

3. 内联块状元素

   display:inline-block;可以设置元素为内联块状元素，

   特点：和其他元素在同一行；

              可以设置元素的宽、高、行高以及顶和底边距。

ps：元素未设置display:none;时，若设置为position:absolute;或者float:right;float:left;属性，元素会自动以display:inline-block;方式显示，也就是可以设置宽、高，且默认宽度不会占满父元素。