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

css: line-height 与box-sizing的更多相关文章

  1. [css] line boxes

    原文链接:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85 ...

  2. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  3. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  4. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  5. 构建前端第4篇之---使用css用法 height

    张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...

  6. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  7. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  8. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  9. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  10. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

随机推荐

  1. Flink入门（五）——DataSet Api编程指南

    Apache Flink Apache Flink 是一个兼顾高吞吐.低延迟.高性能的分布式处理框架.在实时计算崛起的今天,Flink正在飞速发展.由于性能的优势和兼顾批处理,流处理的特性,Flink ...

  2. MySQL之非空约束（NOT NULL）

    定义: MySQL非空约束(NOT NULL)可以通过 CREATE TABLE 或 ALTER TABLE 语句实现.在表中某个列的定义后加上关键字 NOT NULL 作为限定词,来约束该列的取值不 ...

  3. Clover软件使用中遇到的问题

    安装Clover应用后不生效,Win + E 时仍然默认打开系统的资源管理器 解决: 进入ie浏览器的管理加载项窗口,显示栏选择所有加载项 找到 Explorer Watcher Class 项,确保 ...

  4. 一个.NET程序员 "2019" 跳槽3次的悲惨故事

    2019年是值得深思的一年,在找工作上没有那么用心,导致碌碌无为,在这里我建议大家找工作的时候不要太着急...要不然会被逼疯的,一定不能被“工作”挑,一定要做到挑"工作".:那我就 ...

  5. redis 为什么是单线程，为什么速度快。

    redis 5中存储方式 String.List.Set.Hash.ZSet这5种 数据库的工作模式按存储方式可分为: 硬盘数据库和内存数据库.Redis 将数据储存在内存里面,读写数据的时候都不会受 ...

  6. 2019牛客暑期多校第二场题解FH

    F.Partition problem 传送门 题意:有2n个人,分两组,每组n个,要求sum(vij)最大值. 题解:n并不大我们可以枚举每个人是在1组还是2组爆搜. 代码: #include &l ...

  7. X-Admin&ABP框架开发-租户管理

    软件即服务概念的推动,定制化到通用化的发展,用一套代码完成适应不同企业的需求,利用多租户技术可以去做到这一点.ABP里提供了多租户这一概念并且也在Zero模块中实现了这一概念. 一.多租户的概念 单部 ...

  8. Java8 通关攻略

    点赞+收藏 就学会系列,文章收录在 GitHub JavaEgg ,N线互联网开发必备技能兵器谱 Java8早在2014年3月就发布了,还不得全面了解下 本文是用我拙劣的英文和不要脸的这抄抄那抄抄,熬 ...

  9. 微信授权流程和JSSDK调用流程

    概念理解 业务域名:当前业务使用的是哪个网站,好处:设置业务域名后,在微信内访问该域名下页面时,不会被重新排版.不出现“防欺诈盗号,请误支付或输入qq密码”的提示,微信认为该域名是安全的,客户也不觉得 ...

  10. Java ArrayList类的简单介绍

    ArrayList类的说明: ArrayList类是List接口的实现类,java.util.ArrayList集合数据存储的结构是数组结构. 特点: 元素增删慢,查找快.(由于日常开发中使用最多的功 ...