zoukankan      html  css  js  c++  java
  • css: line-height 与box-sizing

    css

    1、line-hight:

    行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少。

    对于块级元素:定义了元素中文本基线之间的最小距离。

    line-height并不影响替换元素的布局,但是确实可以应用到替换元素。

    行间距:line-height - font-size

    定义font属性的时候,用户代理会自动会生成一个line-height。

    浏览器  FF
     字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
     行高(line-height)  17px  19px  20px  21px  24px  27px  30px
    浏览器  Chrome
     字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
     行高(line-height)  17px  19px  20px  21px  24px  27px  30px
    浏览器  IE9
     字体大小(font-size)  12px   13px 14px  16px  18px  20px  22px 
     行高(line-height)  15.8px  17.2px  18.5px  21.2px  23.8px  26.4px  29px
    浏览器  360
     字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
     行高(line-height)  17px  19px  20px  21px  24px  27px  30px

    在inline元素中,不是文字撑开了div的高度,而是line-height!

    2、box-sizing

    只是为了规定box modeling

     

    box-sizing : content-box || border-box || inherit

    content-box 为默认值

  • 相关阅读:
    Javascript笔记01:javascript入门介绍
    css笔记19:浮动的案例
    css笔记17:盒子模型加强版的案例
    css笔记16:盒子模型的入门案例
    css笔记15:盒子模型
    css笔记14:css文件之间可以相互引用
    HDU 1203 I NEED A OFFER!
    HDU 2955 Robberies
    HDU 2602 Bone Collector
    HDU 2546 饭卡
  • 原文地址:https://www.cnblogs.com/flymood/p/4245245.html
Copyright © 2011-2022 走看看