做拍卖网站多少钱,天元建设集团有限公司公章图片,新闻稿发布,网站建设方案书格式看似三个最常见的概念背后却隐藏了很深的很深“水” 那有多深呢#xff0c;先来看下面的代码 引出问题 style.inline-block {display: inline-block;}.border {border: 1px solid #000000;}.span {width: 100px;height: 100px;}.bak {background: #33CCFF;} .o-hidden… 看似三个最常见的概念背后却隐藏了很深的很深“水” 那有多深呢先来看下面的代码 引出问题 style.inline-block {display: inline-block;}.border {border: 1px solid #000000;}.span {width: 100px;height: 100px;}.bak {background: #33CCFF;} .o-hidden {overflow: hidden;}
/style
div classborderspan classinline-block border/span
/divdiv classborderspan classinline-block border span/span
/div div classborderspan classbak inline-blockx/spanspan classinline-block border span/span
/div divxspan classinline-block border spanx/spanspan classinline-block border span/spanspan classinline-block border span o-hiddenxjq/span
/div 好同学们把这四段代码放到编辑器里面然后打开浏览器如果对于你眼前的画面没有感到疑惑那么其实你就无需向下看了 On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.). 翻译成国语 在一个由行内元素组成的块级元素中line-height指定了这个元素中的所有line box的最小高度。这个最小高度包括在baseline上面的最小高度和baseline下面的最小深度就好像每个line box是由一个0宽度的有着元素的font和line-height属性的行内框开始的我们称这个虚拟的盒子为strut 关于baseline和line box的概念请参考张鑫旭大大的文章http://www.zhangxinxu.com/wor... 看着很乱是吧上图来看 分析原因 这是前两段代码的示意图对比两张图发现span没有宽高的情况下baseline上下分别有隐形高度设置宽高之后下面的strut仍然存在再来看第三段代码的示意图 图中蓝色区域为行内框的高度红线即字母x的baseline,strut的高度正好是红线到底边框的高度也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的文档默认值果然是baseline印证了这一说法。 看最后一段代码示意图 wtf这又是几个意思baseline怎么又和底边框接上了 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 元素如果它内部没有内联元素或者它的overflow属性不是visible那么它的baseline就是元素margin的底端。否则就是它内部最后一个元素的基线。 好了图中三个框可以很好地理解这段话 最前面的x是用来确定这个代码中最外层的div的基线。左起第一个矩形内部有文字属于内联元素那么第一个inline-block的基线为内部x的基线第二个inline-block的内部无内联元素那么它的基线就是margin的底端第三个inline-block内部有内联元素但是他的overflow属性为hidden不是visible所以它的基线还是margin的底端。 解决方案 font-size: 0 或者 line-height: 0vertical-align ! baseline方法1和方法2是两个不同的实现思路方法1是让strut那个东西消失方法2说起来就有点多了简单理解就是inline-block垂直方向设置非baseline从而让strut没有顶到底部也就不会有空白出现了 感觉自己写的很乱有耐心看完的同学真是谢谢你们了~~ 还是张鑫旭大大写得好写的全http://www.zhangxinxu.com/wor...
