標簽元素分類

元素分類

一、行內元素

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>