行内元素和块状元素的区别

╰+攻爆jí腚メ 2022-07-20 12:30 219阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <style>
            div{
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background: pink;
            }
            span{
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background: pink;
            }
        </style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    
    <span>1111111111</span>
    <span>2222222222</span>
    <span>3333333333</span>
    </body>
    </html>

浏览器的显示结果如下

![Center][]

div标签和span标签，我们定义了一样的css样式，但是呈现出来的结果却大不相同，因为他们两个，一个是块状元素，一个是行内元素，他们的区别如下：

常用的块状元素有：

、

# ... #

###### 、  、  、  、、 、  、  常用的内联元素有： 、、   、 *、、**、、、、、`作者： lict3227420 链接：http://www.imooc.com/article/7657 来源：慕课网`***  <table></table> ######

常用的块状元素有：<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>

常用的行内元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>

注：行内元素又可以称为内联元素

常用的块状元素有：

、

# ... #

###### 、  、  、  、、 、  、  常用的内联元素有： 、、   、 *、、**、、、、、`作者： lict3227420 链接：http://www.imooc.com/article/7657 来源：慕课网`*** ######

[Center]: /images/20220719/3cd8342823cd4a7ca62cf4ea3e4ea1fe.png