做网站给女朋友,溧阳网站制作,定制app开发需求,宁阳网站建设1. vertical-align
众所周知#xff0c;vertical-align支持很多属性值#xff0c;足足可以组成一个足球队了#xff1a; 其中#xff0c;有个属性值暴露了vertical-align和line-height之间的基友关系#xff0c;大家猜猜看是哪个属性值#xff1f;哇塞#xff0c;好厉害…1. vertical-align
众所周知vertical-align支持很多属性值足足可以组成一个足球队了 其中有个属性值暴露了vertical-align和line-height之间的基友关系大家猜猜看是哪个属性值哇塞好厉害居然被大家一眼就看出来了没错就是“百分比值”
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的而是相对于line-height计算的。举个简单的例子如下CSS代码 实际上等同于 2. 和line-height背地里无处不在的基友关系
2.1 基本现象
要八卦vertical-align和line-height之间的关系我们不妨从一个极其简单的现象入手。假设我们有一个标签然后里面有一张图片我们的HTML代码就是这样子 然后表现就是一张图片呈现类似下面这样 恩看上去很正常一切都是理所当然。然而如果我们给这个元素增加一个背景色例如淡蓝色 会发现图片下面有一段空白空间 实际上这段空白间隙就是vertical-align和line-height携手搞的鬼首先大家一定要意识到这么一点对于内联元素(inline)vertical-align与line-height虽然看不见但实际上「到处都是」
2.2 幽灵空白节点
还是上面的图片下边缘留空隙的例子实际上这种行为表现就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是空格是透明的为了便于大家理解我就直接使用很明显的匿名inline box, 也就是字符代替。如下大家会发现图片下面的间隙依旧是那个间隙 下面要解释这个间隙就好解释了。下面我们让新增的文本inline-block化然后弄个白色背景显示其占据的高度 1. vertical-align默认值是baseline, 也就是基线对齐。而基线是什么基线就是字母X的下边缘参见“字母’x’在CSS世界中的角色和故事”一文。所以妹子图片的下边缘就和后面zxx中的字母x下边缘对齐见下图。而字符zxx本身是有高度的对吧于是图片下面就留空了 2. 而zxx文字的高度是由行高决定的
因此简单的图片下面留白行为表现本质上就是vertical-align和line-height背地里搞基造成的。
既然我们找到了这个问题的所在那么我们现在搞定这对基友中的随便一个不就可以了吗
★ 让vertical-align失效
图片默认是inline水平的而vertical-align对块状的元素无感。因此我们只要让图片display水平为block就可以了我们可以直接设置display或者浮动、绝对定位等如果布局允许。例如 ★ 使用其他vertical-align值
告别baseline, 取用其他属性值比方说bottom/middle/top都是可以的
★ 直接修改line-height值
下面的空隙高度实际上是文字计算后的行高值和字母x下边缘的距离。因此只要行高足够小实际文字占据的高度的底部就会在x的上面下面没有了高度区域支撑自然图片就会有容器底边贴合在一起了。比方说我们设置行高5像素 ★ line-height为相对单位font-size间接控制
如果line-height是相对单位例如line-height:1.6或者line-height:160%之类也可以使用font-size间接控制比方说来个狠的font-size设为大鸡蛋0, 本质上还是改变line-height值 3. 基本现象衍生垂直居中
由于「幽灵空白节点」的存在因此我们可以进一步衍生实现其他更实用的效果比方说任意尺寸的图片或者内联块状化inline-block的多行文字的垂直居中效果。就是借助本文的两位男主角vertical-align和line-height
在HTML5文档声明下块状元素内部的内联元素的行为表现就好像块状元素内部还有一个更有可能两个-前后看不见摸不着没有宽度没有实体的空白节点在对内联元素起着作用这个假想似乎存在的空白节点我称之为“幽灵空白节点”
你想啊图片(块状元素内部的内联元素)后面前面有个类似空格字符的节点然后就能响应line-height形成高度来达到文字的居中此时图片再来个vertical-align:middle当当当当就可以和这个被行高撑高的「幽灵空白节点」(近似)垂直对齐了 不过上面的效果并不是完全的垂直居中只是近似稍微仔细看可以看出来。为什么只是近似呢那是因为「幽灵空白节点」高度行高撑开其垂直中心是字符content area的中心而对于字符x而言都是比绝对中心位置要下沉的不同字体下沉幅度不一样换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方而这上下的偏差就是这里图片上下间距的偏差 因此要想完全垂直居中最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle然而呵呵既然称之为“幽灵”就表示不会受非继承特性的属性影响所以根本没法设置vertical-align:middle除非你自己创建一个显示的内联元素
我们就没有办法了吗当然不是“幽灵字符”可以受具有继承特性的CSS属性影响于是我们可以通过其他东西来做调整让字符的中线和字符内容中心线在一起或者说在一个位置上就可以了。有人可能要疑问了这能行吗啊是可以的
怎么搞很简单font-size:0, 因此此时content area高度是0各种乱七八糟的线都在高度为0的这条线上绝对中心线和中线重合。自然全垂直居中 4. 复杂现象
多年前曾分享过“text-align:justify下列表的两端对齐布局”的技术其中为了让任意个数的列表最后一行也是对齐排列在列表最后会辅助列表等宽的空标签元素来占位类似下面红色高亮HTML代码 同样的在白色背景下似乎看上去效果还不赖但是如果给div容器加个背景色~~,会惊讶的发现下面多了很大一块间隙 为了便于大家看其究竟我把占位i元素outline高亮下于是效果如下 下面问题来了上面的间隙是如何产生的下面的间隙是如何产生的如果去除这些间隙呢很多时候复杂问题是由简单问题组合而成的实际上这里的间隙现象的始作俑者和上面的简单现象一样都是vertical-align和line-height搞基带来的不好的影响。
按照之前问题解决方法我们可以直接来个line-height:0解决垂直间隙问题 结果图片和图片之间的间隙是没有了但是图片和最后的占位元素之间依然有个几像素的间距啊啊啊啊这究竟是什么鬼
简单现象的背后往往有大的学问接下来是本文的高潮了究其原因要说到inline-block元素和基线baseline之间的一些纠缠的关系
5. inline-block和baseline 一个inline-block元素如果里面没有inline内联元素或者overflow不是visible则该元素的基线就是其margin底边缘否则其基线就是元素里面最后一行内联元素的基线。
两个同尺寸的inline-block水平元素唯一区别就是一个空的一个里面有字符代码如下 会发现明明尺寸、display水平都是一样的结果呢两个却不在一个水平线上对齐为什么呢哈哈上面的规范已经说明了一切。第一个框框里面没有内联元素因此基线就是容器的margin下边缘也就是下边框下面的位置而第二个框框里面有字符纯正的内联元素因此第二个框框就是这些字符的基线也就是字母x的下边缘了。于是我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。框框2有个小彩蛋点击可以toggle其innerHTML会发现如果框框2里面没文字就和框框1举案齐眉了。 下面我们要做一件很有必要的事情用来帮助我们理解上面复杂例子在line-height值为0后的表现什么事情呢哈同境界模拟我们也设置框框2的line-height值为0于是就会是下面这样的表现 知道框框2为何又下沉了一点吗因为字符实际占据的高度是由行高决定的当行高变成0的时候字符占据的高度也是0此时字符高度上的起始位置就不再是原来行高的值所对应的位置a而是变成了字符content area的垂直中心位置b于是文字就一半落在框框2的外面了 由于文字字符上移了自然基线位置(字母x的底边缘)也往上移动了于是两个框框的垂直落差就更大了
OK明白了上面的简单例子也就能明白上面的复杂例子。紧接着如果我们在最后一个占位的i元素后面新增同样的x-baseline字符则 因为line-height等于0所以字符在垂直方向上的高度是从内容区域的垂直中心线处开始计算再加上图片的默认基线是底部所以x-baseline的垂直中线和上面一列的图片底端对齐。虽然字符占据的高度随着行高的改变而改变但是其基线仍然在最下面所以其和i标签基线的对齐导致图片和下边缘的间隙
现在行高line-height是0, 则最后的x-baseline的垂直中线就和上面一列的图片对齐而基线呢就在中线下面差不多半个x的高度地方而这个高度落差就是最后图片和容器的间隙高度值因为前面的i classjustify-fix是个空元素基线是自身的底部哈哈造业啊
OK一旦知道了现象的本质我们就能轻松对症下药了要么改造占位i元素的基线、要么改造“幽灵空白节点”的基线位置、要么使用其他vertical-align对齐方式~
首先来个最有意思的方法对吧改造占位i元素的基线。这个很简单对吧只要在空的i元素里面随便放几个字符就可以了例如里面有个x 会发现间隙没有了 为什么呢哈哈因为i元素的基线和“幽灵空白节点”的基线位置现在一致了没有了错位自然就不会有间隙啦
改造“幽灵空白节点”的基线位置哈哈使用font-size字体足够小时基线和中线会重合在一起什么时候字体足够小呢就是0. 于是CSS代码(line-height如果是相对值line-height:0也可以省掉) 总结
1.
