chnwillliu 最近的时间轴更新
chnwillliu

chnwillliu

V2EX 第 218858 号会员,加入于 2017-03-04 15:15:38 +08:00
今日活跃度排名 7480
根据 chnwillliu 的设置,主题列表被隐藏
二手交易 相关的信息,包括已关闭的交易,不会被隐藏
chnwillliu 最近回复了
6 天前
回复了 wencan 创建的主题 前端开发 一个前端样式样式既要又要的问题
把 min-height:100% 改成 height:100% 不就行了,height:100% 也不妨碍 overflow 溢出到 body ,还能让子容器继承和分配。
元素的 margin 盒子贴着包含块的左边,哪怕左边有 float:left 元素飘在那里占着位置。如果 margin left 没有 float 元素的宽度大你就会看到 float 元素和这个元素的盒子重叠。
116 天前
回复了 MarkToWin 创建的主题 前端开发 请教一个网页视频播放问题
浏览器的 media source API
123 天前
回复了 hblevins 创建的主题 CSS 下面的代码中,如何解释 div 的高度?
再更正,其实所谓行盒自身的三线,更准确的说法是行盒会创建一个零宽度的 strut 盒子,这个盒子从行盒那里继承 font size font family 和 line-height ,这个盒子和其他 inline boxes 一起按 baseline 对齐。

这个盒子也就是著名的幽灵空白节点。
123 天前
回复了 ygcaicn 创建的主题 程序员 调个前端布局遇到个问题请教大家
幽灵空白节点
每个 line box 内有个零宽度 strut 盒子
127 天前
回复了 hblevins 创建的主题 CSS 下面的代码中,如何解释 div 的高度?
更正 div{line-height:0} span{line-height:0;font-size:100px} Times New Roma 字体下 div 高度测得是 28px 高度。
@abcbuzhiming #9

除非组件作者说了,本组件支持设定 height 100% 自动 take 父容器 define 的高度,否则就是不支持。默认都是组件内容渲染得到多高就占多高。
127 天前
回复了 hblevins 创建的主题 CSS 下面的代码中,如何解释 div 的高度?
尝试解释一下。涉及概念,字体的 baseline ,上升线 ascender, 下降线 descender, em size, CSS line-height 和 inline formating context 的工作原理。



首先,font-size 设定的是 em size ,根据字体文件里的 unitPerEm 和 ascender descender 数据,就能计算出当前 font-size 下上升线和下降线相对 baseline 的距离,这个就是 inline boxes 的 content area 的高度。字体不一样上升线下降线的数据就不一样。

CSS line-height 的工作方式是添加额外的 leading 到上升线和下降线的两侧,使得新的调整后的上升线和下降线之间的间距刚好达到 CSS line-height 的值。后文上升线和下降线皆指 line-height 值调整后的上升线和下降线。

block container 的高度由内部的行盒( line box )堆叠而成,对于每一行,高度又是怎么计算呢?答案就是按行盒的 baseline 对齐行盒内所有的行内盒子( inline boxes )的 baseline ,从最低的下降线到最高的上升线就是行盒的高度。行盒本身有从行盒创建者那里得来的 font-size ,font-family 和 line-height ,从而得出 baseline ,ascender, descender 三条线,行内盒子也可能有不同的 baseline ,ascender, descender 。vertical-align 调整的其实是 baseline 偏移量,从而其实也会影响 line box 最终的高度。

line-height:0 会导致什么? line-height:0 会使得调整后的上升线和下降线重合到中间的位置,一般字体而言基本会比 baseline 高一点。如何再叠加 font-size:0 才会出现上升线,下降线和 baseline 三线合一。

okay ,现在解释:

现象#1 div{font-size:0;line-height:0} span{line-height:0;font-size:100px} div 高度由来。

行盒三线合一,唯一的 span 创建的 inline box 上升线和下降线重合到中间的位置,距离 baseline 为原字体的 ascender - ( ascender + descender )/ 2 。baseline 对齐,行盒包住所有的上升线和下降线,因此高度就是 span 字体的 ascender - ( ascender + descender )/ 2 ,再根据 font-size 和字体的 unitPerEm 即可计算出 CSS px 值。

拿 Times New Roma 举例,ascender 1825 descender -443 unitPerEm 2048 (1825-(1825+443)/2)/2048*100=33.7

现象#2 div{line-height:0} span{line-height:0;font-size:100px} Times New Roma 字体下 27px 高度

行盒 font-size 继承自 body 16px ,上升线和下降线重合,位与 baseline 上方的高度是 (1825-(1825+443)/2)/2048*16=5.4px ,由#1 得知 span 的行内盒子上升线和下降线位与 baseline 上方 33.7px 处重合,因此行盒高度 33.7-5.4=28.3px

现象#3 div{font-size:100px;line-height:0} span{line-height:0;font-size:100px} div 高度 0

行盒与 span 的行内盒子完全一致,上升线和下降线位与 baseline 上方 33.7px 处重合,baseline 一对齐,上升线和下降线也跟着对齐了,最终行盒包裹所有的上升线和下降线,高度依然为 0.
本质原因是 CSS 布局中高度是由元素堆叠起来的,父容器依赖子元素的高度来得到自己的高度,而 height 100% 或者 min-height 100%不会传递。宽度或者说 inline 方向上就没这个问题。
要看你是横向还是竖向,div 是 block level 默认占父容器的全宽度,完全不用一路 flex 下去。竖向就比较麻烦,除非组件特意做了会占满父容器的 100% height 的 css 定义,否则你确实要一层层 hack 样式。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   974 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 10ms · UTC 20:47 · PVG 04:47 · LAX 12:47 · JFK 15:47
Developed with CodeLauncher
♥ Do have faith in what you're doing.