编程开发 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
移动开发 架构设计 编程语言 互联网 开发经验 Web前端 开发总结
开发杂谈 系统运维 研发管理 数据库 云 计 算 Java开发
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
  编程开发知识库 -> Web前端 -> 深入理解行内元素的布局 -> 正文阅读
 

[Web前端]深入理解行内元素的布局[第1页]

前言
总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和vertical-align两个属性在布局方面的使用。
原文博客地址:深入理解行内元素的布局
知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书)
博主博客地址:Damonare的个人博客
白茶清欢无别事,我在等风,也在等你。??
正文
讲道理line-height和vertical-align 这对基是十分低调的,日常开发中碰到的很多莫名其妙的bug很大一部分都是这俩货搞出来了的,但很少有人知道这对基的罪恶,因为可能花式改写一下CSS代码问题就解决了。实际上搞明白这俩东西才能让我们在布局工作中游刃有余。本文接下来就通过这对基的关系来了解内联元素具体的布局问题~we are刨根问底拦不住~??
? 读这篇文章之前请确定您有以下知识基础:
line-height的数字值是和font-size大小相关的; vertical-align的百分比值是和line-height值相关的; 引出vertical-align
首先来看一个??:

<div class="test">
  <img src="https://sfault-avatar.b0.upaiyun.com/344/542/3445428434-5631776c183b2_huge256" alt=""><span>Xx</span>
</div>


.test {
    background: red;
}
img {
    width: 50px;
    height: 50px;
}
span {
    background: white;
}

下面无实例内容的话戳这里
? 如上代码片段result所示,图片下面有一明显的红色条条,??什么鬼,很诡异不是么,我要的是img充满整个div啊!!!好吧,我加了一个额外的inline元素填写内容Xx,发现原来多出来的那一块正好是文字的下半空白部分。吆喝,这么巧?实际上,如果将这里的Xx内容去掉,只剩下img,那个条条依然存在,表现行为好像父元素div里面除了img元素还有一个空白的元素一样,??姑且叫它空白节点吧(肉眼中不存在却在影响着布局),这个是比较诡异的一个表现,查标准没找到有相关的说明。但请将这个空白节点先记住,我们的重点是研究条条是咋出来的。这条条看上去貌似是文本和图片垂直方向上对齐生成的,那么这就引粗来一个问题,inline元素默认的垂直方向的对齐方式是什么样的?也就是vertical-align的默认值是啥?
? OK,??I know you know。vertical-align默认值是baseline,OK,那就先来挖一挖vertical-align具体是个什么鬼。
Vertical-align(1)
vertical-align这个属性我感觉是CSS中最复杂的属性之一了…好多问题概念也让人看不懂…一方面它是作用在inline元素和table-cell元素身上,属性值特别多,另一方面该属性规范里并没有一个定论,导致一些属性不同浏览器的实现也不同,所以兼容性问题很多。对于一些 可替换元素,比如textarea, HTML标准没有说明它的基线,这意味着对其使用这个关键字,各浏览器表现可能不一样。我们这里先研究一下它的默认值baseline。
baseline字面意思就是基线,何为基线?首先请记住下面这几个概念:
基线:小写字母’x’的下边缘所在的那条线; x-height: 小写字母’x’的高度; ex: 1ex就是一个小写字母’x’的高度,类似em单位,注意,ex和em都是相对单位;
我们看下CSS标准里怎么说的:相关标准链接
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
中文翻译如下:
‘inline-block’元素的基线是标准流中最后一个line box(行盒)的基线, 除非这个line box里面既没有in-flow line boxes(行内框)或者本身’overflow’属性的计算值不是’visible’, 这种情况下基线是该元素margin底边缘。
那么上面现象就很容易解释的通了,我们知道img元素默认的表现形式和inline-block元素一样,它的基线就是margin底边缘,而inline元素本身是有高度的,两者基线对齐自然就如上面那样表现了。??
??好吧,等会,到这里,我们发现实际又多了俩概念——inline元素的高度问题和标准里说的line box(IFC)。
首先我们先来看下inline元素的高度问题,即——line-height属性。
Line-height
CSS中起高度作用的只有height和line-height两个属性吧。如果一个元素没设置height那么其最终的高度一定是由line-height决定的。之前inline元素的高度我以为是文字内容撑开的,但实际研究了下并不是这样的,看下面的??:

