html基础之块元素、行内元素、行内块元素

一、块元素

display:block

//常见的块元素有
        <p></p>
        <h1></h6>
        <ul></ul>
        <ol></ol>
        <hr>
        <div></div>
        <form></form>
1
2
3
4
5
6
7
8

特点：
①、自己独占一行。
②、高宽、内外边距都可以控制。
③、默认宽度时父级宽度。
④、是一个容器和盒子，里面可以放行内元或者块级元素。
注意：
①、文字类元素内不能使用块级元素。
例如：

、标签主要用于放文字，里面不能再放其它块级元素。

插入一下如果两个块元素同时设置margin，会引起margin塌陷，两个块之前的margin以大的margin为准

二、行内元素

display：inline

//常见的行内元素有
                <span></span>
                <a href=""></a>
                <b></b>
                <strong></strong>
                <i></i>
                <em></em>
                <label></label>
                <small></small>
1
2
3
4
5
6
7
8
9

特点：
①、一行可以显示多个。
②、宽高设置无效。
③、默认宽度是他本身内容的宽度。
④、行内元素只能容纳文本或者其它行内元素，不能放块级元素。
注意：
①、链接里面不能再放链接。
②、特殊情况 a 里面可以放块级元素，但是要转换为块级模式最安全。

三、行内块元素

display：inline-block

//常见的行内块元素有
                <img src="" >
                <iframe src="" ></iframe>
                <input type=""  />
                <textarea rows="" cols=""></textarea>
                <select></select>
                <button type=""></button>
1
2
3
4
5
6
7

特点：
①、一行可以显示多个。
②、默认宽度就是他本身内容的宽度。
③、宽高、内外边距都可以控制。

链接: https://www.cnblogs.com/wan520/p/13916536.html