许少鹏 发表于 2018-11-7 09:28:19

《css世界》P136页疑问

本帖最后由 许少鹏 于 2018-11-7 09:30 编辑

操作系统:macOS 10.12.6
浏览器:Chrome 69.0.3497.100(正式版本)(64 位)
如下图所示:《css世界》P136页有一句话说:“由于文字字符上移了,自然基线位置(字母 x 的底边缘)也往上移动了,于 是两个框的垂直落差就更大了。”但是,在浏览器试这个例子,效果看起来是:当 line-height 变成 0 的时候, 字符占据的高度也是 0,此时,高度的起始位置就 变成了字符内容区域的垂直中心位置,所以边框的上边缘就从字符内容区域的垂直中心位置开始包住字符。也就是说,文字字符自然基线位置(字母 x 的底边缘)没有变,是边框向下移动了,所以才导致两个框的垂直落差加大。暂且抛开这点不说,如果实际如书中所说:“文字字符上移了,自然基线位置(字母 x 的底边缘)也往上移动”,那么结果不应该是含有文字的那个边框也跟着向上移动(因为左侧边框底边缘位置不变,两个边框要保持基线对齐,所以含有文字的边框要跟着文字的基线向上移动)才对吗?
所以有两个疑问:书中的这段描述是不是错误的?正确的情况应该是怎样?麻烦走过路过的大神指点一二,谢谢。

SYNB 发表于 2018-11-11 17:30:49

不要这么去想,这是一种想去理解浏览器具体渲染细节的想法。你只要知道各个属性的具体作用,当他们出现时,组合出的结果是什么就可以了。(在我看来,书中这么讲解是想让你更清楚明白的,类似让你脑海中有动画,帮助理解的,并不是浏览器的渲染细节)只要记住vertical-align现在是baseline对齐,
当line-height不为0时,此时有文字的盒子的基线是里面内联元素的基线,他要与没有文字的盒子的底边(基线)对齐即可;
当line-height为0时,有文字的盒子的文字因为line-height的作用,现在一半在外面,一半在里面,基线还是文字的下边缘,他还是要与没有文字的盒子的底边(基线)对齐即可;
没有不要去抠当line-height从不是零变为零是文字动了,还是盒子动了,感觉楼主这种思考方式是不利于css学习的。
仅仅是个人见解。

许少鹏 发表于 2018-11-23 08:51:41

SYNB 发表于 2018-11-11 17:30
不要这么去想,这是一种想去理解浏览器具体渲染细节的想法。你只要知道各个属性的具体作用,当他们出现时, ...

感谢,有帮助:handshake

hanxu 发表于 2019-3-10 20:33:46

SYNB 发表于 2018-11-11 17:30
不要这么去想,这是一种想去理解浏览器具体渲染细节的想法。你只要知道各个属性的具体作用,当他们出现时, ...

要是像你这么理解的话,那书中最后那句,就是废话一样,反而让人纳闷,文字根本没动,偏要说成文字上移了,还由此导致落差加大。
个人感觉哈,没有别的意思。
页: [1]
查看完整版本: 《css世界》P136页疑问