css2.1行高line-hight、文本、图片垂直居中vertical align@2018-06-15

最新推荐文章于 2023-06-04 19:44:16 发布

qq_34983808

最新推荐文章于 2023-06-04 19:44:16 发布

阅读量369

点赞数

分类专栏：前端

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1、行高

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8"/>
        <style type="text/css" >
            *{
                margin: 0;
                padding:0;
            }
            span{
                padding:0px;
            }
        </style>
    </head>
    <body>
        <div style="background-color:deeppink;">
            <span style="font-size:30px;background-color:pink;">中文English中文English中文English中文English</span>
        </div>
    </body>
<html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8"/>
        <style type="text/css" >
            *{
                margin: 0;
                padding:0;
            }
            span{
                padding:0px;
            }
        </style>
    </head>
    <body>
        <div style="background-color:deeppink;margin-top: 50px;"  >
            <span style="font-size:30px;background-color:pink;line-height:20px;">中文English中文English中文English中文English中文English</span>
        </div>
    </body>
<html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8"/>
         在前端开发中
            如果要处理大量的文本，建议把行高设置的要比字体大

        <style type="text/css" >
            *{
                margin: 0;
                padding:0;
            }
            span{
                padding:0px;
            }
        </style>
    </head>
    <body>
        <div style="background-color:deeppink; margin-top:50px ;">
            <span style="font-size:30px;background-color:pink;line-height:1;">中文English</span>
        </div>
    </body>
<html>

这里写图片描述

继承性
百分比：参考父类的字体大小
因子数：参考自身的字体大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="wrap" style="font-size:30px;line-height:1;">
            <div id="inner" style="font-size:20px;line-height:1;">
                atguigu
            </div>
        </div>
    </body>
</html>

几个概念：
顶线、中线、基线、底线
行高、行距、半行距
内容区、行内框、行框

2、文本、图片垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
              border:1px solid black;/*给父元素添加一个边框，便于辨认*/
              width:1000px;
              font-size: 20px;/*设置大号字体，便于比较*/
            }

            img#img1{
              width:150px;
            }

            #span{
              display: inline-block;/*注意这里的inline-block*/
              width:250px;
              height:80px;
              background-color: yellow;/*给span元素设置一背景色，便于辨认*/
            }

            img#img2{
              width:250px;
            } 
        </style>
    </head>
    <body>
        <div>
           <!--Writing-->
           <img id="img1" src="img/img1.jpg" />
           <!--<span id="span">span元素</span>-->
           <img id="img2" src="img/img2.jpg" />
        </div>
    </body>
</html>