【筆記】浮動屬性float的應用07——浮動可縮放的首字下沉（所有步驟組合在一起）
阿新 • • 發佈：2018-12-06
第1步 - 從一段文字開始
在本練習中，我們希望強制將一個下降帽放在一段文字旁邊。我們還希望丟棄上限是可擴充套件的，無論使用者的預設字型大小如何 - 這意味著所有測量都將以ems或百分比表示。從一段簡單的文字開始。
第2步 - 在第一個字母周圍新增一個範圍
將規則應用於第一個字母有兩種方法。第一種方法使用“：first-letter”來定位字母，第二種方法使用第一個字母周圍的span。雖然第二種方法不是語義上純的，但它在瀏覽器中更穩定。
我們將在本教程中使用第二種方法。所以，我們需要在段內包裝段落的第一個字母。
<span class="dropcap">L</span> orem ipsum dolor sit amet, consectetuer...
第3步 - 浮動第一個字母
當我們將“float：left”應用於第一個字母時，我們還必須提供寬度。您使用的寬度取決於要“刪除”的字母寬度。
我們使用ems來設定字母的寬度和大小。這將允許首字下沉放大或縮小，並始終匹配使用者的預設字型大小。em大約是大寫字母“M”的寬度。因此，大寫“L”只需要大約.7em的寬度。
.dropcap
{
float: left;
width: .7em;
}
第4步 - 增加字型大小
增加字型大小，直到它是3行文字的高度 - 大小約為4周。
font-size: 4em;
第5步 - 設定行高
要使首字下劃線與文字並排，請設定行高。在這種情況下，大約83％似乎有效。與字型大小一樣，這些數字可以根據您的需要進行調整。
line-height: 83%;
完了！
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .dropcap { float:left; width:0.7em; font-size:4em; line-height:83%; } </style> </head> <body> <p><!--new codes--> <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </body> </html>
效果圖如下：
