发表于： 2019-10-18 23:09:38
1 883
今天完成的事情：
1 完成课程首页搜索头部逻辑及样式
2 回顾margin各位问题
明天计划的事情：
1 完成课程首页部分样式
遇到的问题：
1 暂无
收获：
margin总结
margin-left/right：auto；margin的auto用来分配剩余空间，例左右一侧auto，一侧没，则设auto的分配所有剩余空间。例父元素宽400，子宽100并设margin-left：auto，auto分配所有剩余空间就是400-100=300，相当于margin-left：300，右对齐。
margin：auto；只会水平居中，不会垂直居中(原因看这)。但注意父元素设flex，或父relative子absolute，会水平垂直都居中，具体实现看水平垂直居中总结
margin穿透：父元素无上border/padding，子元素设margin-top，会撑出，效果相当于父元素设置了margin-top，只有上边会。(父元素是bfc时则不会)
margin垂直重叠：margin水平边距永远不会重合，2个或两个以上的块级盒模型相邻的垂直margin会重叠。（bfc解决）
同级margin重叠：设置其中1个为，float，inline-block，其实就是bfc。
父子margin重叠：这种是父元素无border/padding，然后子元素margin穿透，产生的，设置border/padding或bfc解决
为何margin不能垂直居中
Visual formatting model details
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
就是 左m+左b+左p+w+右p+右b+右m = 包含块宽度 。以及对这公式的 5 条 if
跟这问题直接相关的是2个。先说第一个- 如果啊，width 是 auto 值，那么其他是 auto 的值就为 0. 所以呢，先说 width auto margin auto 的时候啊，margin 就 0 了。整个容器充满包含块呗。也就没水平居中啥事儿了。
然后呢，说水平居中的事儿。
这里又有个if- 如果 'margin-left' 'margin-right' 都是 auto 值，使用的值相等，那么就水平居中包含块。
基本上规定的死死了。
所以连起来就是：
如果有 width 那么 ml/mr 是 auto(其他值么)，那就是0，后面的一条 if 不生效了。
如果 width 不是 auto，那就是有确定宽度了。 ml/mr 是 auto，那就居中。
元素的包含块宽度是最初能定下来。
（你想啊，根 HTML 的包含块不就是视口么，浏览起内窗口宽度啊，总能知道吧。然后根据这个初始包含块宽度往下算）
所以，就有一系列确定值。
确定标黑，不确定为（x），来说明 width，没b没p的情况（简化下么）
没有的值标为 0
'margin-left'（x） + 'border-left-width'（0） + 'padding-left'（0） + 'width'（假设 300px） + 'padding-right'（0） + 'border-right-width' （0）+ 'margin-right'（x） = width of containing block（假设 600 px）
整理下
x+0+0+300+0+0+x = 600
求x
2x+300 = 600
2x = 300
x = 150 （px）
好了，ml 和 mr 就算出 150 px 了
（如果 其他 bl、br、pl、pr 有值就带公式里，一样的）
排布下，正好容器在包含块中间位置。
这就是最后内个 if 要说的内容。
为何不能垂直居中……
这个主要是规范里没给这方面规定……
并与其他初始设定冲突。
width 相关计算依赖于其包含块，这玩意是最初能确定值。
而 height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的。
所以无法建立类似上面的公式来使用 mt、mb auto 实现高度居中。
且，mt、mb 的百分比值参照还是依赖包含块实际宽度的。
同理，因为包含块高度未知，没办法以确定值来计算 mt、mb。
返回列表
评论