折腾:
【记录】小程序实现绘本查询的详情页
等期间,遇到一些小程序工具调试UI时候的坑。
1.当前看到的css只是当前page的css,不是(Chrome中那种)全部叠加后的的css
比如想要模拟Chrome中的页面:
![](https://www.crifan.com/files/pic/uploads/2021/03/be750cbd9d144e4fba7860042c0a40be.jpg)
#book_detail { 1. padding-top: 20px; 2. padding-left: var(--page_padding); 3. padding-right: var(--page_padding); }
其中左右padding都是15px
且如果去掉,则页面左右都顶格了:
![](https://www.crifan.com/files/pic/uploads/2021/03/b935ada62094459ab545b5e5958450d3.jpg)
而类似的配置,去加到小程序工具中去,结果页面显示出来的就没有左边padding的效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/54a452e4af934d5cab20650a0b020146.jpg)
然后调试了半天:
最终才发现:
![](https://www.crifan.com/files/pic/uploads/2021/03/e869911796a04931beae62f27c36af01.jpg)
去掉
* { margin:0 }
就可以看到左边有个边距了:
![](https://www.crifan.com/files/pic/uploads/2021/03/4b13f68170034b2faabe19407cff44c7.jpg)
由此才发现:
原来是(不知道哪里的)css:
* { margin:0 }
导致了后续很多页面,包括当前页面,的margin都是0了
所以,此处想要实现当前页面左边边距,则应该把padding该为margin:
/* padding-left: 15px; padding-right: 15px; */ margin-left: 15px; margin-right: 15px;
效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/7186ae4a116a43dab599bca28310d3a2.jpg)
至此,最后也才发现,之前如果是padding的话,其实显示的布局是对的,是元素内部的padding,而不是元素外部的margin:
![](https://www.crifan.com/files/pic/uploads/2021/03/3eea359980f7443daaf3deb068aaa661.jpg)
只不过的确:在右边css中没有显示margin的left和right,导致无法看出问题所在:
所以还是那句话:
- 小程序开发工具中显示的页面的css:
- 只是当前页面的自己的
- 不包括父级各个元素的css
- -》从而导致很多继承了父元素,父页面的css配置看不到
- 导致页面布局不对
- 而单单看当前页面的css参数很难发现错在哪里。。。
所以应对办法:
之后在调试当前页面,看css的时候,记得:
优先看左边的布局效果,而时刻要想到:右边的css设置,只是当前页面的css,不是compute后的,合并后的真实的,全部的css。。。
转载请注明:在路上 » 【整理】微信小程序工具调试UI界面时的坑