深入理解line-height与vertical-align——前端布局常用属性

 line-height、font-size、vertical-align是设置行内元素布局的关键属性。这三个属性是相互依赖的关系,改变行间距离、设置垂直对齐等都需要它们的通力合作。下面将主要介绍line-height与vertical-align:

行高

定义】

  line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容,而不会直接影响块级元素,也可以为一个块级元素设置line-height,但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时,line-height定义了元素文本基线之间的最小距离,即最小行高

  [注意]如果块级元素中的某一个子级内联元素设置的行高比最小行高大,则行框以设置行高来渲染;如果小,则以最小行高来渲染。因为,每一个子级内联元素的行高都是行内框的高度,只有一行中所有的行内元素(包括代表父级元素的匿名文本),最大的行内框高度才能成为整行的行高。下面会有详细解释

  值: <length> | <percentage> | <number> | normal | inherit

  初始值: normal(通常line-height:normal的值为font-size值的1.2倍)

  应用于: 所有元素

  继承性: 有

  百分数: 相对于元素的字体大小font-size

要深入理解line-height,需要理解关于行框构建的常用术语。

内容区

  对于行内非替换元素或匿名文本某一部分,font-size确定了内容区的高度

行内框

  内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px,line-height为21px,则相差6px。用户代理将这6像素一分为二,将其一半分别应用到内容区的顶部和底部,

这就得到了行内框

 

当line-height小于font-size时,行内框实际上小于内容区

行框

  行框定义为行中最高行内框的顶端到最低行内框底端之间的距离,而且各行框的顶端挨着上一行行框的底端

框属性

  内边距、外边距和边框不影响行框的高度,即不影响行高

  行内元素的边框边界由font-size而不是line-height控制

  外边距不会应用到行内非替换元素的顶端和底端

  margin-left、padding-left、border-left应用到元素的开始处;而margin-right、padding-right、border-right应用到元素的结尾处

【替换元素】

  行内替换元素需要使用line-height值,从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说,图像本身的高度无关紧要,关键是line-height的值

  默认地,行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框,内容区会上移。替换元素的基线是正常流中最后一个行框的基线。除非,该替换元素内容为空或者本身的overflow属性值不是visible,这种情况下基线是margin底边缘

垂直对齐

【定义】

  vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高

  值: baseline | sub | super | top | text-top | middle | bottom |  inherit

  初始值: baseline

  应用于: 行内元素、替换元素、表单元格

  继承性: 无

  百分数: 相对于元素的行高line-height

  [注意]IE7-浏览器中vertical-align的百分比值不支持小数行高,且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样,常用的解决办法是将行内元素设置display:inline-block

vertical-align:baseline(元素的基线与父元素的基线对齐) vertical-align:sub(降低元素的基线到父元素合适的下标位置) vertical-align:super(升高元素的基线到父元素合适的上标位置) vertical-align:bottom(把对齐的子元素的底端与行框底端对齐) vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐) vertical-align:top(把对齐的子元素的顶端与行框顶端对齐) vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐) vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐) vertical-align:( -n)px(元素相对于基线上下偏移npx) vertical-align:x%(相对于元素的line-height值) vertical-align:inherit(从父元素继承vertical-align属性的值)

【inline-block底部空隙】

  inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上相当于图像底边与匿名文本大写英文字母X的底边对齐);而匿名文本是有行高的,继承父级元素设置的行高,默认为normal(即font-size的1.2倍),所以X的底边距离行框有一段距离,这段距离就是图像留出的空隙

  于是,解决这个问题有以下几个解决办法

  1、display:block

  因为垂直对齐方式只能作用于替换元素和行内元素,更改为块级元素,会使垂直对齐方式失效

  2、父级的line-height: 0

  这样使匿名文本与行框的距离为0

  3、vertical-align: top/middle/bottom

应用

1】多行文本水平垂直居中

div{ height: 100px; width: 200px; background-color: pink; text-align: center; } span{ display:inline-block; vertical-align: middle; line-height: 20px; width: 100px; } i{ display: inline-block; height: 100%; vertical-align: middle; }
    <div> <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span> </div> 

