Question

我必须覆盖页面的正文样式：

body{
    font-size:14px;
    line-height:20px;
}

控制装置：

body{
    font-size:100%;
    line-height:?????;
}

如果我指定line-height，font-size:100%属性的defualt值是多少？

这些属性之间是否有严格的关系？

Answer 1

The default line-height为normal，因此请使用：

body {
    font-size: 100%;
    line-height: normal;
}

仅供参考，您可以通过打开网站，检查<body>元素并查看继承的计算样式来确认Chrome。

Answer 2

设置无单位值1，它将计算出的字体大小（即字体的大小）乘以1，从而获得足够高的行高。

您还可以使用1.5更多间距。

所以要完成你的代码就是

body{
  font-size:100%;
  line-height: 1.5;
}

有关详情，请参阅https://developer.mozilla.org/en-US/docs/CSS/line-height上的部分。使用无单位数作为设置行高的首选方法。

Answer 3

值

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <style> * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 14px; } #myTable th, #myTable td { text-align: left; padding: 5px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } </style> <body> <div class="container-fluid"> <div class="row"> <nav class="navbar navbar-inverse"> </nav> </div> </div> <hr> <base target="_top"> <div class="container"> <font color="#440F89"><b>Your Requset and updated Status as Below</b></font> <input class="email" type="text" id="myInput" oninput="myFunction()" value="<?=email?>"> <hr> </div> <? var data = getData(); ?> <div class="container"> <table id="myTable"class="table table-striped table-bordered table-hover table-condensed myTable"> <tr> <td class="bg-primary"><b>Requester Name</b></td> <td class="bg-primary"><b>Request Type</b></td> <td class="bg-primary"><b>Request For</b></td> <td class="bg-primary"><b>Short Description</b></td> <td class="bg-primary"><b>Business Reason for Request/Purpose</b></td> <td class="bg-primary"><b>Urgency</b></td> <td class="bg-primary"><b>SM Team Member(Assgined)</b></td> <td class="bg-primary"><b>Notes</b></td> <td class="bg-primary"><b>Resolution</b></td> <td class="bg-primary"><b>Status</b></td> </tr> <? for (var i = 0; i < data.length; i++) { if(data[i][0].toUpperCase() !== email.toUpperCase()) {?> <tr style="display:none;"> <? for (var j = 0; j < data[i].length; j++) { ?> <td><?= data[i][j] ?></td> <? } ?> </tr> <? } else{ ?> <tr> <? for (var j = 0; j < data[i].length; j++) { ?> <td><?= data[i][j] ?></td> <? } ?> </tr> <?} }?> </table> </div> <script> function myFunction() { var span, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 1; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </body> </html>

取决于用户代理。桌面浏览器（包括Firefox）使用大致 normal 的默认值，具体取决于元素的1.2。

...

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values

Answer 4

默认行高约为1.1em（见here）。

但是，您可以使用例如：

更改行高和字体大小之间的关系

body {
    font: 100%/1.618;
}

为了更深入地了解行高和字体大小之间的关系，一个好的起点是：
http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin

Answer 5

您可以使用亲戚line-height

如果您的原始尺寸为font-size:14px;和line-height:20px;并且您希望保持相同的比例，则可以使用1 *（20/14）em line-height:1.42em;

body{
    font-size:100%;
    line-height:1.42em;
}

字体大小为100％时的行高默认值

5 个答案:

值