菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

深入理解css行内元素

原创
05/13 14:22
阅读数 195

课程推荐:前端开发工程师--学习猿地精品课程

一些前置知识
替换/非替换元素
替换元素
不直接显示html元素内容的元素,如img、input、iframe等
替换元素尺寸
video、iframe等默认宽高为300px、150px,img默认尺寸为0,加载图片后默认尺寸为图片原始尺寸
宽高可以通过width、height属性设置,或用css设置
非替换元素
元素内容直接显示在元素生成的框中,如div、span等
块级/行内元素
块级元素
宽度默认占满父元素的content区(盒模型),独占一行(即前后换行)
行内元素
宽度默认包裹内容,可换行
设置width、height对行内非替换元素不生效,垂直padding、border有显示效果但不影响布局,垂直margin无效
示例
span {
line-height: 60px;
border: 2px solid;
font-size: 12px;
background: green;
padding: 10px;
margin: 30px;
}
复制代码
file
如图可见,每行的高度仅由line-height控制并产生了行间距;border和padding水平方向生效,垂直方向只有显示效果(由背景和边框看出);margin水平方向生效,垂直方向无效;background会延伸到border中(同块级元素,将border设置成transparent时可见)
一些基本概念
匿名行内文本
不在任何行内元素中的字符串
示例


这是匿名行内文本
hehe


复制代码
em框(字符框)和内容区
对非替换元素
em框为非替换元素中一个字符形成的框
em框高度 = font-size(不等于实际渲染大小,实际渲染大小取决于字体) = 1em
内容区由em框串在一起组成
file
对替换元素
不存在em框
文本基线
可以按小写字母x的下边沿来理解
file
1ex = 字母x的高度
行间距
由line-height属性产生(如图,灰色框为行间距)
file
对非替换元素
line-height = font-size + 行间距(上下等分)
对替换元素
line-height不直接影响替换元素布局(只在替换元素的vertical-align设置为百分比时有影响,参见下文)
行内框inline-box
对非替换元素
inline-box高度 = line-height
对替换元素
inline-box高度 = 元素自身高度 + 垂直padding + 垂直border + 垂直margin(行内图片有垂直margin时,行框高度被这个margin影响了,而行框包裹inline-box,可见替换元素的inline-box高度包含margin)
file
行框
垂直方向包含一行中所有inline-box的上下边界,其最终高度受行内各元素vertical-align影响(因为vertical-align会导致inline-box在垂直方向上移动)
file
幽灵空白节点
每个行框前都有一个虚拟的宽度为0的inline空白节点,font-size、line-height继承自父元素;
幽灵空白节点的具体作用参考下文;
重要css属性详解
font-size
指定文字em框高度(字体实际显示大小由字体决定)
如图,实线框为em框,虚线框为em框拼接成的内容区
file

设置为em、百分比时,按父元素font-size计算(如父元素font-size: 20px,子元素font-size: 0.5em,则子元素实际font-size为20 * 0.5 = 10px)
font-size继承时(即自身没有设置font-size)得到的是计算值(如父元素font-size: 1em,需先计算成px值后再由子元素继承)

text-align
设置行内元素形成的一个或多个行框之间的对齐方式
用于block、inline-block元素(inline-block对外表现为inline、对内为block)
可继承

left(默认值)
right
center
justify(行框中文字由用户代理控制自适应向两侧对齐,最后一行无效)

示例
text-align: center;
当内部只形成一个行框时,行框整体居中
file
当形成多个行框时,各行框居中对齐
file
text-align: justify;
多个行框左右两侧对齐,最后一行无效
file
line-height
设置行高
对非替换元素来说,line-height = font-size + (上下等分的)行间距 = inline-box高度
可见非替换元素的inline-box高度完全由line-height决定
可用于任意元素
可继承
只直接影响行内非替换元素

normal(默认值)一般用户代理中为1.2
数字 如2.5,则行高为2.5 font-size,继承时直接继承2.5这个值,即子元素上line-height值也为2.5
长度 如1.5em,18px等,继承时按计算值(即先计算出父元素的line-height的px值再由子元素继承)
百分比 如50%,则行高为50%
font-size,继承时按计算值

line-height设置于块级元素时不直接生效,但决定了其内部行内元素形成行框时的最小高度
由于行框最前面存在的“幽灵空白节点”,该节点继承父元素(即外层的块级元素)的line-height,所以这个节点形成的inline-box高度为line-height,而行框需要包含一行中所有inline-box的上下边界,所以决定了行框的最小高度
vertical-align
指定行内元素在其所在行框中的垂直对齐方式
只能用于行内元素和替换元素
不可继承
首先解释两个概念
元素基线(baseline)
非替换由字体决定,可理解为小写字母x的下边缘
替换元素为其inline-box的底部
行框基线
可以理解为在幽灵节点中的插入一个虚拟的小写字母“x”,行框基线则是这个字母“x”的底部
因为这个虚拟的字母x无法设置其vertical-align,同时vertical-align也不会发生继承,所以这个虚拟节点的vertical-align值永远是默认值baseline,所以可以代表行框的基线
file
baseline(默认值)元素基线与行框基线对齐
middle 元素inline-box的垂直中心与行框基线上方0.5ex(ex相对父元素font-size计算,而幽灵节点中的虚拟字母x继承父元素font-size,则也可以理解为幽灵节点中x的垂直中心)处对齐
长度 元素基线与行框基线上方对应给定长度处对齐
百分比 元素基线与行框基线上方 给定百分比 * 自身line-height 处对齐(可见这里line-height对替换元素是有影响的)
top 元素inline-box的top与行框顶部对齐
bottom 元素inline-box的bottom与行框底部对齐
text-top 元素inline-box的top和父元素内容区(即幽灵节点中虚拟字母x的内容区或em框)顶部对齐
text-bottom 元素inline-box的top和父元素内容区(即幽灵节点中虚拟字母x的内容区或em框)底部对齐

display: inline-block;
对外表现为是inline元素,对内表现为block元素
在行框中的表现基本同替换元素
inline-block的基线
若inlin-block元素内部有inline元素,则基线为元素中最后一个行框的基线

若inlin-block元素内部没有inline元素,则基线为inline-block元素margin-box的底部

作者:lusq
链接:https://juejin.im/post/6891192695776411661
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

0/200
0 点赞
0 评论
收藏
为你推荐 换一批