[注意]好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值,但高度其实是没有必要设置的。仅仅设置行高就可以,文字在一行中本身就是垂直居中显示的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UWP开发入门(四)——自定义CommandBar

UWP开发入门&#xff08;四&#xff09;——自定义CommandBar 原文:UWP开发入门&#xff08;四&#xff09;——自定义CommandBar各位好&#xff0c;再次回到UWP开发入门系列&#xff0c;刚回归可能有些不适应&#xff0c;所以今天我们讲个简单的&#xff0c;自定义CommandBar&…

(转)Cobbler无人值守批量安装Linux系统

本文目录&#xff1a; 1.1 pxe安装系统 1.2 cobbler基本介绍 1.3 安装和配置cobbler 1.3.1 安装cobbler 1.3.2 配置dhcp和tftp 1.4 cobbler从本地光盘安装系统 1.4.1 生成distro 1.4.2 提供kickstart文件 1.4.3 提供profile 1.4.4 开始安装 1.5 比pxekickstart好的地方 1.6 让新…

mysql 数据库 应用_MySQL数据库的应用

1、创建一个以你名字为名的数据库&#xff0c;并创建一张表student&#xff0c;该表包含三个字段(id&#xff0c;name&#xff0c;age)&#xff0c;表结构如下&#xff1a;mysql>desc student;---------------------------------------------------------| Field | Type | N…

Spring集成–从头开始应用程序,第1部分

开始之前 在本教程中&#xff0c;您将学习什么是Spring Integration &#xff0c;如何使用它以及有助于解决哪些问题。 我们将从头开始构建一个示例应用程序&#xff0c;并演示Spring Integration的一些核心组件。 如果您不熟悉Spring&#xff0c;请查看我编写的另一本有关Spri…

初学者Web介绍一些前端开发中的基本概念用到的技术

Web开发是比较费神的&#xff0c;需要掌握很多很多的东西&#xff0c;特别是从事前端开发的朋友&#xff0c;需要通十行才行。今天&#xff0c;本文向初学者介绍一些Web开发中的基本概念和用到的技术&#xff0c;从A到Z总共26项&#xff0c;每项对应一个概念或者技术。 初学者W…

幻方问题

把1~16的数字填入4x4的方格中&#xff0c;使得行、列以及两个对角线的和都相等&#xff0c;满足这样的特征时称为&#xff1a;四阶幻方。 四阶幻方可能有很多方案。如果固定左上角为1&#xff0c;请计算一共有多少种方案。 比如&#xff1a; 1 2 15 16 12 14 3 5 13 7 10 4 8 …

Xcode 快捷键及代码格式化

按住apple键点击类名就可以定位到这个类中查看相关定义&#xff08;在日后的开发中我们会经常这么来做&#xff0c;毕竟要记住iOS开发中所有的API是不现实的&#xff0c;有些API我们可以通过这种方法来查找&#xff09; PS&#xff1a;下面都是网上百度后经过我自己整理&#x…

mysql 4字节utf8_MySQL 4字节utf8字符更新失败一例

MySQL 4字节utf8字符更新失败一例业务的小伙伴反映了下面的问题问题有一个4字节的utf8字符????插入到MySQL数据库中时报错java.sql.SQLException: Incorrect string value: \xF0\xA0\x99\xB6 for column c_utf8mb4 at row 1数据库中存放该字符的列已经定义为utf8mb4编码了&…

主席树学习小结(POJ 2104)

在高中的时候就听到过主席树了&#xff0c;感觉非常高端&#xff0c;在寒假的时候 winter homework中有一题是查找区间第K大的树&#xff0c;当时就开始百度这种网上的博客&#xff0c;发现主席树看不懂&#xff0c;因为那个root[i]&#xff0c;还有tx[x].l与tx[x].r是什么意思…

通过Spring Social推特StackExchange –第1部分

