zoukankan      html  css  js  c++  java
  • line-height和height的区别

    line-height 是指每行的高度, 假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时,这个p标签的高度会为20px,如果为两行,则p标签的高度为40px; line-height是20px不变, 只是height变了

    但是,我们定义p的样式为height:20px,那么这个元素的高度并不会因为内容的多少而改变,如果显示为2行,文字的总高度超出了,这个p标签的高也不会随着文本而改变。

    技巧一 
    行高等于元素高,可将文本内容垂直居中

    p{ height: 50px; line-height: 50px; background: yellowgreen; 100px; }
    <p>测试文本</p>
    • 1
    • 2
    • 1
    • 2

    这里写图片描述

    行高尽量不要大于元素高。如果行高大于元素高,多个相同的结构下很容易出现错位 
    这里写图片描述

    技巧二 
    设置高度和浏览器一样高 
    效果: 
    这里写图片描述

    你设置高为100%,再设置边是不起作用的。需要把html和body一起设置为100%,完整代码如下

    html,body{ height: 100%; overflow: hidden; }
    body{ border:10px solid red;}
    • 1
    • 2
    • 1
    • 2

    写在< style >中就可以了。

  • 相关阅读:
    volatile关键字,使一个变量在多个线程间可见。
    grep sed awk
    mysql高级聚合
    Hive高级聚合GROUPING SETS,ROLLUP以及CUBE
    用SecureCRT来上传和下载文件
    mysql导出导入数据
    redis入门
    spark 常用技巧总结2
    生成数据库字典
    spark 常用技巧总结
  • 原文地址:https://www.cnblogs.com/bigshow1949/p/7068367.html
Copyright © 2011-2022 走看看