update

README.md

@@ -2,8 +2,22 @@
 
 FineUI入门100题,带你走进FineUI的世界
 
+此系列内容来源于日常开发积累与沉淀,用于大家学习交流与项目中踩坑
+
 ## 题目
 
+### 项目基础
+
+- [1、前端如何正确书写资源路径](./questions/50.前端如何正确书写资源路径.md)
+
+
+### 布局篇
+
+- [3、我们为什么要设计el这个属性](./questions/40.我们为什么要设计el这个属性.md)
+- [4、绝对布局的隐藏知识点](./questions/41.绝对布局的隐藏知识点.md)
+
+### 进阶
+
 - [1、如何获取当前时间](./questions/1.如何获取当前时间.md)
 - [2、如何格式化输出日期](./questions/2.如何格式化输出日期.md)
 - [3、为什么传递时间信息时候推荐使用时间戳](./questions/3.为什么传递时间信息时候推荐使用时间戳.md)

questions/40.我们为什么要设计el这个属性.md

@@ -1 +1,51 @@
-# 我们为什么要设计el这个属性
+# 我们为什么要设计el这个属性
+
+我们在使用布局组件的时候,有时候会在item中直接写lgap,hgap,vgap之类的属性,通常最终的页面结果是符合我们的预期的,但是当items中的子组件同时接收lgap作为props的时候,结果就变了,通常会出现间距变成两倍了的情况
+
+```
+BI.createWidget({
+    type: "bi.left",
+    items: [
+        {
+            type: "bi.label",
+            lgap: 10,
+        },
+    ],
+});
+```
+
+![示例](../images/3.png)
+![示例](../images/4.png)
+
+出现这种情况是因为布局组件会根据itemw中元素的gap属性设置margin值,而子组件也会读取gap属性在组件内部逻辑值使用这个值,因此出现了双倍间距.
+
+采用el做隔离,可以避免这种情况,这时候子组件bi.label并没有lgap属性,但是布局组件依然可以正确获取items子元素的lgap属性
+
+```
+BI.createWidget({
+    type: "bi.left",
+    items: [
+        {
+            el: {
+                type: "bi.label",
+                text: "测试",
+            },
+            lgap: 10,
+        },
+    ],
+});
+```
+
+为了简化写法,FineUI新增了下划线+gap属性,如_hgap,_vgap,_lgap等,同样起到了隔离作用
+
+```
+BI.createWidget({
+    type: "bi.left",
+    items: [
+        {
+            type: "bi.label",
+            _lgap: 10,
+        },
+    ],
+});
+```

questions/41.绝对布局的隐藏知识点.md

@@ -0,0 +1,117 @@
+# 绝对布局的隐藏知识点
+
+bi.absolute布局可以说是在flex类布局没有大规模应用之前,解决布局问题的好伙伴
+
+下面列举一下绝对布局的特性和在开发中可以解决的问题场景
+
+1. 绝对布局子元素位置与宽高的影响
+
+对于绝对布局的子元素来说，如果还设置了width,且同时设置了left/right属性,那么仅有left生效.同理如果还设置了height,且top/bottom同时存在时top生效.
+
+```demo
+BI.createWidget({
+    type: "bi.absolute",
+    width: 200,
+    height: 200,
+    items: [
+        {
+            el: {
+                type: "bi.layout",
+                css: {
+                    background: "blue",
+                },
+            },
+            inset: 0,
+        }, {
+            el: {
+                type: "bi.layout",
+                css: {
+                    background: "red",
+                },
+                width: 24,
+                height: 24,
+            },
+            inset: 0,
+        },
+    ],
+});
+```
+
+如示例所示,虽然设置了right和bottom为0,但实际并未生效
+
+![示例](../images/5.png)
+
+2. 可以利用绝对布局实现拉伸效果
+
+如果想让子元素撑满父元素,可以利用绝对布局设置位置值来实现
+
+```demo
+BI.createWidget({
+    type: "bi.absolute",
+    width: 300,
+    height: 300,
+    css: {
+        background: "blue",
+    },
+    items: [
+        {
+            el: {
+                type: "bi.layout",
+                css: {
+                    background: "red",
+                },
+            },
+            inset: 10,
+        },
+    ],
+});
+```
+
+![示例](../images/6.png)
+
+3. 绝对布局也有隐藏的z-index层级,排在后面的层级高
+
+利用这种特性,我们可以实现一些元素覆盖在下层元素的场景
+
+```demo
+BI.createWidget({
+    type: "bi.absolute",
+    width: 200,
+    height: 200,
+    items: [
+        {
+            el: {
+                type: "bi.layout",
+                css: {
+                    background: "blue",
+                },
+            },
+            inset: 0,
+        }, {
+            el: {
+                type: "bi.layout",
+                css: {
+                    background: "red",
+                },
+                width: 24,
+                height: 24,
+            },
+            right: 10,
+            bottom: 10,
+        },
+    ],
+});
+```
+
+![示例](../images/7.png)
+
+4. 绝对布局支持shorthand写法inset
+
+使用Chrome审查元素的同学可能发现了,绝对布局的元素在chrome中会显示`inset: 0`这种形式,实际上这是top right bottom left属性的简写,规则遵循顺时针方向.需要注意的是只有第一种情况支持属性名为数字,其余情况需要加引号,毕竟我们是写js而不是css
+
+```
+inset: 10 /* value applied to all edges */
+inset: "4 8" /* top/bottom left/right */
+inset: "5 15 10" /* top left/right bottom */
+inset: "2 3 3 3" /* top right bottom left */
+```

questions/50.前端如何正确书写资源路径.md

@@ -1 +1,21 @@
-# 前端如何正确书写资源路径
+# 前端如何正确书写资源路径
+
+项目开发中,字体,图片,脚本等内容都涉及到资源加载,FineUI中在项目中默认的资源路径是如下结构
+
+```
+@webUrl: 'resources?path=/com/fr/web/ui/';
+
+@fontUrl: '@{webUrl}font/'; //图片的基本地址
+@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址
+@image2xUrl: '@{webUrl}images/2x/'; //2倍图片的基本地址
+```
+
+如果想要使用自己版本的字体文件或图片,可以通过在项目中定义less变量来实现
+
+```
+@webUrl: 'resources?path=/com/fr/plugin/xxxweb/ui/';
+
+@fontUrl: '@{webUrl}font/';
+@imageUrl: '@{webUrl}images/1x/';
+@image2xUrl: '@{webUrl}images/2x/';
+```