关于HTML里li是内联元素还是块级元素的判断方法

关于HTML里li是内联元素还是块级元素的判断方法

首先要知到内联元素以及块级元素的定义。

内联元素：

• 不会独占一行
• 无法自定义宽高

块级元素：

• 块级元素会独占一行，在块级元素前后的元素都会换一行显示。
• 块级元素通常是页面上的结构元素，例如标题、段落、页脚等。
• 块级元素不会嵌套在内联元素里面，但它可以嵌套在另一个块级元素里面。
• 块级元素可以自定义宽高。

那么根据以上内联元素和块级元素的定义就足以判断li元素是属于哪个元素了。

1. li元素独占一行
2. li不会嵌套在内联元素里
3. li可以自定义宽高

如下例子用经典的内联元素span元素与li元素使用相同的css样式进行对比：

li{
    background-color: aquamarine;
    width: 50%;
    height: 100px;
    margin: 5px;
}
span{
    background-color: aquamarine;
    width: 50%;
    height: 100px;
    margin: 5px;
}

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<span>嗡嗡嗡</span>

结论：li元素是块级元素。