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

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>

这里写图片描述

参考：
https://segmentfault.com/a/1190000008021478

http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

https://zhuanlan.zhihu.com/p/27381252

https://www.cnblogs.com/dolphinX/p/3236686.html

http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

https://juejin.im/post/5a7d6b886fb9a06349129463
https://segmentfault.com/a/1190000002668492

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

https://www.haorooms.com/post/css_div_juzhong
https://www.haorooms.com/post/div_guding_inner_center

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

猜你喜欢