标签元素分类-526互联

元素分类

一、行内元素

1.不独占一行，高宽由内容撑开
2.无法设置width和height
3.border无效
4.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>