1587825300 发表于 2018-3-4 17:32:22

5.3.8章节中一些疑问,个人已明白。

本帖最后由 1587825300 于 2018-4-13 21:19 编辑

.container将幽灵空白节点的font-size为0,让他幽灵空白节点x的中点在顶部的边框线上,然后设置伪元素after高度100%,vartical-align:middle;时,幽灵空白节点x会和伪元素的中心线平行,原因是css中默认是左上方排列对齐的,这个左上方排列对齐能否详细说一下呢?

这个例子的具体原理就是将父元素的x居中,然后让子元素去对齐这个,那么如果给父元素设置line-height:100vh,会不会有奇效!


解释:

源代码:
.container {
                   position: fixed;
                   top: 0;bottom: 0;left: 0;right: 0;
                   background-color: rgba(0,0,0,.5);
                   text-align: center;
                   font-size: 0;
                   white-space: nowrap;
                   overflow: auto;
            }
.container:after {
                   content: "";
                   display: inline-block;
                   height: 100%;
                   vertical-align: middle;
             }
.dialog      {
               display: inline-block;
               vertical-align: middle;
               text-align: left;
               font-size: 14px;
               white-space: normal;
         }
首先是父元素container ,给他设置fixed浮动,且上下左右都和窗口大小距离为0,和absolute有点异曲同工之处,然后设置好背景色,让子元素居中,且font-size为0,消除幽灵空白节点高度,个人猜测让after出现后会产生幽灵空白节点的宽度(这个我不去测试都不会发现after出现后会产生有一点点的宽度占用,但是还不是很确定,个人猜测), white-space: nowrap;后面的让元素不会换行就不是很清楚了,但是不影响。

伪元素after 设置好为inline-block,这样才会和子元素dialog为同级,都是inline-block,这样的话 vertical-align才会有效,且他们无内容时都是margin-bottom对齐。设置为middle的时候,他的基线就变为中线对齐。(伪元素默认是inline元素,宽高设置无效)

子元素dialog设置好inlen-block,重置字体大小font-size,然后也让他middle对齐,这样,他的中线回和after的中线对齐。

重点是,我们的流体布局是从左到右的,所以不管设置before还是after,他们都是在幽灵空白节点的后面,这就导致幽灵空白节点会和伪元素对齐中线,完美居中,子元素如果没有设置中线对齐且无内容(行框盒子),他的margin-bottom会和伪元素中线对齐,设置了middle后则会垂直居中。

那么我们又可以想到,如果是before的话,确实整个布局都是从左到右,没有问题,那么after怎么设置他都是在最后面显示,那么after就应该是如书中所说的那样,一半的内容会超出父元素,这时书中说css默认是左上对齐的,这个我就不是很清楚左上对齐的意思,我个人用我的理解就是,哪个元素最高,幽灵空白节点就会对齐这个最高的元素,这个可以理解为字符的基线了,因为你字符不管设置多大,前面小的字符和后面大的字符都是在同一基线上的,所以after可以让幽灵空白节点对齐他。

以上就是我的脑洞,应该是可以这样理解的。

话说这个问题我丢出来好久了都没人回复,还是要靠自己啊。

admin 发表于 2018-8-28 13:51:10

我来回复了,恩,自己回答的很赞!

zjy138864 发表于 2018-12-29 18:04:02

admin 发表于 2018-8-28 13:51
我来回复了,恩,自己回答的很赞!

大神能不能解释一下
“左上方排列对齐”是什么意思呢,
我试了几次感觉楼主的解释不太对

zjy138864 发表于 2018-12-29 18:40:51

admin 发表于 2018-8-28 13:51
我来回复了,恩,自己回答的很赞!

还有大神,我发现container的属性white-space设置
是为了当.dialog的宽度超过container的宽度,避免.dialog跑到最顶层,
问题是为什么会跑到最顶层呢
页: [1]
查看完整版本: 5.3.8章节中一些疑问,个人已明白。