.demo1{
  font-size: 20px; 
  line-height: 0; 
  border: 1px solid blue; 
  background: red;
}
.demo2{
  font-size: 0; 
  line-height: 20px; 
  border: 1px solid red;
  background: yellow;
}

HTML代码:

<div class="demo1">测试</div>
<div class="demo2">测试</div>

下面没内容戳这或者自行拷贝代码本地测试
如上可证明,inline元素的高度决定者是line-height,并不是文字内容撑开的。??
CSS规范里对line-height的默认值有这么一句话:
We recommend a used value for ‘normal’ between 1.0 to 1.2.
只是推荐…??是不是说实际上各个浏览器对于line-height的默认值实现不一定是一样的,但都介于1.0-1.2之间。具体各大浏览器的实现值待查证。这里需要记住line-height的默认值是啥就OK。
IFC
在之前的博文CSS的盒子模型里面,有拓展过相关知识,简短的介绍了下BFC和IFC,相较于BFC,IFC要复杂得多,规范里IFC的篇幅也要比BFC多得多。
简要总结下BFC,即块级元素可能会触发块级格式上下文(BFC),在块级格式上下文中,块级盒子竖直方向排列,不受上下文外部元素影响,自成一方世界。块容器盒指的是那些包含元素的盒子,块容器盒可能包含其它块级盒,也可能生成一个行内格式上下文(IFC)。??
但块容器盒要么只包含行内盒,要么只包含块级盒。但通常会同时包含两者。在这种情况下,将创建匿名块盒来包含毗邻的行内级盒。
看个??:

//demo1
<div>
  Some inline text 
  <p>followed by a paragraph</p> 
  followed by more inline text.
</div>
// demo2
<p>
  Some inline text 
  <span>followed by a paragraph</span> 
  followed by more inline text.
</p>

如上,demo1将创建两个匿名块盒,一个包含 p前面的文本 (Some inline text), 一个包含 p 后面的文本(followed by more inline text)。
demo2将生成一个行内格式上下文,生成一个匿名行盒(line box),里面包含两个匿名行内盒(inline box),Some inline text和followed by more inline text.和一个span行内盒。
OK,至于怎么触发块级格式上下文请看块格式化上下文。这里只为了说明IFC而介绍下BFC。
当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table时,称它为行内级元素。
行内级元素生成行内级盒(inline-level boxes),参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。
规范里IFC文字很多,提炼下我们需要的:
如果一个矩形区域,包含着一些排成一条线的盒子,称为line box。
一个line box的宽度,由他的包含块(containg block)和floats的存在情况决定。line box的高度,由你给出的代码决定。(line-height),即所有inline box的最大高度差。
当盒子的高度小于父级盒子高度时,垂直方向的对齐’vertical-align’属性决定。
Vertical-align(2)
在上面的vertical-align(1)中主要了解了什么是baseline,以及它是如何确定的。我们继续研究这个属性,看下面说明表格:
值 描述 baseline 默认。元素放置在父元素的基线上。 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。
除了baseline我们已经很了解之外,其它几个属性我们貌似也能看懂,唯一的问题可能是父元素的顶端低端都是什么鬼???需要确定一下,好的再次拿我们第一个例子来讲解,但我们需要变一下,加点东西进去:

<div class="demo">
  <span class='line-box'>
    <img src="https://sfault-avatar.b0.upaiyun.com/344/542/3445428434-5631776c183b2_huge256" alt=""><span>Xx</span>
  </span>
</div>


