dropcap

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  10.     <style>
  11.         body{
  12.             margin: 100px;
  13.         }
  14.         .article-body {
  15.             width: 500px;
  16.             background-color: #fdf2f8;
  17.         }
  19.         .has-dropcap::first-letter {
  20.             font-size: 50px;
  21.             float: left;
  22.             line-height: 1;
  23.             margin: 5px 0.1em 0.1em 0;
  24.             /* 因为是浮动元素，行内元素margin才不会塌陷 */
  25.             /* margin 不填充背景颜色 */
  26.             background-color: black;
  27.             color: white;
  28.             padding: 5px 10px 5px 5px;
  29.             /* padding 填充背景颜色,使得背景看起来像正方形 */
  30.         }
  32.         .dropcap {
  33.             background: #303030;
  34.             color: #FDF9F2;
  35.             float: left;
  36.               /* 浮动会使得元素位置在上面一个的下面 
  37.             *  同时伪元素会继承它的宽高。
  38.             */
  39.             font-size: 6rem;
  40.             line-height: 1;
  41.             margin: 0.1em 0.1em 0.2em 0;
  42.             padding: 0.1em;
  43.         }
  45.         .dropcap:before,
  46.         .dropcap:after {
  47.             content: "";
  48.             display: block;
  49.         }
  51.         .dropcap:before {
  52.             margin-top: -0.2em;
  53.         }
  55.         .dropcap:after {
  56.             margin-bottom: -0.15em;
  57.         }
  58.     </style>
  59. </head>
  61. <body>
  62.     <article class="article-body">
  63.                 <!-- 伪类方法 -->
  64.         <p class="has-dropcap">
  65.             Chen
  66.         </p>
  67.                 <!-- 标签方法，兼容性更好 -->
  68.         <p><span class="dropcap">Q</span>
  69.             ian
  70.         </p>
  71.     </article>
  73. </body>
  75. </html>

浏览器output

image.png
image.png

  • chrome浏览器和ff浏览器默认字体不一样，字体的行高设置也不一样。保证兼容性必须指定字体和行高。

深入探究

<!-- 关于浮动和伪元素：记住两点，伪元素会继承绑定元素可继承的属性。浮动会使得元素
        插入到上个元素的下面-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span::before {
            content: '33333';
            display: block;
            /* margin-top: -.1em; */
            background-color: red;

        }

        span {
            float: left;
            /* 浮动会使得元素位置在上面一个的下面 
            *  同时伪元素会继承它的宽高。
            */
            color: #192;
            /* padding: 10px; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>
        ddddddddddd
    </span>
</body>

</html>