块级元素与行内元素的区别

时间:2020-05-01

行内元素

一个行内元素只占据它对应标签的边框所包含的空间。

一般情况下,行内元素只能包含数据和其他行内元素。

块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

行内元素特征:

  • 设置宽高无效
  • 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
  • 不会自动进行换行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            background-color: antiquewhite;
        }
        span{
            background-color: gray;
            margin-left: 200px;
            padding: 30px;
        }
    </style>
</head>
<body>
<div>
    <span>span1</span>
    <span>span2</span>
    <input>
    <select>
        <option>select</option>
    </select>
    <textarea>textarea</textarea>
    <label>label</label>
    <button>btn</button>
</div>
</body>
</html>

块级元素

块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。

通常浏览器会在块级元素前后另起一个新行。

块级元素只能出现在 <body> 元素内。

一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="div">div</div>
<div>div</div>
<p>p</p>
<ul>
    <li>ul</li>
</ul>
<ol>
    <li>ul</li>
</ol>
<table>
    <tr>
        <th>table</th>
    </tr>
</table>
</body>
</html>

块状元素特征:

  • 能够识别宽高
  • margin和padding的上下左右均对其有效
  • 可以自动换行
  • 多个块状元素标签写在一起,默认排列方式为从上至下

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。这三者是可以互相转换的,使用display属性能够将三者任意转换:

  • display:inline;转换为行内元素
  • display:block;转换为块状元素
  • display:inline-block;转换为行内块状元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        span{
            display: block;
            height: 200px;
            width: 100px;
            background-color: red;
        }
        ul li{
            display: inline-block;
            width: 200px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="div">div</div>
<div class="div">div</div>
<span>span</span>
<ul>
    <li>ul</li>
    <li>ul</li>
    <li>ul</li>
</ul>
</body>
</html>