.demo {
  background: red;
}
.line-box {
  background: blue;
  line-height: 200px;
}
.line-box img {
  vertical-align: text-bottom;
  width: 50px;
}
.line-box span {
  margin-left: 20px;
  color: yellow;
}

实例
通过IFC部分我们知道,之前的例子实际上有**生成一个匿名行盒(**line box),虽然他可以继承父元素的属性,但我们没法直观的去操作它??,OK,把这个匿名行盒变成可控的span元素就好了??,如上demo所示。
我们通过设置line box的line-height来控制line-box的高度,然后设置img的vertical-align属性值,来观察具体的对齐方式。OK,读者你可以自行本地测试或是直接更改fiddle内容来看效果。但这里很容易有个误区,就是父元素的middle,top这些值是怎么确定的?如上,我们通过更改img元素的vertical-align的值,来观察区别,表面上看着好像是父元素根据Xx内容来进行确定的,实则不然。我们再来看一个例子:
下面没内容戳这
上面例子中,我们更改了Xx的对齐方式,发现了很奇特的现象??,当Xx设置为text-bottom或是text-top的时候父元素(ling box)被撑大了??,但这另一方面这也证明了,父元素的基线和中线等并不是由文本Xx决定的,谁决定的呢?前面提过的那个空白节点决定的!??这个空白节点实际上是理解内联元素布局的重点!不知道它的存在,很多问题是搞不清楚的。那么这个空白节点又到底是怎么影响布局的呢?前面说过基线的决定着是小写字母x,这个时候问题就来了,可能你早就想问了,不同字体下面的小写字母x底部边缘肯定是有区别的啊,好,我们在研究下font-family。
Font-family
我们再来看一个??:
下面没示例内容请戳这
关于字体具体的知识可以看这篇博文,我简单的总结一下重点。首先字体是有一个字体度量的概念的,
一款字体会定义一个 em-square,它是用来盛放字符的金属容器。这个 em-square 一般被设定为宽高均为 1000 相对单位,不过也可以是 1024、2048 相对单位。 字体度量都是基于这个相对单位设置的,包括 ascender、descender、capital height、x-height 等。注意这里面的值是可以超出em-square范围的。 在浏览器中,上面的 1000 相对单位会按照你需要的 font-size 缩放。
看上面的例子我们也能看出来,实际上一个内联元素是有两个高度的content-area高度(background-color实际渲染的那个高度)和 virtual-area 高度(实际区域占空间的高度也就是line-height)。??
结论 所有的内联元素都有两个高度
基于字体度量的 content-area virtual-area(也就是 line-height ) 内联元素都有一个空白节点存在着来确定基线等概念; 基线的确定和字体有关,和内部的内联元素无关; IFC很难懂; line-box(行盒) 的高度的受其子元素的 line-height 和 vertical-align 的影响; 我们貌似没法用CSS来更改字体度量。
题目确实有些标题党的嫌疑了,实际上也没有挖很深,比如vertical-align在inline-table元素的作用效果以及sup,sub等其他的属性值,以及line-height具体的属性值如何生效的都没有涉及。我想把这篇文章重点放在布局上,而且篇幅也有限。没涉及的请自行查阅资料吧,在此说声抱歉。??
??以上。
后记
? 从刚开始做前端,身边CSS简单易学但很坑的声音就不绝于耳,很多人也说HTML、CSS一星期就能学会,现在渐渐觉得真是谬论。是,单纯掌握浮动,定位,对齐,居中等基础能解决一大半的布局问题,甚至百分之百,因为很多情况真的是变个写法莫名其妙就实现了想要的结果。可能这也是很多人说CSS坑的原因,但实际上很多开发者是不看CSS标准的,模仿个网站或是看着视频写个demo就觉得掌握了CSS,远远不是这样的。渐渐觉得深挖CSS要比深挖JavaScript难的多…你觉得CSS坑?谁让你不看标准呢….???♀?
阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。
本文已收录于以下专栏:

