详细说明CSS l●▂●ine

2021-01-21 00:17 jianzhan

近期在做CSS页面时常常碰到line-height和height这2个特性,一直没搞很搞清楚,今日静下心来好好地在网上查看了一下,算作有一定的理解。https://blog.csdn.net/a2013126370/article/details/82786681这一时尚博主写的很非常好,最少要我对line-height和height的了解更加深入刻了,非常值得效仿。

一、一些基本要素

1.行高就是指文字行基准线间的竖直间距(也叫行间距)

2.行距是上涨的道德底线和下一行顶线中间的间距

我本人了解,能够得到下列结果:

1. 在沒有设定div的height特性时,div的高宽比是依据line-height的尺寸而转变,其实不受font-size的危害。

2. height是用于设定原素的高宽比,例如img的高宽比、div的高宽比等。line-height 特性是用于设定行间距(行高),二者其实不是同一个定义。

二、编码案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sdds</title>
        <style>
            html,body,div{
                margin: 0;
                padding: 0;
                border: 0;
            }
            .bg0{
                width: 200px;
                height: 45px;
                line-height: 100px;
                background-color: red;
                font-size: 10px;
                word-wrap:break-word;
            }
            .bg1{
                width: 200px;
                height: 10px;
                background-color: green;
            }
            .bg2{
                width: 200px;
                height: 45px;
                background-color: yellow;
            }
            .bg3{
                width: 200px;
                height: 55px;
                background-color: blue;
            }
        </style>
    </head>

<body>
    <div class="bg0">上海市高校SHU(Shanghai University)是一所211高校</div>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>
</html>

运作結果:

结果:能看出,淡黄色情况div和深蓝色情况div的height加起來便是类名叫bg0的div的所设定的line-height=100px,而第一一部分鲜红色div设定的height=45px,是line-height减掉fontsize后在除以2获得的,即(100-10)/2=45px。

之上便是详细说明CSS line-height和height的详尽內容,大量有关CSS line-height和height的材料请关心脚本制作之家其他有关文章内容!