line-height 取值方式

刘厚水发布于2019-08-30 15:53 / 3476人阅读

摘要：取值方式相信很多前端都使用过来设置行高布局。百分比取值一般用该方式定义目标元素的行高会配合属性使用，因为用百分比当前元素的行高为。总结一般情况下，为了更加方便及清晰的使用，使用倍数取值是最佳的设置方式，如原文链接

line-height 取值方式

相信很多前端er都使用过 line-height 来设置行高布局。下面看看官方定义：

On block level elements, the line-height property specifies the minimum height of line boxes within the element.On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.

有时候我们在开发的时候并没有太深入的去了解一个属性，比如：line-height 的不同取值达到的效果并不同，下面依次看看常用的几种取值方式。å

px 单位取值

line-height: 26px 目的就是直接定义目标元素的行高为 26px 的高度。

% 百分比取值

line-height: 150% 一般用该方式定义目标元素的行高会配合 font-size: 14px 属性使用，因为用百分比当前元素的行高为 1.5 * 14px = 21px。且如果其层叠子元素没有定义 line-height 属性，不管有没有定义 font-size 属性，其层叠子元素行高均为 21px（与自身的 font-size 没有任何关系）。

倍数取值

line-height:1.5 用该方式一般也是配合 font:14px 属性使用，但是对层叠子元素的影响效果并不同，如果层叠子元素没有定义 line-height 属性，但是定义了 font-size 属性，那这些层叠子元素的行高为继承过来的 line-height 倍数值乘以自身的 font-size 属性。

总结

一般情况下，为了更加方便及清晰的使用 line-height，使用倍数取值是最佳的设置方式，如：

body {
    font: 12px/1.5 tahoma,arial,"5b8b4f53"
}

原文链接

GPU云服务器云服务器 line-height 如何取值表单取值取值时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116607.html

盒模型/行内框盒子模型及line-height/vertal-align取值分析

摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。盒模型盒模型之所以称为盒是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的盒子，这个盒子包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（p...

jackwang 2019-08-30 15:52 评论0 收藏0
盒模型/行内框盒子模型及line-height/vertal-align取值分析

摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。盒模型盒模型之所以称为盒是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的盒子，这个盒子包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（p...

MAX_zuo 2019-08-01 16:16 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

incredible 2019-08-29 12:42 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

you_De 2019-08-01 16:57 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 评论0 收藏0