-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss_line-height.html
More file actions
447 lines (323 loc) · 31.1 KB
/
css_line-height.html
File metadata and controls
447 lines (323 loc) · 31.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE html>
<html>
<head>
<title>
css中line-height属性各个单位详解 | 雅乐网 </title>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="http://www.yalewoo.com/wp-content/themes/YLW3_lite/style.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.yalewoo.com/feed" />
<!-- All in One SEO Pack 2.3.12.1 by Michael Torbert of Semper Fi Web Design[-1,-1] -->
<meta name="description" content="我们都知道css中line-height属性用于调整行高，它的值有一些不同的单位，本文将详细介绍这些单位的作用和一些区别。 语法规则如下 line-height: normal | <number> | <length> | <percentage>" />
<link rel="canonical" href="http://www.yalewoo.com/css_line-height.html" />
<!-- /all in one seo pack -->
<link rel="alternate" type="application/rss+xml" title="雅乐网 » css中line-height属性各个单位详解评论Feed" href="http://www.yalewoo.com/css_line-height.html/feed" />
<link rel='stylesheet' id='crayon-css' href='http://www.yalewoo.com/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-classic-css' href='http://www.yalewoo.com/wp-content/plugins/crayon-syntax-highlighter/themes/classic/classic.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-consolas-css' href='http://www.yalewoo.com/wp-content/plugins/crayon-syntax-highlighter/fonts/consolas.css?ver=_2.7.2_beta' type='text/css' media='all' />
<script type='text/javascript' src='https://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/www.yalewoo.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.yalewoo.com/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta'></script>
<link rel='prev' title='GlassWire——windows自带防火墙的增强小工具' href='http://www.yalewoo.com/glasswire.html' />
<link rel='next' title='Listary——优秀的windows资源管理器增强工具' href='http://www.yalewoo.com/listary.html' />
<link rel='shortlink' href='http://www.yalewoo.com/?p=643' />
<link rel="stylesheet" href="http://www.yalewoo.com/wp-content/plugins/wp-content-index/style.css" type="text/css" media="all" />
<!-- Start Of Script Generated By WP-PostViews -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://www.yalewoo.com/wp-admin/admin-ajax.php',data:'postviews_id=643&action=postviews',cache:false});/* ]]> */
jQuery(document).ready(function() {
var ajax_data = {
action: "show_postview",
postviews_id: 643
};
$.post("http://www.yalewoo.com/wp-admin/admin-ajax.php", ajax_data,
function(data) {
$('.meta-view').html(data);
});
return false;
});
</script>
<!-- End Of Script Generated By WP-PostViews -->
<script src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#secondary img").lazyload({
effect:"fadeIn"
});
});
$(function() {
$("img").lazyload({
effect:"fadeIn"
});
});
</script>
<!--[if lte IE 8]><script>document.write("<p style=\"color:red;font-size:40px;\">你正在使用 Internet Explorer 的过期版本（IE6、IE7、IE8）<br/>请<a href=\"#\" style=\"color:blue;\">升级您的浏览器</a>获得更好的浏览体验。</p>");</script><![endif]-->
</head><body>
<header id="topheader">
<hgroup>
<h1><a href = "http://www.yalewoo.com">雅乐网</a>
</h1>
<h2>计算机技术博客</h2>
</hgroup>
<div id="top_menu">
<div class="menu-%e6%9c%80%e9%a1%b6%e7%ab%af-container"><ul id="menu-%e6%9c%80%e9%a1%b6%e7%ab%af" class="menu"><li id="menu-item-663" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-663"><a href="http://www.yalewoo.com/about">关于本站</a></li>
<li id="menu-item-662" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-662"><a href="http://www.yalewoo.com/updates">雅乐网更新记录</a></li>
<li id="menu-item-661" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-661"><a target="_blank" href="http://www.yalewoo.com/old0/">老版网站</a></li>
</ul></div> <form method="get" id="searchform" action="http://www.yalewoo.com/">
<div>
<input type="text" value="" name="s" id="s" size="15" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form> </div>
</header>
<nav class="main_nav">
<div class="menu-%e4%b8%bb%e8%8f%9c%e5%8d%9520171106-container"><ul id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%9520171106" class="menu"><li id="menu-item-3235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-3235"><a href="http://www.yalewoo.com/">首页</a></li>
<li id="menu-item-3237" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-3237"><a href="http://www.yalewoo.com/programming">编程</a>
<ul class="sub-menu">
<li id="menu-item-3238" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3238"><a href="http://www.yalewoo.com/programming/c_cpp">C/C++</a></li>
<li id="menu-item-3243" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3243"><a href="http://www.yalewoo.com/programming/data_structure">数据结构</a></li>
<li id="menu-item-3244" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3244"><a href="http://www.yalewoo.com/programming/basic_algorithm">算法</a></li>
<li id="menu-item-3240" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3240"><a href="http://www.yalewoo.com/programming/online_judge">OJ刷题</a></li>
<li id="menu-item-3239" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3239"><a href="http://www.yalewoo.com/programming/linux">Linux</a></li>
<li id="menu-item-3241" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-3241"><a href="http://www.yalewoo.com/programming/web">Web</a>
<ul class="sub-menu">
<li id="menu-item-3242" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3242"><a href="http://www.yalewoo.com/programming/web/wordpress">wordpress</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-3245" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3245"><a href="http://www.yalewoo.com/algorithm">算法</a>
<ul class="sub-menu">
<li id="menu-item-3248" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3248"><a href="http://www.yalewoo.com/algorithm/maths">数学</a></li>
<li id="menu-item-3246" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3246"><a href="http://www.yalewoo.com/algorithm/ml_notes">机器学习</a></li>
<li id="menu-item-3281" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3281"><a href="http://www.yalewoo.com/algorithm/deep_learning">深度学习</a></li>
<li id="menu-item-3247" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3247"><a href="http://www.yalewoo.com/algorithm/python">python</a></li>
<li id="menu-item-3253" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3253"><a href="http://www.yalewoo.com/algorithm/%e7%a4%be%e5%9b%a2%e6%a3%80%e6%b5%8b">社团检测</a></li>
</ul>
</li>
<li id="menu-item-3254" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3254"><a href="http://www.yalewoo.com/tools">工具教程</a>
<ul class="sub-menu">
<li id="menu-item-3255" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3255"><a href="http://www.yalewoo.com/tools/git">Git/GitHub</a></li>
<li id="menu-item-3256" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3256"><a href="http://www.yalewoo.com/tools/sublime_text">Sublime Text</a></li>
<li id="menu-item-3257" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3257"><a href="http://www.yalewoo.com/tools/vs2013">VS2013</a></li>
<li id="menu-item-3259" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3259"><a href="http://www.yalewoo.com/tools/browser">浏览器</a></li>
<li id="menu-item-3258" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3258"><a href="http://www.yalewoo.com/tools/other_tools">其他工具</a></li>
</ul>
</li>
<li id="menu-item-3260" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3260"><a href="http://www.yalewoo.com/excellent_softwares">软件推荐</a>
<ul class="sub-menu">
<li id="menu-item-3261" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3261"><a href="http://www.yalewoo.com/excellent_softwares/zip">压缩加密</a></li>
<li id="menu-item-3262" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3262"><a href="http://www.yalewoo.com/excellent_softwares/pictools">图片工具</a></li>
<li id="menu-item-3263" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3263"><a href="http://www.yalewoo.com/excellent_softwares/media_tools">多媒体</a></li>
<li id="menu-item-3264" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3264"><a href="http://www.yalewoo.com/excellent_softwares/safe_software">安全清理</a></li>
<li id="menu-item-3265" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3265"><a href="http://www.yalewoo.com/excellent_softwares/android">安卓</a></li>
<li id="menu-item-3266" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3266"><a href="http://www.yalewoo.com/excellent_softwares/utility">实用工具</a></li>
<li id="menu-item-3267" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3267"><a href="http://www.yalewoo.com/excellent_softwares/search_tools">搜索词典</a></li>
<li id="menu-item-3268" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3268"><a href="http://www.yalewoo.com/excellent_softwares/efficiency_tools">效率提升</a></li>
<li id="menu-item-3269" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3269"><a href="http://www.yalewoo.com/excellent_softwares/programming_tools">编程开发</a></li>
<li id="menu-item-3270" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3270"><a href="http://www.yalewoo.com/excellent_softwares/internet_software">网络软件</a></li>
<li id="menu-item-3271" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3271"><a href="http://www.yalewoo.com/excellent_softwares/edit_and_reading">阅读编辑</a></li>
</ul>
</li>
<li id="menu-item-3272" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3272"><a href="http://www.yalewoo.com/it_resource">资源</a>
<ul class="sub-menu">
<li id="menu-item-3273" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3273"><a href="http://www.yalewoo.com/it_resource/good_websites">好网站</a></li>
<li id="menu-item-3274" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3274"><a href="http://www.yalewoo.com/it_resource/stuff">好资料</a></li>
<li id="menu-item-3275" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3275"><a href="http://www.yalewoo.com/it_resource/how">授人以渔</a></li>
<li id="menu-item-3276" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3276"><a href="http://www.yalewoo.com/it_resource/ebooks-share">电子书</a></li>
</ul>
</li>
<li id="menu-item-3277" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3277"><a href="http://www.yalewoo.com/learning">我爱学习</a>
<ul class="sub-menu">
<li id="menu-item-3278" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3278"><a href="http://www.yalewoo.com/learning/popular_science">科普</a></li>
</ul>
</li>
<li id="menu-item-3280" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3280"><a href="http://www.yalewoo.com/about">关于本站</a></li>
</ul></div></nav>
<script type="text/javascript" src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/js/dianzan.js"></script>
<div id="mbxdh">
<div>
<a href="http://www.yalewoo.com/programming">编程</a> » <a href="http://www.yalewoo.com/programming/web">Web</a> » css中line-height属性各个单位详解 </div>
</div>
<div id="container">
<section class="whole_article" id="article-643">
<article class="post-643 post type-post status-publish format-standard hentry category-web tag-css" id="entry">
<h2 id="article-title">
<span class = "title-meta-yuanchuang title-meta-ico"></span>
<a href="http://www.yalewoo.com/css_line-height.html" title="css中line-height属性各个单位详解">css中line-height属性各个单位详解</a>
</h2>
<div class="post-meta">
<span class="meta-author meta-ico"><a href="http://www.yalewoo.com/author/yalewoo" title="由yalewoo发布" rel="author">yalewoo</a> </span>
<span class="meta-time meta-ico"> 最后修改于 2014-09-22</span>
发表于 2014-08-28
<span class="meta-view meta-ico">821</span>
<span class="meta-comment meta-ico"><a href="http://www.yalewoo.com/css_line-height.html#respond">0</a></span>
<br><br>
<span class="meta-category meta-ico"> <a href="http://www.yalewoo.com/programming/web" rel="category tag">Web</a> </span>
<span class="meta-category meta-ico"> <a href="http://www.yalewoo.com/tag/css" rel="tag">css</a> </span>
</div>
<div id="article-content">
<div id="content-index" class="content-index" style="margin:0 0 10px 10px;float:right;"><span class="content-index-toctoggle">[<a id="content-index-togglelink" href="javascript:content_index_toggleToc()">目录开关</a>]</span>
<script type="text/javascript" language="javascript">
window.content_index_showTocToggle=true;function content_index_toggleToc(){var tts="显示目录";var tth="隐藏目录";if(window.content_index_showTocToggle){window.content_index_showTocToggle=false;document.getElementById("content-index-contents").style.display="block";document.getElementById("content-index-togglelink").innerHTML=tth}else{window.content_index_showTocToggle=true;document.getElementById("content-index-contents").style.display="none";document.getElementById("content-index-togglelink").innerHTML=tts}}
</script>
<ul id="content-index-contents"><li class="content-index-level-1"><a href="http://www.yalewoo.com/css_line-height.html#1. normal" title="1. normal"><em>1</em><span>1. normal</span></a></li><li class="content-index-level-1"><a href="http://www.yalewoo.com/css_line-height.html#2. 使用单位px" title="2. 使用单位px"><em>2</em><span>2. 使用单位px</span></a></li><li class="content-index-level-1"><a href="http://www.yalewoo.com/css_line-height.html# 3. 使用百分数或em单位" title=" 3. 使用百分数或em单位"><em>3</em><span> 3. 使用百分数或em单位</span></a></li><li class="content-index-level-1"><a href="http://www.yalewoo.com/css_line-height.html# 4. 不带单位" title=" 4. 不带单位"><em>4</em><span> 4. 不带单位</span></a></li><li class="content-index-level-1"><a href="http://www.yalewoo.com/css_line-height.html# 总结" title=" 总结"><em>5</em><span> 总结</span></a></li></ul></div>
<p>我们都知道css中line-height属性用于调整行高，它的值有一些不同的单位，本文将详细介绍这些单位的作用和一些区别。</p>
<p><span style="color: #222222;">语法规则如下</span></p>
<p><span style="color: #222222;">line-height: normal | <number> | <length> | <percentage></span></p>
<p>如果子元素<strong>没有指定行高</strong>，那么将默认继承父元素的行高，继承的时候父元素行高带单位和不带单位有一些区别。</p>
<p>为了方便，下面效果中我设置了背景颜色，以便观察行高到底是多少</p>
<h3 id="1. normal">1. normal</h3>
<p>设置值为normal时 行高根据浏览器默认决定，不同浏览器可能有不同的值。</p>
<h3 id="2. 使用单位px">2. 使用单位px</h3>
<p>使用px单位表示行高为多少像素</p>
<div id="crayon-5a153e9b232c8566681558" class="crayon-syntax crayon-theme-classic crayon-font-consolas crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover disable-anim wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 20px !important; line-height: 30px !important;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 20px !important; line-height: 30px !important;">
<div style="font-size: 20px;
line-height: 20px;">
<p style="background: orange;">我是父元素 字体大小20px 行高25px</p>
<div style="font-size:30px
">
<p style="background: green;">我是子元素的内容 字体大小30px 行高继承了父元素行高25px</p>
</div>
</div></textarea></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 20px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-1">1</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-2">2</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-3">3</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-4">4</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-5">5</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-6">6</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-7">7</div><div class="crayon-num" data-line="crayon-5a153e9b232c8566681558-8">8</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 20px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5a153e9b232c8566681558-1"><span class="crayon-ta"><div </span><span class="crayon-e ">style</span><span class="crayon-i ">="font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-2"><span class="crayon-h"> </span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-s">"></span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-3"><span class="crayon-s"> <p style="</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">orange</span><span class="crayon-sy">;</span><span class="crayon-s">">我是父元素 字体大小20px 行高25px</p></span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-4"><span class="crayon-s"> <div style="</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">30px</span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-5"><span class="crayon-h"> </span><span class="crayon-s">"></span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-6"><span class="crayon-s"> <p style="</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">green</span><span class="crayon-sy">;</span><span class="crayon-i ">">我是子元素的内容</span><span class="crayon-h"> </span><span class="crayon-i ">字体大小30px</span><span class="crayon-h"> </span><span class="crayon-i ">行高继承了父元素行高25px</p></span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-7"><span class="crayon-h"> </span><span class="crayon-ta"></div></span></div><div class="crayon-line" id="crayon-5a153e9b232c8566681558-8"><span class="crayon-h"> </span><span class="crayon-ta"></div></span></div></div></td>
</tr>
</table>
</div>
</div><p></p>
<div style="font-size: 20px; line-height: 20px;">
<p style="background: orange;">我是父元素 字体大小20px 行高25px</p>
<div style="font-size: 30px;">
<p style="background: green;">我是子元素 字体30px 行高继承父元素行高25px</p>
</div>
</div>
<h3 id=" 3. 使用百分数或em单位"> 3. 使用百分数或em单位</h3>
<p>120%和1.2em效果完全相同。如果某个元素设置行高为1.5em，它的行高就是 1.5乘以 它的字体大小</p>
<p style="font-size: 20px; line-height: 1.5em; background: #abcdef;">我字体大小20px,行高1.5em 算出值就是20*1.5为30px</p>
<p> 如果上面这个例子 行高1.5em 其实它的行高是30px</p>
<p>如果他有子元素，子元素继承的行高是<span style="font-size: 18pt; color: #ff0000;">它计算后的行高30px</span></p>
<div style="font-size: 20px; line-height: 150%;">
<p style="background: orange;">我是父元素 字体大小20px 行高150% 计算后30px</p>
<div style="font-size: 30px;">
<p style="background: green;">我是子元素 字体30px 行高继承父元素行高30px</p>
</div>
</div>
<h3 id=" 4. 不带单位"> 4. 不带单位</h3>
<p>不带单位表示行高为元素字体大小乘以该数字。如果子元素继承父元素的该属性，则只继承了该数字，实际行高由该系数乘以<strong>各个元素自己</strong>的字体大小而定</p>
<div style="font-size: 20px; line-height: 1.5;">
<p style="background: orange;">我是父元素 字体大小20px 行高1.5 计算后30px</p>
<div style="font-size: 30px;">
<p style="background: green;">我是子元素 字体30px 行高继承系数1.5 计算后是45px</p>
</div>
</div>
<h3 id=" 总结"> 总结</h3>
<p>由于不带单位的时候只继承了系数，推荐使用这种方式。</p>
<p> </p>
</div>
</article>
<div class="social-main">
<div class="post-like">
<a href="javascript:;" data-action="ding" data-id="643" class="specsZan ">点赞 <span class="count">
0</span>
</a>
</div>
<div class="reward-button"><a href="http://www.yalewoo.com/denote" target="_blank">赏</a>
<span class="reward-code">
<span class="alipay-code"> <img class="alipay-img wdp-appear" src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/img/alipay.png"><b>支付宝打赏</b> </span> <span class="wechat-code"> <img class="wechat-img wdp-appear" src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/img/wechatpay.png"><b>微信打赏</b> </span>
</span>
</div>
<div class="post-like">
<a id="fenxianganniu" onClick="show_bdsharebox();">分享
</a>
</div>
<div class="bdsharebuttonbox" id="bdsharebuttonbox">
</div>
</div>
<div class="reward-notice">
<p class="">如果文章对你有帮助，欢迎点赞或打赏（金额不限）。你的打赏将全部用于支付网站服务器费用和提高网站文章质量，谢谢支持。</p>
</div>
<div class="article-copyright">
<b> 版权声明: </b>
<p> 本文由 <a href="http://www.yalewoo.com/author/yalewoo" title="由yalewoo发布" rel="author">yalewoo</a> 原创，商业转载请联系作者获得授权。 <br>非商业转载请注明作者 <a href="http://www.yalewoo.com/author/yalewoo" title="由yalewoo发布" rel="author">yalewoo</a> 或 <a href="http://www.yalewoo.com/" title="雅乐网" ?>雅乐网</a> ，并附带本文链接：<br><a href="http://www.yalewoo.com/css_line-height.html" title=css中line-height属性各个单位详解>http://www.yalewoo.com/css_line-height.html</a></p>
</div>
<div class="post-navigation">
<div class="post-previous">
<p>上一篇：</p>
<a href="http://www.yalewoo.com/glasswire.html" rel="prev">GlassWire——windows自带防火墙的增强小工具</a> </div>
<div class="post-next">
<p>下一篇：</p>
<a href="http://www.yalewoo.com/listary.html" rel="next">Listary——优秀的windows资源管理器增强工具</a> </div>
</div>
<div class="related_posts">
<p>与 <a href="http://www.yalewoo.com/tag/css" rel="tag">css</a> 相关的文章</p>
<ul>
<li><a rel="bookmark" href="http://www.yalewoo.com/an_example_for_c_socket_programming_with_multithreading.html" title="多客户端socket服务简单例子，多线程实现。" target="_blank">多客户端socket服务简单例子，多线程实现。</a></li>
<li><a rel="bookmark" href="http://www.yalewoo.com/mongodb.html" title="如何搭建mongodb的复制集环境，mongodb升级" target="_blank">如何搭建mongodb的复制集环境，mongodb升级</a></li>
<li><a rel="bookmark" href="http://www.yalewoo.com/nginx_nodejs_mysql_memcached_on_centos65.html" title="nginx+nodejs+mysql+memcached服务器后台架设centos6.5" target="_blank">nginx+nodejs+mysql+memcached服务器后台架设centos6.5</a></li>
<li><a rel="bookmark" href="http://www.yalewoo.com/javascript-dom_get_started.html" title="javascript DOM编程入门" target="_blank">javascript DOM编程入门</a></li>
<li><a rel="bookmark" href="http://www.yalewoo.com/network_basis.html" title="网络基础：ip地址 子网掩码" target="_blank">网络基础：ip地址 子网掩码</a></li>
<li><a rel="bookmark" href="http://www.yalewoo.com/php_and_c01.html" title="php笔记：和c语言的不同1" target="_blank">php笔记：和c语言的不同1</a></li>
</ul>
</div>
<div class="comments-template">
<div id="comments" class="comments-area">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">我要评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css_line-height.html#respond" style="display:none;">取消回复</a></small></h3> <form action="http://www.yalewoo.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>
<script type="text/javascript" src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/js/show_smilies.js"></script>
<div class="ylw_comment_toolbar">
<a class="button-insert-smilies" id="button-insert-smilies" title="插入表情" onClick="show_smilies();"></a>
</div>
<div class="ylw_smilies_box_wrapper">
<div class="ylw_smilies_box" id="ylw_smilies_box">
</div>
</div><div class="comment-name-email-url"><p class="comment-form-author"><label for="author">姓名</label><input id="author" name="author" type="text" value="" size="30" /> </p>
<p class="comment-form-email"><label for="email">邮箱</label><input id="email" name="email" type="text" value="" size="30" /> </p>
<p class="comment-form-url"><label for="url">网址</label><input id="url" name="url" type="text" value="" size="30" /></p></div><div class='comment_yzm'>验证码*： 6 + 8 = <input type='text' name='sum' class='math_textfield' required='required' value='' size='25' tabindex='4'><input type='hidden' name='num1' value='6'><input type='hidden' name='num2' value='8'></div><div class="comment-right"><div class="comment-submit-button">
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="发表评论" /> <input type='hidden' name='comment_post_ID' value='643' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></div><div class="ylw_comment_notifyme"><input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" style="margin-left:20px;" /><label for="comment_mail_notify">有人回复时邮件通知我</label></div></div></div><div class="clear"></div> </form>
</div><!-- #respond -->
</div><!-- .comments-area -->
</div>
</section>
</div>
<footer id="footer">
Copyright © <a title="雅乐网" href="http://www.yalewoo.com">雅乐网</a> /<a title="自豪地采用WordPress" href="https://cn.wordpress.org" target="_blank">WordPress</a> / <a title="YLW3.0主题" href="http://www.yalewoo.com/ylw3.html" target="_blank">YLW3.0</a> / <a title="老薛主机" href="https://my.laoxuehost.net/aff.php?aff=2518" target="_blank">老薛主机</a> / <a title="七牛云存储" href="https://portal.qiniu.com/signup?code=3li1yeb2ph1ea" target="_black">七牛云存储</a>
<div id="footer_menu">
<div class="menu-%e5%ba%95%e9%83%a8-container"><ul id="menu-%e5%ba%95%e9%83%a8" class="menu"><li id="menu-item-655" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-655"><a target="_blank" href="http://www.yalewoo.com/sitemap.xml">站点地图</a></li>
</ul></div> </div>
<div id="cnzztongji">
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1252889774'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/stat.php%3Fid%3D1252889774%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?e937132d7f7e86dfb5300ce1ab2c25f7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</footer>
<script type="text/javascript" src="http://www.yalewoo.com/wp-content/themes/YLW3_lite/js/backtop.js"></script>
<script type='text/javascript' src='http://www.yalewoo.com/wp-includes/js/comment-reply.min.js?ver=4.7.7'></script>
</body>
</html>
<!-- Dynamic page generated in 1.935 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-11-22 17:08:43 -->
<!-- Compression = gzip -->
<!-- super cache -->