编程开发 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 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 其它
相关文章推荐

文章标题上下轮番滚动.zip
2012-09-04 12:31 28KB 下载

【Java】获取指定HTML 文档指定的body、页中超链接的标题和链接、指定博客文章的内容
2017-08-20 22:09 2.59MB 下载
文章标题
AsyncTask连续启动多次时出现的bug
CodeIsPoisonous 2016-11-23 17:55 733

文章标题自动标注程序
2015-06-25 17:04 6.93MB 下载
文章标题
测试编辑器的效果这里写链接内容
zw15724584198 2016-10-18 20:47 694 文章标题
题目如下:建议使用QMutex QThread 3、生产者消费者:有一个生产者对象,还有一个消费者对象生产者用来向篮子对象中放苹果,每次1个。消费者从篮子中取走吃掉1个苹果,生产苹果时不能吃...
qq_1223113455 2016-05-25 21:50 599 文章标题
android 的进程基本知识当应用程序第一次启动的时候,Android会启动一个Linux 进程和一个主线程,默认情况下,所有组件都会在该进程和线程中运行,Android会为每一个应用程序分配一个单...
a512592151 2016-05-01 09:10 692 Cmake编译安装MySQL完整版
cmake编译安装MySQL
qq_28975017 2017-07-06 01:49 523 文章标题
## 类的常识 ## struct和class唯一的不同为在struct中未被标明为public,protected,private的默认为public,而class中默认为private,其余完全相...
qq_36921652 2016-12-25 23:09 630 文章标题
// // ViewController.m // UI-NO-26-多线程-GCD // // Created by 杨政涛 on 15/8/28. // Copyright (c...
baidu_31331955 2015-10-13 22:41 697
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:09 
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年9日历
2018-9-21 19:25:00
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库