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

  • 相关阅读:
    Vagrant命令
    您必须知道的 Git 分支开发规范
    phpstorm的提速设置
    Flex 布局教程:语法篇
    Bootstrap 3 & 4 的多级下拉菜单示例
    申请快递查询100接口
    vue.js组件与组件之间的通信
    MAMP环境下 cookie无法正常使用
    Git 常用命令
    Linux学习笔记之yum安装mysql5.7
  • 原文地址:https://www.cnblogs.com/flymood/p/4245245.html
Copyright © 2011-2022 走看看