first-letter和first-line的区别

最新推荐文章于 2020-12-04 21:17:04 发布

aochuntang6606

最新推荐文章于 2020-12-04 21:17:04 发布

阅读量1k

点赞数 1

原文链接：http://www.cnblogs.com/lvlvlv/p/11066517.html

版权

1.first-letter和first-line都作用于块级元；

2.first-letter:作用于第一行的首字符；

3.first-line：作用于第一行的所有字符；

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="{CHARSET}">
 6         <title></title>
 7     </head>
 8     <style>
 9        .parent {
10             height: 500px;
11             border: 1px solid #222;
12             display: flex;
13         }
14         
15         .left {
16             width: 200px;
17             border: 1px solid #ccc;
18             margin: 20px;
19             height: 200px;
20         }
21         
22         .left::first-letter{
23             color:red;
24             font-size: 24px;
25         }
26         .right {
27             border: 1px solid #ff4400;
28             margin:20px;
29             height: 200px;
30             flex: 1;
31         }
32         .right::first-line{
33             color:red;
34             font-size: 24px;
35         }
36     </style>
37 
38     <body>
39         <div class="parent">
40             <div class="left">
41                 <p>qwewwerwerwerer</p>
42             </div>
43             <div class="right">
44                 <p>dspojdiohudf</p>
45             </div>
46         </div>
47     </body>
48 
49 </html>

转载于:https://www.cnblogs.com/lvlvlv/p/11066517.html

aochuntang6606

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
first-letter和first-line的区别

1.first-letter和first-line都作用于块级元；2.first-letter:作用于第一行的首字符；3.first-line：作用于第一行的所有字符； 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="{CHAR...
复制链接

扫一扫