标签元素分类

元素分类

一、行内元素

1.不独占一行，高宽由内容撑开
2.无法设置width和height
3.margin（单用无效，配合别的标签可以有效，下面案例中有解释）/padding的上下无效，但是左右有效

<a></a> <strong></strong> <span></span> 

二、行内块元素

1.不独占一行，高宽内容撑起来
2.都可以设置

<img> <button>  <input>    <textarea>  <select>  

三、块级元素

1.独占一行，宽度默认全屏宽度，高度默认撑起来
2.都可以设置

<div></div> <p></p> <ul></ul> <table></table> <form></form> h1-h6 

四、转换

/*声明为块级元素*/ display:block; /*声明为行内元素*/ display:inline; /*声明为行内块元素*/ display:inline-block; 

五、案例

<style>     .t1 {         background-color: orange;         /* margin上下无效 */         /* margin-top: 10px; */         /* 独占设置时无效，但是和行内块元素一起设置时有效 */         padding-top: 30px;         /* padding/margin左右都有效果 */         padding-left: 30px;         margin-left: 20px;     }      .t2 {         padding-top: 50px;         margin-top: 10px;      }      .t3 {         display: block;         background-color: aqua;         outline: 1px solid red;         padding: 10px 10px;         margin: 5px 5px;     } </style> <a href="#" class="t1">行内元素</a> <button class="t2">行内块元素</button> <table class="t3">     <tr>         <th>列1</th>         <th>列2</th>     </tr>     <tr>         <td>对</td>         <td>错</td>     </tr> </table>