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. 1037 在霍格沃茨找零钱 (20 分)C语言

    题目描述 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二 十九个纳特(Knut)兑一个西可 ...

  2. 个性化重排--Personalized Re-ranking for Recommendation

    推荐中的个性化重排--Personalized Re-ranking for Recommendation 这篇文章是阿里在ResSys'19发表的,主要贡献是在重排序阶段,引入了用户的相关信息,很符 ...

  3. Python 处理Excel内的数据（案例介绍*2）

    (一)案例一介绍 现在有一匹电商产品跟当日销量的数据,如下,总共有上万笔的数据,现在需要统计每个品牌当日的销售量,比如美宝莲今天总共卖出了多少的商品,另外需要统计每个品牌下面的每个子品类当日销售量(品 ...

  4. docker-bind挂载

    使用绑定挂载 自Docker早期以来,绑定挂载一直存在.与卷相比,绑定装载具有有限的功能.使用绑定装入时,主机上的文件或目录将装入容器中.文件或目录由其在主机上的完整路径或相对路径引用.相反,当您使用 ...

  5. Go Web 编程之 请求

    概述 前面我们学习了处理器和处理器函数,如何编写和注册处理器.本文我们将学习如何从请求中获取信息. 请求的结构 通过前面的学习,我们知道处理器函数需要符合下面的签名: func (w http.Res ...

  6. webpack实践——DLLPlugin 和 DLLReferencePlugin的使用

    DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度. 1 ...

  7. echarts设置柱状图颜色渐变及柱状图粗细大小

    series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...

  8. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  9. vs推送git失败，修改git下config的Log

    一开始写完程序套推送到Git中,然后就来了一下,下面的异常: 异常1 发布到远程存储库时遇到错误: Git failed with a fatal error. fatal: HttpRequestE ...

  10. python 线程条件

    条件.事件.信号量本质上都是锁,不常用 """ 常用方法: obj,acquire() Obj.release() obj.wait(),创建是阻塞状态,等待obj.no ...