CSS margin与论坛中宽幅帖子的定位

马黑黑

小辣椒 发表于 2022-11-6 12:00
这个我要记录一下。。。。。

calc()计算函数很特别，运算符号两边要有空格，另外，它允许算式里带单位符号（例如 %、px），不知道它的数学老师是谁这么厉害）

起个网名好难

马黑黑 发表于 2022-11-6 11:56
你这方法可行，这是直接计算出了结果。
我这里介绍的 CSS calc() 函数也不错的。

我的屏幕显示的论坛是这样的，不知道大分辨的屏幕是怎样的



宽度 160+800 ， 用1000估算大致差不多。

马黑黑

起个网名好难 发表于 2022-11-6 12:21
我的屏幕显示的论坛是这样的，不知道大分辨的屏幕是怎样的

不错的。不过如果用calc()函数，只需量左侧栏就好

起个网名好难

马黑黑 发表于 2022-11-6 12:48
不错的。不过如果用calc()函数，只需量左侧栏就好

calc(50% - 681px) = -302.5px => 100% = 757px , 这不就是帖子所在的 td 元素的宽度吗? 想不明白这计算式的物理含义到底是什么。

起个网名好难

td 的宽度

起个网名好难

calc(100%) 是父元素的宽度（或高度），对margin、padding 就是宽度，而 td 正好是帖子的父元素。

马黑黑

起个网名好难 发表于 2022-11-7 11:56
calc(100%) 是父元素的宽度（或高度），对margin、padding 就是宽度，而 td 正好是帖子的父元素。

用了 calc()，其实可以不理睬更多的细节，这叫模糊计算。一般都有效。

马黑黑

起个网名好难 发表于 2022-11-7 11:48
calc(50% - 681px) = -302.5px => 100% = 757px , 这不就是帖子所在的 td 元素的宽度吗? 想不明白这计算 ...

无需深入细节，这是 calc() 的好处

起个网名好难

马黑黑 发表于 2022-11-7 12:24
用了 calc()，其实可以不理睬更多的细节，这叫模糊计算。一般都有效。

明白其含义才可能举一反三，否则只能是知其然而不知其所以然，照葫芦画瓢。

起个网名好难

马黑黑 发表于 2022-11-7 12:25
无需深入细节，这是 calc() 的好处

可以表达为 ：
（父元素宽度 - 帖子宽度 - 层主信息栏宽度） / 2
其中 层主信息栏宽度 ≈ 160

马黑黑

起个网名好难 发表于 2022-11-7 12:38
可以表达为 ：
（父元素宽度 - 帖子宽度 - 层主信息栏宽度） / 2
其中 层主信息栏宽度 ≈ 160

你还不明白我的意思。我用到的 calc() 函数，无需去关注太多的细节，就要两个数据：帖子父框宽度、左边栏宽度。其他不用管，也不用去细算。

马黑黑

起个网名好难 发表于 2022-11-7 12:35
明白其含义才可能举一反三，否则只能是知其然而不知其所以然，照葫芦画瓢。

原理我帖子中有说明的。我还是认为，用 calc() 就加一个补数，81，很方便。

起个网名好难

马黑黑 发表于 2022-11-7 12:53
你还不明白我的意思。我用到的 calc() 函数，无需去关注太多的细节，就要两个数据：帖子父框宽度、左边栏 ...

这么说吧，你给出这样的算法考虑了它的细节吗？还是也是从其他地方搬来的。

如果是自己给出的不考虑细节是不可能的，如果是搬来的就无所谓了。

相约爱晚亭

马黑黑 发表于 2022-11-6 11:17
标准写法是：margin: auto 0;

0其实要不要都行：既然是外边距为0，就是默认值，所以，简写成：margin: ...

谢谢黑黑老师！

相约爱晚亭

马黑黑 发表于 2022-11-6 11:43
论坛里的宽幅帖子，margin: auto; 是不行的，因为帖子作为子元素，其宽度超过了父元素，需要移位，这才涉 ...

明白了，还是老师介绍的定位法好！

马黑黑

相约爱晚亭 发表于 2022-11-7 15:04
明白了，还是老师介绍的定位法好！

方法是多种的，@起个网名好难 老师后面仔细研究出来的办法也非常聪明、实用

马黑黑

起个网名好难 发表于 2022-11-7 13:03
这么说吧，你给出这样的算法考虑了它的细节吗？还是也是从其他地方搬来的。

如果是自己给出的不考虑细 ...

这个 calc() 也要搬？这是基础知识。你去找找，有谁会像我提供的那样去做论坛宽幅定位的？

细节问题，好比摆个沙发吧，我必须得量整栋房子的尺寸么？有些事情，我说过，解决的思路可以不同，关键是解决问题且不太难掌握。你的方法很好，但不等于说我的方法就不行，是吧

马黑黑

起个网名好难 发表于 2022-11-7 13:03
这么说吧，你给出这样的算法考虑了它的细节吗？还是也是从其他地方搬来的。

如果是自己给出的不考虑细 ...

再说所谓的原理，这就是 calc() 的妙处所在：它无需确切知道父元素的尺寸，calc(50% - 子元素宽度的一半) 与 margin: auto; 获得一样的功效，且当子元素宽度大于父元素宽度时，它依然能确保子元素位于整体视口的中心。由于论坛用到了table，帖子以它所在的 td 为参照用 calc() 进行物理定位时不能确保帖子能位于整体浏览器视口的水平中央，需要补个数，这个数其实就在帖子正文的左边栏得到，这应该就是你所要的原理，其实我之前也有提到。

起个网名好难

马黑黑 发表于 2022-11-7 17:31
这个 calc() 也要搬？这是基础知识。你去找找，有谁会像我提供的那样去做论坛宽幅定位的？

细节问题， ...

只是为搞清楚其中道理没别的意思。

大家看了你这方法都说好不就是搬过去用了吗。

起个网名好难

马黑黑 发表于 2022-11-7 17:38
再说所谓的原理，这就是 calc() 的妙处所在：它无需确切知道父元素的尺寸，calc(50% - 子元素宽度的一半) ...

好吧， 不再提问。