58. 样式补充 {ignore}

[toc]

1. display: list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子。

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列。

  • <li>

    • 在浏览器的默认样式表中，将 li 元素设置为了 display: list-item;。
    • 主盒子：就是 li元素 的内容区域
    • 次盒子：就是 li元素 前面的小点

涉及的css：

  • list-style-type

    • 设置次盒子中内容的类型（设置li元素前面小点的类型，还可以放图片，list-style-image）
    • 该属性可以继承（在 user agent stylesheet 中，该属性不是直接设置在 li元素 身上的，而是设置在 <ul>、<ol> 身上。）

  • list-style-position

    • 设置次盒子相对于主盒子的位置（outside、inside）

  • 速写属性 list-style

    • list-style: circle inside;

    • list-style: none;

      • 清空次盒子

2. 图片失效时的宽高问题

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

可以将img元素设置为 inline-block 或 block，同时给图片定义好宽高，这样做以后，即便图片失效了，我们也可以保留图片原本所能所占的那块空间。

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

行盒的高度与它内部的行块盒或可替换元素的高度无关。

解决方式：

  • 将作为父容器的行盒设置为 inline-block 或 block

4. text-align:justify

text-align:

  • left: 左对齐
  • right：右对齐
  • center：居中

  • justify：除最后一行外，分散对齐

    • 如果最后一行也想实现分散对齐的效果，可以设置一个伪元素 ::after，让这个伪元素作为最后一行即可。

分散对齐的效果，还是使用 css3 的 flex 布局来实现更好。

5. 制作一个三角形

示例：

  1. div {
  2.     width: 0;
  3.     height: 0;
  4.     border: 10px solid transparent;
  5.     border-left-color: red;
  6. }

效果：58. 样式补充 - 图1

6. direction 和 writing-mode

  • 开始 start -> 结束 end

    • 开始和结束是相对的，不同国家有不同的习惯

  • 左 left -> 右 end

    • 左右是绝对的

  • direction mdn

    • direction设置的是开始到结束的方向。

  • writing-mode mdn

    • writing-mode：设置文字书写方向

7. utf-8字符

utf-8在线转换工具：http://www.metools.info/code/c40.html

&#x8881;&#x8FDB;：袁进

使用示例：

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

<head>
    <meta charset="UTF-8">
    <title>utf-8</title>
    <style>
        p::after {
            /* 直接写 &#x 后面的十六进制数即可 */
            content: "\5927\5FFD\60A0";
        }
    </style>
</head>

<body>
    &#x8881;&#x8FDB;
    <p></p>
</body>

</html>

效果：58. 样式补充 - 图2

如果使用伪元素选择器，并在 content 中定义内容的话，我们不能直接使用实体字符的形式，需要写成 content: "\5927\5FFD\60A0";，在字体图标那节课中遇到过。

小结

  • display: list-item;

    • 需要知道主盒子和次盒子分别表示什么区域。
    • 需要知道如何清空次盒子：ul, ol { list-style: none; }