本帖最后由 马黑黑 于 2022-11-6 12:03 编辑
小辣椒 发表于 2022-11-6 12:00
这个我要记录一下。。。。。
{:4_181:}
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:40 编辑
马黑黑 发表于 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% - 子元素宽度的一半) ...
好吧， 不再提问。