前端技术文章-Golang学习网

文章 · 前端 | 1个月前 |

max-width必须配margin:0auto才能居中，因max-width仅限制最大宽度而不控制位置；仅设max-width时内容左对齐、右侧留白，而margin:0auto触发浏览器水平居中逻辑，且避免margin:auto引发的垂直偏移。

406 收藏

文章 · 前端 | 1个月前 |

Vue3用toRefs保持响应式结构教程

解构reactive对象会导致响应式丢失，因为取值是原始副本而非Proxy代理；toRefs将每个属性转为ref，使解构后仍可响应更新。

406 收藏

文章 · 前端 | 1个月前 |

HTML中创建一个大的输入框，可以通过调整或

元素的样式来实现。以下是一个简单示例：使用 <input type="text"> 创建大输入框：<input type="text" style="width: 100%; height: 100px; font-size: 18px;" placeholder="请输入内容">使用 <textarea> 创建大输入框</a></div>
                                <a href="/article/602750.html" class="img_box"><img src="/uploads/20260516/17789214276a082fd3c86cd.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中创建一个大的输入框，可以通过调整<input>或<textarea>元素的样式来实现。以下是一个简单示例：使用 <input type="text"> 创建大输入框：<input type="text" style="width: 100%; height: 100px; font-size: 18px;" placeholder="请输入内容">使用 <textarea> 创建大输入框"></a>
                                <div class="cont lineFourOverflow">优先用CSS控制textarea尺寸，设width/height而非rows/cols；resize生效需满足overflow允许且内容溢出；自适应高度须先设height:auto再读scrollHeight，并清空内联样式防累积。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="602750"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/600872.html" class="aBlack">HTML中iframe父子通信技巧</a></div>
                                <a href="/article/600872.html" class="img_box"><img src="/uploads/20260515/17788079226a067472d0b45.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中iframe父子通信技巧"></a>
                                <div class="cont lineFourOverflow">同源下需等待iframeload事件触发后才能安全获取contentWindow；contentDocument与contentWindow.document等价但兼容性更好；跨域时仅postMessage可用，且须校验origin。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="600872"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/600077.html" class="aBlack">CSS磨砂玻璃效果实现方法及backdrop-filter应用</a></div>
                                <a href="/article/600077.html" class="img_box"><img src="/uploads/20260514/17787430126a0576e46ce3e.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS磨砂玻璃效果实现方法及backdrop-filter应用"></a>
                                <div class="cont lineFourOverflow">backdrop-filter模糊发灰需叠加saturate(160%–190%)补色，必须与blur同声明；确保父容器有可模糊内容且无overflow:hidden截断；深色模式用低饱和深灰rgba基底；iOS旧版需双条件@supports检测，X5内核等须降级。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="600077"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/599704.html" class="aBlack">单按钮控制多行表格显示隐藏方法</a></div>
                                <a href="/article/599704.html" class="img_box"><img src="/uploads/20260514/17787263886a0535f470e57.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="单按钮控制多行表格显示隐藏方法"></a>
                                <div class="cont lineFourOverflow">本文介绍一种符合HTML规范、结构清晰且易于维护的方法：使用CSS类（而非重复ID）批量控制多个表格行的显隐状态，并通过事件委托实现单按钮统一切换。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="599704"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/595301.html" class="aBlack">PHPStudy运行HTML文件的正确方式</a></div>
                                <a href="/article/595301.html" class="img_box"><img src="/uploads/20260510/17784084486a005c0085b01.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="PHPStudy运行HTML文件的正确方式"></a>
                                <div class="cont lineFourOverflow">将HTML文件放入PhpStudy的www目录并启动Apache服务后，通过浏览器访问对应地址即可运行静态页面，适合测试包含JS、CSS或AJAX的网页，操作简单且无需配置PHP。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="595301"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/594950.html" class="aBlack">JavaScript FileReader 读取本地文件方法</a></div>
                                <a href="/article/594950.html" class="img_box"><img src="/uploads/20260510/17783911156a00184b25eec.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript FileReader 读取本地文件方法"></a>
                                <div class="cont lineFourOverflow">FileReader是浏览器提供的用于读取本地文件内容的API，通过结合<inputtype="file">获取用户选择的文件后，使用readAsText、readAsDataURL等方法异步读取文本、图片预览或二进制数据，并在onload回调中处理结果，同时需监听onerror处理异常，适用于文本解析、图片预览等场景。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="594950"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/593383.html" class="aBlack">手机Backspace键无法删除怎么处理</a></div>
                                <a href="/article/593383.html" class="img_box"><img src="/uploads/20260508/177825408169fe010100fef.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="手机Backspace键无法删除怎么处理"></a>
                                <div class="cont lineFourOverflow">本文详解移动端contentEditable元素中Backspace行为异常的根源与解决方案，重点替换不可靠的keydown+event.key判断，改用标准化的input事件与event.inputType==='deleteContentBackward'检测，确保跨设备（尤其是iOS/Android）一致的删除体验。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="593383"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/591356.html" class="aBlack">Proxy模型变更拦截，数据回滚与审计全攻略</a></div>
                                <a href="/article/591356.html" class="img_box"><img src="/uploads/20260507/177812609369fc0d0dcb207.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="Proxy模型变更拦截，数据回滚与审计全攻略"></a>
                                <div class="cont lineFourOverflow">Proxy本身不提供回滚或审计能力，但可作为统一钩子，在set/deleteProperty中触发快照、比对与日志；需结合外部系统实现持久化、权限校验与通知闭环。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="591356"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/590119.html" class="aBlack">Reflect.ownKeys方法详解及使用技巧</a></div>
                                <a href="/article/590119.html" class="img_box"><img src="/uploads/20260506/177803843169fab69f35354.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="Reflect.ownKeys方法详解及使用技巧"></a>
                                <div class="cont lineFourOverflow">Reflect.ownKeys仅返回对象自身第一层键名（含字符串和Symbol），不递归嵌套；要获取所有层级键名需手动递归遍历，注意循环引用、类型判断及Symbol保留。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="590119"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/587030.html" class="aBlack">HTML怎么做表格打印_html表格数据打印实现方法【实用】</a></div>
                                <a href="/article/587030.html" class="img_box"><img src="/uploads/20260503/177781083669f73d94c4d25.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML怎么做表格打印_html表格数据打印实现方法【实用】"></a>
                                <div class="cont lineFourOverflow">打印表格边框消失或错位需用@mediaprint显式声明border、padding等样式并加!important；长表格跨页需用thead{display:table-header-group}和tr{page-break-inside:avoid}；移动端Safari需固定table-layout、设单元格width并禁用缩放。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="587030"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/582330.html" class="aBlack">A/B测试功能开关设计实现方法</a></div>
                                <a href="/article/582330.html" class="img_box"><img src="/uploads/20260429/177747640969f22339dfb3a.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="A/B测试功能开关设计实现方法"></a>
                                <div class="cont lineFourOverflow">答案：设计功能开关机制需包含清晰的配置结构、用户分流一致性、监控集成与管理后台。首先定义标识符、状态、分流规则、实验分组和回滚策略，并存储于配置中心；通过稳定哈希确保同一用户始终进入相同实验组，结合多维度条件实现精准流量分配；集成埋点系统自动上报曝光与转化数据，对接分析平台进行效果评估；提供可视化管理界面支持渐进式发布、权限控制和操作审计，确保可观察性与安全性。该机制不仅支撑A/B测试，还可用于灰度发布与紧急降级。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="582330"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/581218.html" class="aBlack">JavaScript生成随机数及范围设置方法</a></div>
                                <a href="/article/581218.html" class="img_box"><img src="/uploads/20260428/177737463069f095a6de3ac.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript生成随机数及范围设置方法"></a>
                                <div class="cont lineFourOverflow">Math.random()生成[0,1)浮点数，整数范围[min,max]用Math.floor(Math.random()(max-min+1))+min，浮点数范围[min,max)用Math.random()(max-min)+min。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="581218"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/580749.html" class="aBlack">WebLocksAPI实现多标签页同步访问</a></div>
                                <a href="/article/580749.html" class="img_box"><img src="/uploads/20260428/177734888869f03118d6593.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="WebLocksAPI实现多标签页同步访问"></a>
                                <div class="cont lineFourOverflow">WebLocksAPI仅提供同源单例资源的互斥执行控制，不负责权限同步；锁名须含业务唯一标识且URL-safe，mode必须显式设为'exclusive'，ifAvailable应启用以防阻塞，Safari不支持需服务端幂等兜底。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>406</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="580749"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_hot_90_209.html" class="prevPage on"></a> <a href="/articlelist/88_hot_90_1.html">1</a><a href="/articlelist/88_hot_90_209.html">209</a><a class="currentPage">210</a><a href="/articlelist/88_hot_90_211.html">211</a><a href="/articlelist/88_hot_90_500.html">500</a> <a href="/articlelist/88_hot_90_211.html" class="nextPage on"></a></div>    </div>
</div>
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/frontend/common.js" defer></script>
  <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script>
	<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
        hm.async = true;
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

strbiaoqian+=fumo+$(this).html()+'</a>';
        // if(flaga<=8){
        // }
        flaga++;
    });
    strbiaoqian+=zhankaihtml;
    allhtml+=shouqihtml;
    $(".userInfo1").html(strbiaoqian);
    // function zhankaiflagclick(obj){
    //     if($(obj).html()=='展开<i></i>'){
    //         $(obj).html('收起<i></i>');
    //         $(obj).addClass('zhankai');
    //         $(".userInfo1").html(allhtml);
    //     }else{
    //         $(obj).html("展开<i></i>");
    //         $(obj).removeClass('zhankai');
    //         $(".userInfo1").html(strbiaoqian);
    //     }
    // }

$('.timeLimitBox').click(function(){
        $(this).toggleClass('hover')
    })
</script>
</body>
</html>