CSS vertical-align 属性与基线的那些事~

定义和用法:

vertical-align 属性设置元素的垂直对齐方式。

vertical-align只对内联元素(inline、inline-block、inline-table)、表格单元格元素(table-cell)生效。

说明:

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

默认值: baseline
继承性: no
版本: CSS1
JavaScript 语法: object.style.verticalAlign="bottom"

可能的值:

描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length  
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

使用:

在使用vertical-align 属性时要了解清楚基线这个概念。

基线:

基线的位置并不是固定的。

  • 在文本之类内联元素中,基线是‘ 默认值:baseline ’的下边缘位置

<div>
<span>默认值:baseline</span>
</div>

细心的朋友应该会发现,文本内容与盒子上下边之间存在着空隙。这是因为内联元素存在默认行高,而空隙正是被这默认行高撑开的。

  • img等元素基线也是下边缘。

 <div>
默认值:baseline
<img src="data:images/0.gif" alt="">
<img src="data:images/0.gif" alt="">
</div>

img元素下边的空隙是要和父元素的基线看齐造成的,而与第二张img之间的空隙是:它们之间存在回车、换行或者空格(解决办法1解决办法2

  • inline-block元素中,如果该元素内没有内联元素或者overflow不是visible,其基线就是margin的边缘。

<div>
123<span style="line-height: 50px;">默认值:baseline</span>
<img src="data:images/0.gif" alt="">
<span style="display: inline-block; overflow: hidden;height: 80px;">xxx</span>
</div>

小结:每个行内元素的基线都要向父元素字体基线看齐。当父元素或子元素的行高和字体大小样式改变的时候,会使得父元素基线位置改变,从而使得行内元素的位置整体上下移动。

父元素默认line-height和font-size的存在,也有可能会悄悄地影响布局。

前端小白,有哪些不足的地方,还请大家多多指教!

 
 

————————————————
资料参考:

CSDN作者:「651423」
原文链接:https://blog.csdn.net/u013007731/article/details/79242619

CSDN作者:「℡鞋子~特大号
原文链接:https://blog.csdn.net/weixin_43599212/article/details/107584461

简书作者:「Iam_Bling
原文链接:https://www.jianshu.com/p/ce7e4a997a2c

博客园作者:「lylszo

原文链接:https://www.cnblogs.com/lylszo/p/12622391.html

 

前端基础问题:CSS vertical-align 属性的更多相关文章

  1. 前端基础:CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  2. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  3. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  4. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  5. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  6. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(三)

    品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少 2). 家用电器模块 这个模块 简单 不需要写样式 版心居中对齐 ...

  7. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  8. 前端基础之CSS属性

    一.背景属性 <style> p { /*背景颜色*/ background-color: red; /*字体颜色*/ color: blue; /*宽度和高度*/ width: 600p ...

  9. 前端基础:CSS属性操作

    CSS属性操作 1.文本 文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色 ...

  10. 前端基础之--css中可被继承和不可被继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shado ...

随机推荐

  1. Python打包之setuptools

    参考链接1 参考链接2 参考链接3 一.setuptools介绍 Setuptools是Python Distutils的加强版,使开发者构建和发布Python包更加容易,特别是当包依赖于其他包时.用 ...

  2. protobuf基于java和javascript的使用

    目录 ProtoBuf介绍 整理下java和JavaScript的例子 demo测试 java作为服务端+客户端测试 客户端前端调用示例 项目地址 参考 ProtoBuf介绍 ProtoBuf 是go ...

  3. Java 8 Stream API 详解

    Java 8 中的 Stream 是对集合(Collection)对象功能的增强,它专注于对集合对象进行各种非常便利.高效的聚合操作(aggregate operation),或者大批量数据操作 (b ...

  4. I - Tetrahedron HDU - 6814

    题目链接:https://vjudge.net/problem/HDU-6814 题意:在[1,n]中随机取三个数a,b,c作为直角四面体的三条直角棱,求顶点d到ABC面的高的倒数平方的数学期望. 思 ...

  5. java.lang.IllegalArgumentException: MALFORMED

    java.lang.IllegalArgumentException: MALFORMED at java.util.zip.ZipCoder.toString(ZipCoder.java:58) a ...

  6. Android Studio配置colors.xml

    •colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <! ...

  7. (十六)Struts2的标签库

    一.简介 Struts2的标签库使用OGNL为基础,大大简化了数据的输出,也提供了大量标签来生成页面效果,功能非常强大. 在早期的web应用开发中,jsp页面主要使用jsp脚本来控制输出.jsp页面嵌 ...

  8. 【剑指offer】8:跳台阶

    题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 解题思路: 这种题目多为找规律求通用公式并最终用代码实现. 首先,考 ...

  9. Leedcode算法专题训练(二分查找)

    二分查找实现 非常详细的解释,简单但是细节很重要 https://www.cnblogs.com/kyoner/p/11080078.html 正常实现 Input : [1,2,3,4,5] key ...

  10. 『Spring Boot 2.4新特性』减少95%内存占用

    节省 95%的内存占用,减少 80%的启动耗时. GraalVM 是一种高性能的虚拟机,它可以显著的提高程序的性能和运行效率,非常适合微服务.最近比较火的 Java 框架 Quarkus 默认支持 G ...