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 为默认值

  • 相关阅读:
    Solution: Win 10 和 Ubuntu 16.04 LTS双系统, Win 10 不能从grub启动
    在Ubuntu上如何往fcitx里添加输入法
    LaTeX 笔记---Q&A
    Hong Kong Regional Online Preliminary 2016 C. Classrooms
    Codeforces 711E ZS and The Birthday Paradox
    poj 2342 anniversary party
    poj 1088 滑雪
    poj 2479 maximum sum
    poj 2481 cows
    poj 2352 stars
  • 原文地址:https://www.cnblogs.com/flymood/p/4245245.html
Copyright © 2011-2022 走看看