ps做的图片能做直接做网站吗,微信wordpress,二级域名可以做网站,新网网站管理1. 一些字面意思
“行高”是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念#xff0c;我们刚学英语的时使用的那个英语本子每行有四条线#xff0c;其中底部第二条线就是基线#xff0c;是a,c,z,x等字母的底边线。下图的红色线即为基线 2. line-height与l…1. 一些字面意思
“行高”是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念我们刚学英语的时使用的那个英语本子每行有四条线其中底部第二条线就是基线是a,c,z,x等字母的底边线。下图的红色线即为基线 2. line-height与line boxes高度
css中起高度作用的应该就是height以及line-height了吧如果一个标签没有定义height属性(包括百分比高度)那么其最终表现的高度一定是由line-height起作用即使是IE6下11像素左右默认高度bug也是如此。待我慢慢叙来
先说一个大家都熟知的现象有一个空的div如果没有设置至少大于1像素高度height值时该div的高度就是个0。如果该div里面打入了一个空格或是文字则此div就会有一个高度。那么您思考过没有为什么div里面有文字后就会有高度呢
这是个看上去很简单的问题是理解line-height非常重要的一个问题。可能有人会跟认为是文字撑开的文字占据空间自然将div撑开。我一开始也是这样理解的但是事实上深入理解inline模型后我发现根本不是文字撑开了div的高度而是line-height要证明很简单(如下测试代码) 结果是如此的显而易见test1 div有文字大小但行高为0结果div的高度就是个0test2 div文字大小为0但是有行高为20像素结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容
到底这个line-height行高怎么就产生了高度呢在inline box模型中有个line boxes这玩意是看不见的这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字如果它们在一行显示你艾佛森再牛逼对不起只有一个line boxes罩着你但“春哥纯爷们”这5个字要是竖着写一行一个那真是够爷们一个字罩着一个line boxes于是总计五个line boxes。line boxes什么特性也没有就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的
其实line boxes不是直接的生产者属于中层干部真正的活儿都是它的手下 – inline boxes干的这些手下就是文字啦图片啊span之类的inline属性的标签啦。line boxes只是个考察汇报人员考察它的手下谁的实际line-height值最高谁最高它就要谁的值然后向上汇报形成高度。
3. 行高的垂直居中性
行高还有一个特性叫做垂直居中性。line-height的最终表现是通过line boxes实现的无论line boxes所占据的高度是多少其占据的空间都与其中的文字内容共用水平中垂线也就是从水平中垂线开始在竖直方向上向两边进行的平分这种行为特性就叫做垂直居中特效 这一重要的特性可以用来实现文字或图片的垂直居中对齐
4. 在单行或多行或图片垂直居中实现上的应用
4.1 单行文字的垂直居中对齐
网上都是这么说的把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的但其实也是有问题的。问题在于height看我的表述“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”差别在于我把height去掉了这个height是多余的您不信您可以自己试试
4.2 多行文字的垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div里面文字单行或多行显示字体大小有大有小的情况怎么办呢方法之一就是借助于line-height借助其的垂直居中特性 line boxes的高度取决于它的下属职员的最高高度而这个高度由一个不占据任何空间的空格完成这个空格继承了父元素设置的150px的行高再将其font-size设置为0。同时我们在分隔line boxes的基础上又要保持空格i和文字span在一行上需要设置display属性为inline-block。最后再加上line boxes的垂直居中特性导致的span内的文字和i内的空格都是在各自的line boxes内垂直居中最后的最后因为文字间默认的基线对齐所以文字和字母是下底边对齐而并没有顶行出现在顶部正所谓line-height和vertical-align的基友情深 这里修改空格为字符AA并重置font-size的值然后设置为居中对齐的效果
5. 行高在文章显示中的应用
一般社交型的网站都会有发博文或写日志的功能其中发表后的文章显示也是有学问的其中之一就是line-height行高
首先要知道行高的几种表示方法px/em或normal或百分值或数值或inherit继承
在显示文章的box里px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的使用px定值由于继承性无法实现根据文字大小自动调整间距会出现大号文字重叠的现象。normal也是不行的一般文章显示最好是650像素的宽度1.5倍的行距较好。一般浏览器的normal值在1~1.2之间使用normal必然文字间距过小阅读吃力。百分值也有继承性但是有个很搓的办法可以实现文字间距自动适应于文字的大小那就是使用“”通配符例如.article_box {line-height:150%;}就不会出现文字重叠的情况了。网易博客就是使用的这个方法下图为证 为什么说这个方法搓呢使用“*”通配符大大增加了css的渲染效率低而且有更好的方法就是使用数值。150%虽然和1.5在值上是一样的但是它们也是有差别的差别在于继承性使用百分比会直接根据当前字体尺寸计算line-height的值然后以px像素为单位继承下去而1.5则是先继承1.5这个值遍历到了该标签再去根据字体尺寸计算line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了
总结
1. css中起高度作用的应该就是height以及line-height当height被设置为0的时候起作用的就是line-height而line-height的表现是由内部的line boxes决定的又因为line boxes什么特性也没有就只有高度特性。所以一个没有设置height属性的div的高度实际是由一个一个的line boxes的高度堆积而成的
2. line-height还具备的一个垂直居中特性是指无论line boxes所占据的高度是多少其占据的空间都与其中的文字内容共用水平中垂线也就是从水平中垂线开始在竖直方向上向两边进行平分
3. 借助与line-height的垂直居中特性实现多行文字的居中首先是设置一个空的内容将其行高设置的极高(这样就撑开了外部容器的高度)而其余的文字的行高设置一般的高度这样因为垂直居中特性导致空的内容和文字都处于各自行高的垂直居中位置最后根据line-height和vertical-align的基友关系实现middle的居中对齐