发表评论
HTML/XML objective-c Delphi Ruby PHP C# C++ JavaScript Visual Basic Python Java CSS SQL 其它
相关文章推荐
浅谈行内元素的内边距padding和外边距margin
行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ b...
zhouziyu2011 2017-03-08 21:22 1829 CSS学习笔记——盒模型,块级元素和行内元素的区别和区别
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后,自己的主要注意力几乎都放在JavaScript上面了,对CSS和HTML这方面其...
jtbeibei 2016-01-08 17:51 464 JS中比较2个字符串内元素的不同(字符1, 字符2, 分隔符可选)
JS中比较2个字符串内元素的不同(字符1, 字符2, 分隔符可选) 我用来比较在2个Oracle数据库中导出的表有那些没导入成功.
renfufei 2014-09-18 15:13 4702 从一道题谈C++容器内元素的类型约束
《C++ primer》第四版中文267页,9.1.2元素类型必须支持赋值运算。元素类型的对象必须可以复制。不久前我复习的时候还标记了一下,没想到理解得还不深刻啊。。
Dinosoft 2011-05-23 23:40 2069 css盒模型和块级、行内元素深入理解
内联元素(行内元素) 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi over...
pql925 2016-07-26 15:30 1562 栋栋晓05:详解css布局中的display属性(行内元素和块级元素)
display属性是我们写css代码,做css布局经常会用到的属性,把display用熟练了,写起css布局得心应手。首先,所有主流浏览器都支持 display 属性。其次,我们都知道display ...
qq_24958837 2015-03-22 16:16 482 行内元素和块级元素的区别
注:行内元素会再一条直线上,是在同一行的。我是行内元素SPAN标签   我是行内元素strong标签 注:块级元素各占一行。是垂直方向的! 我是块级元素div标签 我是块级元素P标签 ...
qq_33562281 2016-11-02 21:10 56 行内元素和块级元素的区别
页面中元素一般分为两种:块级元素,行内元素(内联元素),即然分为两种元素,那么他们之间必然有区别: 1.块级元素总是独自占一行,前面和后面就好像有个换行符,内联元素总是和其它的内联兄弟占一行 2....
x8505122 2014-10-16 10:13 368 行内元素和块元素的区别
注:行内元素会再一条直线上,是在同一行的。我是行内元素SPAN标签   我是行内元素strong标签 注:块级元素各占一行。是垂直方向的! 我是块级元素div标签 我是块级元素P标签...
xl684198 2017-03-14 19:45 124 深入认识CSS的行内元素
一直从事ios开发,前段时间接触到前端,简单的学习了一下css,下面给大家简单的说一下,我使用css来写一个页面的心得与体会。.我是在w3c那里,通过看文档对css有了初步的认识,css的知识点整体看...
bwf_erg 2017-03-10 18:42 60
Jizhen_Tan +关注
原创 35 粉丝 49 喜欢 0 码云  
他的最新文章 更多文章
Javascript中的this 从CSS盒子模型说起 前端进阶之路 理解Node.js的事件轮询
在线课程

【免费】搜狗机器翻译技术分享
讲师:

深度学习在推荐领域的应用和实践
讲师:吴岸城
热门文章 前端面试大全
10113
漫谈前端之路
8042
网络协议分析(最全)
4106
十大经典算法总结(Javascript描述)
3817
前端进阶之路
3639
0
  Web前端 最新文章
echarts莫名缩小,并且宽度不能更改,生成时
JAVA后台 关于如何从后台传递信息在jsp前端
HTTP协议(二)
阿里云服务器的域名解析解决方案
live-server的安装与使用
HTML播放视频(兼容IE低版本)
windows下配置nginx+php环境
Chorme 开代理后无法打开jsp页面的问题
分布式任务调度平台XXL
作用域
上一篇文章      下一篇文章      查看所有文章
加:2017-10-29 21:49:14  更:2017-10-29 21:51:06 
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年10日历
2018-10-18 23:42:55
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库