
CSS
文章平均质量分 73
Joern-Lee
用双手给世界造幸福~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Web和Flutter盒模型不一致导致的尺寸渲染差异问题
问题定位在测试flutter动态化引擎过程中发现相同width的CSS样式下发到flutter到时渲染和web端不一致,明显感觉端上的宽高要多出一部分,但是宽度和margin的值完全一样。花了一些时间排查这个问题,基本定位到问题来源于两者使用的盒模型不一致所导致的。盒模型盒模型最直观的就是下面这张图片:标准的W3C盒模型由4部分组成:content,padding,border和margin。对应box-sizing的value为content-box简单来说元素的宽度=content wid原创 2021-10-17 18:32:23 · 986 阅读 · 0 评论 -
CSS Flexbox弹性盒子模型总结
1. 背景弹性盒子布局指在提供一个为容器内的items进行更有效率的排列,分配空间以及布局的方式,弹性的意思是即便items的尺寸是未知或者动态的也可以使用!这种布局的理念主要是给容器一种能力可以调节修改items的宽度高度和顺序来充分利用容器内可用的空间—甚至可以适应几乎所有的设备和屏幕尺寸。更重要的是,弹性盒子布局的方向是不可知的,这个与常规的布局相反(块布局是垂直方向的而行内则是水平基...原创 2020-03-05 14:53:12 · 275 阅读 · 0 评论