理解line-height和vertical-align

更新日期: 2021-07-19阅读: 1.1k标签: 属性

行高(line-height)

line-height 属性是指文本行基线之间的距离,用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。

行高 line-height  实际上只影响行内元素和其他行内内容,而不会直接影响块级元素,也可以为一个块级元素设置line-height,但这个值只是应用到块级元素的内联内容时才会有影响。

在这里先列举几个概念:

   ◾ 行高:一行文字的最小高度

   ◾ 行间距:两行文字之间的距离(也就是文字上边和下边的留白部分)

   ◾ 半行间距:1/2行间距

计算行高:

   ◾ 行高 = 字体大小 + 行间距

   ◾ 行高 = 行高倍数字 * 字体大小(倍数值与字体大小相乘必须为整数)

这里直接上图,便于理解什么是行高


设置文字在盒子中垂直居中,只需要将line-height的值设置为盒子高度~

语法

p{
  line-height: normal;/* 不设置行高 */
  line-height: 3.5;/*值为数值*/
  line-height: 5em;/*长度*/
  line-height: 34%;/*值为百分比*/
}
  • normal:取决于客户端,桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family 。
  • 数值: 是这个无单位数字乘以该元素的字体大小(大多数情况下,这是设置line-height的推荐方法,不会在继承时产生不确定的结果。)
  • 长度: 以 em 为单位的值可能会产生不确定的结果
  • 百分比: 与元素自身的字体大小有关。 计算值是给定的百分比值乘以元素计算出的字体大小(百分比值可能会带来不确定的结果)

细心地小伙伴已经发现,在上面我提到设置line-height时推荐使用无单位数值!!

为什么推荐无单位数值?

直接上示例,一看就明白了~

<div class="box green">
    <h1>Avoid unexpected results by using unitless line-height.</h1>
    length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
    <h1>Avoid unexpected results by using unitless line-height.</h1>
    length and percentage line-heights have poor inheritance behavior ...
</div>
.green {
    line-height: 1.1;
    border: solid limegreen;
}

.red {
    line-height: 1.1em;
    border: solid red;
}

h1 {
    font-size: 30px;
}

.box {
    width: 18em;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

效果如下:


 如果文字的大小要随页面的缩放而变化,请使用无单位的值,以确保行高也会等比例缩放。

基线对齐(vartical-align)

vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

vertical-align属性应用场景

◾ (1)使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本内的图片


◾ (2)垂直对齐表格单元内容


注意:vertical-align 只对行内元素、表格单元格元素生效:不能用它垂直对齐块级元素!

取值:

  • vartical-align:top 文字顶部对齐(包括半行间距)

  • vartical-align:text-top 文字顶部对齐

  • vartical-align:baseline 默认对齐方式

  • vartical-align:text-bottom 文字底部对齐

  • vartical-align:bottom 文字底部对齐(包括半行间距)

  • vertical-align:sub 使元素的基线与父元素的下标基线对齐

  • vertical-align:super 使元素的基线与父元素的上标基线对齐

  • vertical-align:middle 使元素的中部与父元素的基线加上父元素x-height(译注:x高度)的一半对齐

  • vertical-align:(+-n)px 元素相对于基线上下偏移npx

  • vertical-align:x% 相对于元素的line-height值

  • vertical-align::inherit 从父元素继承vertical-align属性的值

通过下面这两张图可以更好地理解各个属性值的具体含义!


另外,当在表格中使用基线对齐时:

baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)使单元格的基线,与该行中所有以基线对齐的其它单元格的基线对齐。

top:使单元格内边距的上边缘与该行顶部对齐。

middle:使单元格内边距盒模型在该行内居中对齐。

bottom:使单元格内边距的下边缘与该行底部对齐。

注意:可以是负数。


链接: https://www.fly63.com/article/detial/10764

display: none;与visibility: hidden;的区别

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见,display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!