本文将介绍一个快速的附带项目-一个自动从各种Q&#xff06;A StackExchange网站上发布热门问题的机器人&#xff0c;例如StackOverflow &#xff0c; ServerFault &#xff0c; SuperUser等。我们将为StackExchange API构建一个简单的客户端&#xff0c;然后进行设置使用Sprin…

下拉菜单

<!Doctype html> <html> <head> <meta charset"utf-8"> <title>下拉菜单</title> <style> *{ margin:0; padding:0; } ul{ list-style:none; overflow:hidden; background-color:#333; } li{ float:left; } li a,.drop…

51Nod 1753 相似子串

题目大意: 两个字符串相似定义为&#xff1a; 1.两个字符串长度相等 2.两个字符串对应位置上有且仅有至多一个位置所对应的字符不相同 给定一个字符串&#xff0c;每次询问两个子串在给定的规则下是否相似。给定的规则指每次给出一些等价关系&#xff0c;如‘a’b&#xff0c;‘…

deepin下Clion连接mysql_CLion如何添加依赖库 ? 需要把mysql/Connector c++放入 用cpp连接数据库...

目前我把下载的mysql/Connector 下载后放在了project内 但是报错信息如下报错信息如下In file included from /Users/wsgdrfz/study/c/Libary_System/librarySystem/sqlConnection.h:/Users/wsgdrfz/study/c/Libary_System/librarySystem/sqlFiles/include/mysql_connection.h7…

[开源JVM] yvm - 自制Java虚拟机

中文 | English | | | YVM是用C写的一个Java虚拟机&#xff0c;现在支持Java大部分功能&#xff0c;以及一个基于标记清除算法的并发垃圾回收器. 不过还有很多bug等待修复。 感兴趣的朋友pull request/fork/star吧。 Github repo https://github.com/racaljk/yvm 已支持语言…

MacOSX环境上的多个Java JDK

同样&#xff0c;这是在Mac&#xff08;OSX 10.8.x &#xff09;上配置Java开发环境的一个小技巧。 如果您现在真的开始&#xff0c;我建议您阅读我以前的文章之一 &#xff0c;这是一种快速&#xff0c;干净的方法&#xff08;我想&#xff09;来设置环境变量并开始Java编码。…

浏览器的标准模式和怪异模式

面试题之浏览器的标准模式和怪异模式 1.浏览器的标准模式和怪异模式到底是什么&#xff1f; 标准模式&#xff1a; 是浏览器按照W3C标准解析执行代码&#xff0c;这样用规定的语法去渲染&#xff0c;就可以兼容各个浏览器&#xff0c;保证以正确的形式展示网页。 怪异模式&…

printf函数输出超出int时怎么办

int、long、long long在printf中的格式 https://blog.csdn.net/fz_ywj/article/details/8107582 蓝桥杯 2796. BASIC-11 十六进制转十进制 从键盘输入一个不超过8位的正的十六进制数字符串&#xff0c;将它转换为正的十进制数后输出。   注&#xff1a;十六进制数中的10~15…

升级glibc的影响_Java 11 升级:“债务”“危机”

导读&#xff1a;AJDK11(阿里内部基于openJDK11的定制版本)在19年3月左右发布&#xff0c;到现在也快1年了&#xff0c;不过目前整体使用的面还是比较窄&#xff0c;特性被了解的也不是很多&#xff0c;Java11作为OpenJDK发布的LTS版本&#xff0c;对我们来说&#xff0c;还是需…

The processing instruction target matching [xX][mM][lL] is not allowed.

原因&#xff1a;xml标签 必须在第一行。 转载于:https://www.cnblogs.com/wangkang0320/p/7569100.html

周五尾盘上涨,配合周末消息,周一套人的经典实例

吸取中国软件的教训&#xff1a;注意这次是温柔的&#xff0c;只是收了个十字星&#xff0c;因为前期上涨后的需要缓和调整一下&#xff0c;而不是为了出逃。以后注意找个出逃的例子1、上周五尾盘上涨2、周末利好消息3、周一开盘高开4、高开后快速下探&#xff08;5分钟内&…