码迷,mamicode.com
首页 > 其他好文 > 详细

line-height(行高)

时间:2018-10-11 12:54:15      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:round   高中   char   har   let   微软   元素   html   charset   


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>postion</title>
        <style>
            /*
             在css并没有为我们提供一个直接行间距的方式
            我们只能通过设置行高来间接设置行间距,行高越大行间距越大
            我们使用line-height来设置行高
            行高类似于我们上学的单线本,单线本是一行一行,线与线之间距离行高
            网页中的文字实际上也是一个看不见的线中,而文字会默认在行高中垂直居中显示
            
            行间距=行高-字体大小
            */
            .p1{
                
                font-size: 20px;
                line-height: 70px;
                /*
                 * 通过设置line-height可以间接的设置行高
                 * 可接受的值:
                 * 1.直接就收一个大小
                 * 2.可以指定一个百分数,则相对于字体大小去计算行间距=字体大小是20px*行高200%
                 * 3.可以直接传一个数值,则行高设置字体大小相应的倍数=字体大小*1.5
                 * */
                /*line-height: 50px;*/
                /*line-height: 200%;*/
                /*line-height: 1.5;*/
            }
            .div01{
                width: 200px;
                height: 200px;
                background: blueviolet;
                /*
                 *对于单行文本来说,可以将行高设置为和父元素的高度一致
                 * 这样可以是单行文本在父元素中垂直居中
                 * */
                line-height: 200px;
            }
            .p2{
                /*
                 *在font中也可以指定行高
                 * 在字体后可以添加/行高,该值是可选的,如果不指定,则会使用默认值
                 * 警告:默认值
                 * line-height:50px;
                 * font: 20px "微软雅黑";
                 * 虽然,前面的行高设置了20px,但是font里面的行高未设置,指定默认值会将其覆盖
                 * font----里面有很多默认值
                 */
                font: 20px/50px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <p class="p2">
            在css并没有为我们提供一个直接行间距的方式
            我们只能通过设置行高来间接设置行间距,行高越大行间距越大
            我们使用line-height来设置行高
            行高类似于我们上学的单线本,单线本是一行一行,线与线之间距离行高
            网页中的文字实际上也是一个看不见的线中,而文字会默认在行高中垂直居中显示
            行间距=行高-字体大小
        </p>    
        <div class="div01">
            <a href="#">我是一个超链接</a>
        </div>
        <p class="p1">
            在css并没有为我们提供一个直接行间距的方式
            我们只能通过设置行高来间接设置行间距,行高越大行间距越大
            我们使用line-height来设置行高
            行高类似于我们上学的单线本,单线本是一行一行,线与线之间距离行高
            网页中的文字实际上也是一个看不见的线中,而文字会默认在行高中垂直居中显示
            行间距=行高-字体大小
        </p>    
        
    </body>
</html>

line-height(行高)

标签:round   高中   char   har   let   微软   元素   html   charset   

原文地址:https://www.cnblogs.com/goodgirl----xiaomei/p/9771707.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!