【8】坚决反对在组件边距设置上搞双重标准！！
我们先来看一个场景：在功能面板上，两个按钮紧紧挨在了一起。
那么，在中间加一列，不就分开了吗？是可以加一列，可是我加一列，列宽为多少呢？
有的人可能会说了，那你不随便嘛，看你的需求了。
我说，这种观点不对。前端UI是有规范的，不是你想怎么搞就怎么搞的。这个规范，不是对开发的约束，恰恰相反，是对开发的保护，是效率和质量的保证。为什么大家都认为夏超总的UI做的好看？夏超总的页面是有规范的，比如，栅格系统采用了32像素。
为什么是32像素？因为32是8的倍数，在屏幕的分辨率上，90%以上的分辨率尺寸可以被8整除，大部分的分辨率是32的整数倍，32栅格系统比较官方的20栅格系统还能恰好做到不出现密集恐惧症，32栅格系统，向下可以用16表示亲密，8表示紧密，向上可以用64表示表格数字型列宽，128表示表格文字型列宽，256表示后台左侧导航菜单宽度。
所以，列宽并不是可以随便设置的。
按照规范，标准栅格为32，亲密距离为32的一半16，紧密距离为32的四分之一是8，那么我在两个按钮中间加一列，列宽设置为16或者8是不是就行了呢？
如果这么简单，我请问，现在的表格我要怎么对齐？
又有人说了，你这不矫情嘛，现在的表格你合并单元格不就得了嘛。是，我可以横向合并单元格绑定数据表的字段，官方的教程也是这么教的，教出了一大帮先选几个表格模板行的单元格，然后从表中拖一个字段过来，对呀，这不挺好的吗？
我这个表格要做数据透视表怎么办？官方在做这个视频教程时，哪怕多饶一句嘴——同学们，如果你们的表格要绑定数据透视表，那么不要用这种合并单元格式的绑定字段。
这个问题反映了不是一次两次了，是不知道有多少次了。
这还是我把按钮放在单元格中，如果放在表格里，那就没法看了。通常的表格里，我们会放一些功能按钮进去，什么删除啊，编辑啊等等，你要想在表格里连着放几个按钮，你看吧，天津包子——全糗一块了，一个挨一个。
前期，活字格一直在赶路，先实现功能为主，先别管页面做的多磕碜，这个我们也能理解，那我就在表格里不用按钮了呗，我用链接不是也能实现嘛
然后我们到了8.0时代——
活字格8.0新功能解密：五、颜值提升 - 列表内元素样式提升
好家伙，喜大普奔哪，这问题不就解决了嘛，我就自己上手试了，结果这个被打脸哪
【8】页面单元格按钮的外边距
我回头去看8.0的新版解密，胡爷说了，表格内：
我真傻，真的，我单知道下雪的时候野兽在山坳里没有食吃，会到村里来;我不知道春天也会有。
我真傻，真的，我只看胡爷说了什么，但是我没去想胡爷没说什么。胡爷没说的是，在表格外不好使……
然后我今天在学习夏超总的这个UI框架，我忽然看到了这个地方：
同样是32栅格系统，夏总是怎么做到把图片在单元格内缩小的呢？为什么我做出来就是这个胎唇样子呢？
仔细一看，恍然大悟，设置内边距！
你看，我这不是也能做得这么秀气了吗？
夏总的UI框架是7.1时代发布的，那这个内边距功能至少在 7.1 时代就有了啊，啥也别说了，就是自己学艺不精，兄弟认栽了。
但是，我总觉得有哪儿不对。
到底是哪儿不对呢？
我想起来了——
我在单元格里放按钮，设置内边距时无效，然后有格友还把CSS的盒模型拿给我看，好吧，这个我理解了。
可是对于图片，这个内边距又好使了。这是相声《论吆喝》啊，一个马俩脑袋啊你这个！这两头堵啊！
搁现在的行话，这是双重标准啊这个？！合则用，不合则弃？翻手为云，覆手为雨，不断歪曲和掏空 CSS 的原则，想干什么呀？
本帖最后由 Chelsey.Wang 于 2022-8-9 17:55 编辑
大佬，按钮和图片这些页面单元格确实都是只支持了内边距，没有支持外边距的设置，只是同为内边距，不同的单元格效果的确是有区别的，这个主要和元素类型有关。
按钮的内边距设置为2
图片的内边距设置为2
可以看到，修改的都是padding
对于不同的页面元素，由于content不同，修改padding时的效果的确是有区别的，对于按钮来说，content部分是按钮上的文字/图标；对于图片单元格来说，content是图片本身，所以同样是修改内边距，这两种单元格的最终表现是不一样的。
您想要实现的按钮效果，是需要通过修改Border外侧的距离实现的，也就margin，即外边距。
“支持修改页面单元格外边距”这个需求我们也已经记录在需求列表当中，编号：41263，后续会由产品组统一评估~
Chelsey.Wang 发表于 2022-8-9 17:53
大佬，按钮和图片这些页面单元格确实都是只支持了内边距，没有支持外边距的设置，只是同为内边距，不同的单 ...
你说的这个道理我知道，问题是 CSS 这破玩意儿它不正交啊，盎撒匪帮搞出来的东西能是什么好东西吗？你说的确实是，但是活字格不是在dom元素上加了一层吗？加的这一层就是单元格类型啊，那是不是在这一层就应该把这个问题统一了啊，前端高手这个不是事儿，没点CSS基础的，这不就整晕了吗？
对于css来说，它对的是dom元素，对活字格来说，你没有dom元素的概念啊，你对的是单元格类型啊，干嘛非要按照css的盒模型来搞呢？
当然了，在UI上统一了，程序底层就麻烦了，因为不管是什么单元格类型，只要是内边距，程序就设置padding就行了，但是如果做到概念统一，那就麻烦了，有的单元格类型要设置 padding ，有的要设置 margin ，这一会不就搞乱了吗？而且测试的时候也麻烦啊
但是我们舒服了啊:lol 大佬，因为它设置的的确都是内边距，就是边框内侧的部分，我们这么看吧：在单元格样式中给这个图片单元格它加个边框，然后再设置内边距，是不是就很明显了，它设置的就是边框内侧部分的距离，而不是边框外侧的。
只是因为没有设置外边框时，视觉上不太好分辨，如果支持给图片单元格设置外边距，效果应该是下图中这样。
单元格类型的确不直接等同于一个页面元素，但是盒模型是前端最基本的布局概念，单元格的样式调整也是按照这种模型来设计的，所以内边距、外边距、边框、内容这些概念，以及他们之间的内外关系，活字格中也会和盒模型中保持一致。
嗯，和我猜的差不多，不会颠覆盒模型的
这个问题不大，理解了就行了
有个小小的建议哈
单元格样式 - 活字格V8帮助手册 - 葡萄城产品文档中心 (grapecity.com.cn)
在这里，是不是补充完善一下，比如在表格中的单元格样式和在页面上的单元格样式有些许的差异，再比如按钮的内边距和图片的内边距，同为内边距，但是在视觉表现上是不一致的，不一致的原因是 CSS 盒模型造成的等等
swejet 发表于 2022-8-10 09:33
嗯，和我猜的差不多，不会颠覆盒模型的
这个问题不大，理解了就行了
感谢大佬的反馈，不过我没太理解您说的补充是具体要补充什么内容，因为我感觉他俩表现是一致的，内边距都是内容到边框间距离的变化，您说的视觉上的区别应该主要是在于按钮本身就有边框，图片单元格默认不显示边框。这个是因为不同的单元格的默认样式是有些区别的，主要是根据用户通常的使用习惯设计的。
页:
[1]