Question

我在某处读到了关于如何制作dropcap的教程

这是代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<style>
h1, h2, h3, h4, p, ul, li, address, blockquote {
    margin: 0;
    padding: 0;
}

body {
    width: 720px;

    font: 90%/1.6 Arial, Helvetica, sans-serif;

    padding: 25px;
}

.dropcap p:first-of-type:first-letter {
    float: left;
    font-family: Georgia, Times, serif;
    font-size: 4em;
    margin: 0 5px 0 0;
    line-height: .7;
}

</style>
</head>
<body>

<section class="dropcap">

<p>You can use floats to create dropcaps as well. Simply float the first letter of the desired paragraph and set the margins of the float to control spacing. If you want to drop cap a range of letters, simply use a span tag around the letters you want to drop. You can use relative positioning or top margins to help position the cap relative to the paragraph. Because the construct for float elements is a little different in earlier versions of Internet Explorer, if you're targeting versions prior to IE 8 you may need to feed slightly different margin values through conditional comments to have consistent styling. Firefox does NOT allow the dropcap to calculate its own line-height, forcing it to inherit it from the parent paragraph. WebKit based browsers will. This means that in order to have dropcaps line up consistently in WebKit based browsers and Firefox, you'll need to apply a line-height equal to the height of the cap (start at around .8, although you'll need to experiment  with it based on the font you're using).</p>
</section>

</body>
</html>

他说这比使用 span标记然后定位你想要dropcap的字母更好

这是我的问题代码中更多标记标记的缺点是什么？

Answer 1

代码中更多标记的明显缺点是它的可读性较差，为文件大小添加了更多字节，并为代码添加了更多变量，从而导致更多错误。

在section元素上使用CSS样式的缺点是，定位所需的字母并不容易。是的，如果你想要定位第一个字母，那就是蛋糕。但是如果你想要定位第七个字母怎么办？ IMO，在这种情况下跨度会更好，但我从来没有碰到用于使用dropcase定位段落的第七个字母的用例：p。

代码中有更多标记的缺点是什么？

1 个答案: