display:list-item

设置为该属性值的盒子，本质上也是一个块盒，但同时该盒子会附带另一个盒子。即该盒子会生成另一个盒子，元素本身的盒子叫做主盒子，附带的盒子叫做次盒子。次盒子和主盒子水平排列（先排列次盒子，再排列主盒子）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .test {
            margin: 50px;
            display: list-item;
        }
    </style>
</head>

<body>

    <div class="test">
        test
    </div>

</body>

</html>


很显然，这和 li 元素很类似，有一说一，这确实是同一个东西，也就是说 li 元素本质上就是将 display 设置为 list-item 后产生的效果。

我们设置的 CSS 属性都是设置主盒子的样式，只有少数属性可以用于设置次盒子，下介绍常用的两个

• list-style-type: 设置次盒子中内容的类型
• list-style-position: 设置次盒子相对于主盒子的位置

一般来说，我们使用 list-style:none; 可以清空所有次盒子，一般在重置样式表中我们会这样设置。

图片失效之后的宽高问题

如果 img 元素的图标链接无效，img 元素就和普通行盒一样，无法设置宽高。

我们可以将其强制设置为块盒/行块盒，来解决这个问题。

行盒中包含行块盒或可替换元素

在这种情况下，行盒的高度和其内部行块盒或者可替换元素的高度无关，而是和字体大小直接相关。最常见的情况就是 a 元素内部套上一个 img 元素。

如果行盒内套块盒，那么块盒会把行盒撑开

text-align:justify

我们知道该 CSS 属性用于设置对齐方式，当设置为这个值的时候，表示除了最后一行之外，分散对齐。

所谓分散对齐，就是平均分布空白，如图所示


如果最后一行也要处理，可以进行如下设置 

制作一个三角形

可以使用边框的方式来制作一个三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .test {
            height: 0;
            width: 0;
            border: 50px solid;
            border-color: transparent transparent transparent red;
        }
    </style>
</head>

<body>

    <div class="test">

    </div>

</body>

</html>