CSS中实现元素居中的七种方法

在前端开发中，经常需要将元素居中显示，CSS提供了多种技术方法来实现元素的居中，在不同场景下有不同的使用方法、不同的效果，需要特别记住它们的应用场景才能够正常的居中。这篇文章就大致总结一下CSS中的居中方法。

一、元素分类

在CSS中，元素大致可以分为以下几种：

1.块级元素（Block-level Elements）：

这些元素以块的形式显示在页面上，每个块级元素会独占一行（除非通过其他CSS属性进行修改）。 块级元素可以设置宽度、高度、内边距和外边距。 一些常见的块级元素包括

,

,

-

,

,
• ,
  ,

  等。

  2.行内元素（Inline Elements）：

  行内元素也称为内联元素，这些元素以行内的形式显示在页面上，它们不会独占一行，而是在同一行上与其他元素并排显示。 行内元素的宽度和高度默认由其内容决定，无法设置宽度和高度。 一些常见的行内元素包括, , , , , 等。

  3.行内块元素（Inline-block Elements）：

  这些元素以行内块的形式显示在页面上，具有行内元素的特性，但可以设置宽度、高度、内边距和外边距。 行内块元素会在同一行上显示，但它们之间会保留空白间隔。 一些常见的行内块元素包括, , , , <img></code> 等。</p> <h2>二、使用 text-align: center 居中</h2> <p>使用 text-align: center; 可以在CSS中实现内联元素的水平居中。这个技术利用了CSS的 text-align 属性，通过对元素的文本对齐方式进行调整来实现居中效果。<strong>注：只展示主要代码。</strong></p> <pre><div class="container"> <span>检测居中效果</span><br> <img src="1.jpg" alt=""><br> <input type="text" value="检测居中效果"> </div></pre> <pre>.container { text-align: center; } </pre> <p>在上述示例中，将容器的 text-align 属性设置为 center，使容器内的文本水平居中显示。由于内联元素的默认宽度与内容宽度一致，所以通过调整文本的对齐方式，元素就可以在容器中水平居中。</p> <p>需要注意的是，这种方法<strong>适用于内联元素，而不适用于块级元素</strong>。对于块级元素，可以将其包裹在一个容器中，并对容器应用 text-align: center; 实现块级元素的水平居中。</p> <p>这是一种简单而常用的方法，特别适用于文本、按钮、图标等内联元素的水平居中。然而，它<strong>只能实现水平居中</strong>，对于垂直居中需要采用其他的布局方法。若元素是单行文本, 则可设置 <strong>line-height 等于父元素高度</strong>来实现垂直居中。</p> <h2>三、使用 margin: 0 auto 居中</h2> <p>要将块级元素水平居中，可以使用 margin 属性将左右边距设置为 auto。</p> <pre>.container { width: 300px; /* 设置容器的宽度 */ margin: 0 auto; /* 水平居中 */ }</pre> <p>在上述示例中，将容器的宽度设置为一个固定值，然后使用 margin: 0 auto; 将左右外边距设置为 "auto"，实现元素的水平居中。由于左右外边距都设置为 "auto"，浏览器会自动将剩余的空间均匀分配给两侧的外边距，从而使元素居中显示，这种方法适用于具有固定宽度的块级元素。</p> <p></p> <h2>四、使用 Flexbox 居中元素</h2> <p>Flex 弹性布局，通过将容器的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性分别进行水平和垂直居中设置，元素将在容器中居中显示。</p> <pre>.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } </pre> <p>Flexbox 还提供了其他属性，如 flex-direction、flex-wrap、align-content 等，可以根据具体需求进行进一步的布局调整。使用 Flexbox 可以轻松实现各种居中效果，并且具有很好的浏览器兼容性。</p> <h2>五、使用 Grid 居中元素</h2> <p>网格布局 Grid 是另一种强大的布局模型，也可以用于实现元素的居中布局。通过将容器的 display 属性设置为 grid，并使用 place-items 属性设置为 center，元素将在容器中居中显示。</p> <pre>.container { display: grid; place-items: center; /* 水平和垂直居中 */ }</pre> <p>在上面的代码示例中，<code>place-items: center</code>是水平和垂直居中，如果只想水平居中可以用<code>justify-items: center</code>。如果只想垂直居中可以用 <code>align-items: center</code>。</p> <h2>六、使用定位和负边距居中</h2> <p>首先将容器的左边距设置为50%（相对于父容器），然后使用<code>transform: translateX(-50%)</code>;将元素向左平移50%的宽度，从而实现了水平居中。</p> <pre>.container { position: absolute; left: 50%; transform: translateX(-50%); } </pre> <p>下面是水平和垂直居中的示例。</p> <pre>.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </pre> <p>将要居中的元素的定位属性设置为 absolute。通过将元素的 top 和 left 属性都设置为 50%，元素的左上角将位于容器的中心。最后，通过 transform 属性和 translate 函数将元素向上和向左平移自身宽度和高度的一半，从而实现垂直居中的效果。</p> <p>使用绝对定位和负边距可以适用于不同类型的元素，包括块级元素和内联元素。这是一种简洁而有效的方法，可以快速实现水平居中布局。</p> <h2>七、使用 calc() 函数居中</h2> <p>calc() 函数通过执行简单的数学运算，并返回计算结果作为CSS属性值。使用 calc() 函数可以根据具体的需求进行灵活的计算和布局，实现元素在水平或垂直方向的居中。</p> <p>对于水平居中，可以使用 calc() 函数结合百分比和像素值来计算元素的左右外边距。通过将50%（容器的一半宽度）减去150像素（元素宽度的一半）来计算得到。</p> <pre>.container { width: 300px; margin-left: calc(50% - 150px); margin-right: calc(50% - 150px); /* background-color: blue; */ } </pre> <p>对于垂直居中，可以使用 calc() 函数结合百分比、像素值和视口单位（如vh）来计算元素的上下外边距。通过将50vh（视口高度的一半）减去200像素（元素高度的一半）来计算得到的。</p> <pre>.container { height: 400px; margin-top: calc(50vh - 200px); margin-bottom: calc(50vh - 200px); } </pre> <p>请注意，calc() 函数的兼容性良好，但在使用时需要确保计算表达式正确并考虑浏览器的兼容性。</p> <h2>八、使用 table 居中</h2> <p>使用表格布局（Table Layout）可以实现元素的居中布局。虽然表格布局在现代响应式布局中不常用，但在某些特定情况下仍然可以作为一种解决方案。</p> <p>要使用表格布局居中元素，需要创建一个包含一个单元格的表格，并将元素放置在该单元格中。</p> <p></p> <pre>.container { display: table; width: 100%; } .content { display: table-cell; text-align: center; }</pre> <p></p> <p></p> <pre><div class="container"> <div class="content"> <div>检测居中效果</div> <p>检测居中效果</p> <input type="text" value="检测居中效果"> </div> </div></pre> <p></p> <p>在上述示例中，容器的宽度被设置为100%以使其填充父容器的宽度。父容器设置为 display: table，子容器设置为 display: table-cell，并使用 text-align: center 将元素水平居中。</p> <p>需要注意的是，使用表格布局可能会影响文档的语义性，因此仅在适用的情况下使用。在现代的CSS布局中，使用 Flexbox 或 Grid 布局更为推荐，因为它们提供更灵活和语义化的布局选项。</p> <h2>九、总结</h2> <p>本文介绍了在CSS中实现元素居中的几种常用技术方法，主要介绍的是水平居中，根据具体需求和布局，选择适合的方法实现元素的居中效果即可。这些方法可以单独使用或结合使用，取决于布局和设计要求。同时，还可以使用其他CSS属性和技术来进一步优化和调整居中效果。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1727532841471913984"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Css,css,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1887294973569724416.htm" title="【HTML性能优化】提升网站加载速度：GZIP、懒加载与资源合并" target="_blank">【HTML性能优化】提升网站加载速度：GZIP、懒加载与资源合并</a> <span class="text-muted">吴师兄大模型</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%8A%A0%E8%BD%BD/1.htm">网站加载</a><a class="tag" taget="_blank" href="/search/GZIP/1.htm">GZIP</a><a class="tag" taget="_blank" href="/search/%E6%87%92%E5%8A%A0%E8%BD%BD/1.htm">懒加载</a><a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90%E5%90%88%E5%B9%B6/1.htm">资源合并</a> <div>系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验</div> </li> <li><a href="/article/1887279977733353472.htm" title="前端框架中 HTML 的应用技巧：React、Vue、Angular 深度解析" target="_blank">前端框架中 HTML 的应用技巧：React、Vue、Angular 深度解析</a> <span class="text-muted">吴师兄大模型</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Angular/1.htm">Angular</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验</div> </li> <li><a href="/article/1887274679903776768.htm" title="深入剖析Electron的原理" target="_blank">深入剖析Electron的原理</a> <span class="text-muted">Orange301511</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Electron是一个强大的跨平台桌面应用开发框架，它允许开发者使用HTML、CSS和JavaScript来构建各种桌面应用程序。了解Electron的原理对于开发者至关重要，这样在设计应用时能更合理，遇到问题也能更准确地分析和解决。下面将从多个方面深入剖析Electron的原理。架构层面Electron的核心架构基于两个主要组件：Chromium和Node.js。Chromium是一个开源的浏览</div> </li> <li><a href="/article/1887269131506479104.htm" title="聊聊vscode配置settings.json知其所以然（附大量配置）" target="_blank">聊聊vscode配置settings.json知其所以然（附大量配置）</a> <span class="text-muted">星野睡不醒</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/settings.json/1.htm">settings.json</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/fe/1.htm">fe</a> <div>前言vscode的配置settings.json是一个老生常谈的话题，随着时间的流逝我们可能会很高频的改动他，但我们应该极力避免一个问题：⚠️配了某项但是不知道他的作用⚠️其实就是一个知其所以然的问题。籍此话题，本文将细致的分析我的settings.json，希冀可以给读者带来一些帮助。正文以下部分插件的配置来自于：《前端web开发高效vscode插件分享（辩证的海量实战检验）》中提到过的插件。自</div> </li> <li><a href="/article/1887259659736248320.htm" title="java使用react_基于JVM使用React.js和Spring Boot建立同构的Web应用" target="_blank">java使用react_基于JVM使用React.js和Spring Boot建立同构的Web应用</a> <span class="text-muted">tarv</span> <a class="tag" taget="_blank" href="/search/java%E4%BD%BF%E7%94%A8react/1.htm">java使用react</a> <div>这是一个展示如何使用Java的SpringBoot实现预渲染前端MVC(MVC-frontend)的同构Web应用开源项目：winterbe/spring-react-example·GitHub所谓同构Isomorphic应用是指Javacript在客户端和服务器端同时运行，后端和前端同享相同的代码。传统Web应用是在服务器端产生HTML，然后发往客户端，后来这被客户端MVC改变如Angular</div> </li> <li><a href="/article/1887251964241178624.htm" title="React Native 列表组件：FlashList、FlatList 及更多" target="_blank">React Native 列表组件：FlashList、FlatList 及更多</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在移动开发中，高效展示数据列表至关重要。作为ReactNative开发者，我们可以使用多种强大的工具来完成这一任务。无论是ScrollView、SectionList还是FlatList，ReactNative都提供了一系列用于数据展示的组件。然而，随着数据集的增长和性能需求的提高，我们需要更优化的解决方案。这时，Shopify推出</div> </li> <li><a href="/article/1887243127903809536.htm" title="利用Vue编写一个“计数器”" target="_blank">利用Vue编写一个“计数器”</a> <span class="text-muted">慕斯-ing</span> <a class="tag" taget="_blank" href="/search/Vue2.x/1.htm">Vue2.x</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>目录一、利用Vue编写一个“计数器”的操作方法：二、html文件相关源代码三、CSS文件相关源代码四、代码执行效果展示如下一、利用Vue编写一个“计数器”的操作方法：1、data中定义计数器的相关数据，如num、min、max。2、methods中添加计数器的递增与递减方法，其中①递减sub方法：大于0递减；②递增add方法：小于10累加。3、使用v-text将num设置给span标签。4、使用v</div> </li> <li><a href="/article/1887241113035665408.htm" title="HTML基本语法" target="_blank">HTML基本语法</a> <span class="text-muted">ufosuai555</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是HTML?HTML是超文本标记语言（HyperTextMarkupLanguage）的缩写，是一种用于创建网页的标准标记语言。HTML允许网页设计师通过使用标签来描述网页的结构和内容。W3C标准W3C（WorldWideWebConsortium）是一个国际组织，负责制定和推广互联网标准。W3C标准包括HTML、CSS、JavaScript等，这些标准确保了网页在不同浏览器和设备上的兼容性和</div> </li> <li><a href="/article/1887238465532260352.htm" title="前端的深拷贝和浅拷贝_详解浅拷贝和深拷贝" target="_blank">前端的深拷贝和浅拷贝_详解浅拷贝和深拷贝</a> <span class="text-muted">weixin_39661353</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B5%85%E6%8B%B7%E8%B4%9D/1.htm">前端的深拷贝和浅拷贝</a> <div>#JavaScript浅拷贝和深拷贝[TOC]##JavaScript的两种变量类型JavaScript变量的类型分为两种，基本类型和引用类型，其中基本类型是指简单的数据段，有5种：Undefined、Null、Boolean、Number和String引用类型是指可能有多个值构成的对象，一般为：Object,Array,function等为什么要先说变量类型呢，是因为基本类型是按值访问的，不会影</div> </li> <li><a href="/article/1887238339250155520.htm" title="前端的深拷贝和浅拷贝_前端 深拷贝和浅拷贝" target="_blank">前端的深拷贝和浅拷贝_前端 深拷贝和浅拷贝</a> <span class="text-muted">weixin_39614060</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9A%84%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B5%85%E6%8B%B7%E8%B4%9D/1.htm">前端的深拷贝和浅拷贝</a> <div>js的数据类型分为两种，基本类型和引用类型基本类型值(数值、布尔值、字符串、null和undefined)：指的是保存在栈内存中的简单数据段。引用类型值(对象、数组、函数、正则)：指的是那些保存在堆内存中的对象，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象。在复制变量中，对于基本类型来说，两者是互不影响的。varnum=1varobj=numvarobj=3//</div> </li> <li><a href="/article/1887236448394997760.htm" title="React学习笔记" target="_blank">React学习笔记</a> <span class="text-muted">26:28</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1、React初步认识React构建Web和原生交互界面的库，相较于其它前端框架的优势，具有丰富的生态跨平台支持。1.1、React的开发依赖开发React必须依赖三个库：react：包含react所必须的核心代码；react-dom：react渲染在不同平台所需要的核心代码；babel：将jsx转换成React代码的工具；1.2、VSCode代码片段我们在前面练习React的过程中，有些代码片段</div> </li> <li><a href="/article/1887235818146295808.htm" title="【前端基础】——浅拷贝和深拷贝" target="_blank">【前端基础】——浅拷贝和深拷贝</a> <span class="text-muted">Array[林]</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E2%80%94%E2%80%94JavaScript/1.htm">前端——JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录浅拷贝和深拷贝浅拷贝和深拷贝的定义浅拷贝深拷贝数据类型的值传递和地址传递浅拷贝实现的具体方式数字方法slice()Object.assignfor...in...深拷贝的具体实现JSON.parse(JSON.stringify())递归浅拷贝和深拷贝浅拷贝和深拷贝的定义浅拷贝浅拷贝对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。深拷贝深拷贝是指拷贝对象的具体内容，其内存地址是</div> </li> <li><a href="/article/1887235691797082112.htm" title="前端项目技术点总结：React项目创建" target="_blank">前端项目技术点总结：React项目创建</a> <span class="text-muted">jimson_zhu</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>（一）webpack基本使用和配置项目初始化；安装webpack和其脚手架webpack-cli；新建webpack.config.js文件，并且配置；安装插件html-webpack-plugin，并且配置；安装webpack-dev-server，配置热启动；安装对应loader（css，js，图片等等）；创建webpack.config.js，配置入口、出口、插件和loader；然后在pac</div> </li> <li><a href="/article/1887234178966155264.htm" title="前端实现浅拷贝和深拷贝的方法" target="_blank">前端实现浅拷贝和深拷贝的方法</a> <span class="text-muted">Lucky_girl_wan</span> <a class="tag" taget="_blank" href="/search/%E8%AE%B0%E5%BD%95/1.htm">记录</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>浅拷贝就是指对象复制的时候只复制一层，当源对象的数据改变时，新的对象的数据也会改变深拷贝是指复制对象的所有层级，当源对象的数据改变时，新的对象的数据不会改变1.JSON.parse(JSON.stringify())既可以拷贝数组也可以拷贝对象不可以拷贝函数（深拷贝）letarr1=[1,2,false,{a:1}]letarr2=JSON.parse(JSON.stringify(arr_1))</div> </li> <li><a href="/article/1887234052591775744.htm" title="intra-mart实现简易登录页面笔记" target="_blank">intra-mart实现简易登录页面笔记</a> <span class="text-muted">追逐梦想永不停</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、前言最近在学习intra-mart框架，在此总结下笔记。intra-mart是一个前后端不分离的框架，开发时主要用的就是xml、html、js这几个文件；xml文件当做配置文件，html当做前端页面文件，js当做后端文件（js里能连接数据库）；所以js文件需要注意，因为算后端文件，其中的语法与前端开发的js有些不太相同（日志打印不能用console.log）。二、代码部分1.路由文件WEB-I</div> </li> <li><a href="/article/1887233800543465472.htm" title="前端 | JavaScript中的reduce方法" target="_blank">前端 | JavaScript中的reduce方法</a> <span class="text-muted">酒酿泡芙1217</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/reduce/1.htm">reduce</a> <div>1.什么是reducereduce方法是JavaScript中数组的重要方法之一，用于对数组中的元素进行累积计算。它接收一个回调函数作为参数，并返回一个最终计算结果。reduce在许多场景下都非常有用，比如求和、数组扁平化、对象计数、数据转换等。2.reduce语法2.1语法arr.reduce(callback,initialValue)2.2参数说明callback(accumulator,c</div> </li> <li><a href="/article/1887217157595525120.htm" title="Tauri - #005 后端rust调用文件打开对话框获取绝对路径传递给前端" target="_blank">Tauri - #005 后端rust调用文件打开对话框获取绝对路径传递给前端</a> <span class="text-muted">满天飞飞</span> <a class="tag" taget="_blank" href="/search/MyTauri/1.htm">MyTauri</a><a class="tag" taget="_blank" href="/search/Tauri/1.htm">Tauri</a> <div>文章目录后端rust调用文件打开对话框获取绝对路径传递给前端1目标2步骤2.1main.rs2.2修改tauri.conf.json2.3修改Cargo.toml2.3.1原来的Cargo.toml2.3.2修改后的Cargo.toml2.4修改Greet.vue2.5运行工程后端rust调用文件打开对话框获取绝对路径传递给前端1目标后端rust调用文件打开对话框获取绝对路径。2步骤2.1main</div> </li> <li><a href="/article/1887217031237922816.htm" title="前端大模型入门：编码(Tokenizer)和嵌入(Embedding)解析" target="_blank">前端大模型入门：编码(Tokenizer)和嵌入(Embedding)解析</a> <span class="text-muted">大模型玩家</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/embedding/1.htm">embedding</a><a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a> <div>本文介绍了大规模语言模型（LLM）中的两个核心概念：Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID，而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法，帮助读者理解其基本原理和应用场景。作者｜想飞的雪糕LLM的核心是通过对语言进行建模来生成自然语言输出或理解输入,两个重要的概念在其中发挥关键作用：T</div> </li> <li><a href="/article/1887203541982965760.htm" title="Modbus 协议快速入门" target="_blank">Modbus 协议快速入门</a> <span class="text-muted">Windows _ XP</span> <a class="tag" taget="_blank" href="/search/modbus/1.htm">modbus</a> <div>Modbus协议快速入门Modbus协议快速入门1.什么是Modbus协议2.Modbus有什么用3.Modbus内容3.1Modbus概述3.2Modbus-RTU3.2.1帧格式3.2.20x03查询寄存器功能码3.2.30x06修改寄存器功能码3.2.30x10批量修改寄存器功能码3.3Modbus-TCP3.4Modbus-ACSSII3.4.1帧形式3.5CRC冗余校验4.如何通过代码实</div> </li> <li><a href="/article/1887200896153088000.htm" title="vscode插件" target="_blank">vscode插件</a> <span class="text-muted">CuteyChoma</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>AntDesignSnippetsAutoCloseTag自动添加HTML/XML关闭标签AtomOneLight主题皮肤颜色AutoRenameTag自动重命名配对的HTML/XML标签Beautify格式化代码BetterCommentBeautifycss/sass/scss/lessBracketPairColorizer颜色识别匹配括号change-case虽然VSCode内置了开箱即用</div> </li> <li><a href="/article/1887198725323943936.htm" title="现代 CSS 解决方案：文字颜色自动适配背景色！" target="_blank">现代 CSS 解决方案：文字颜色自动适配背景色！</a> <span class="text-muted"></span> <div>在23年的CSS新特性中，有一个非常重要的功能更新--相对颜色。简单而言，相对颜色的功能，让我们在CSS中，对颜色有了更为强大的掌控能力。其核心功能就是，让我们能够基于一个现有颜色A，通过一定的转换规则，快速生成我们想要的颜色B。其功能能够涵盖：精简调暗饱和度降低饱和度色度增强调整不透明度反转补充转换对比度调色板完整的教程，你可以看这里--ChromeforDevelopers-CSS相对颜色语法</div> </li> <li><a href="/article/1887192671496237056.htm" title="前端实现ai会话聊天的核心原理三步篇" target="_blank">前端实现ai会话聊天的核心原理三步篇</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>本人有幸在业务当中实现了一个ai聊天会话界面，因此在这里总结下实现的经验。原理1:如何实现机器人的流式回复流式回复的效果就像是打字效果一样，当然与打字效果也有差异，那就是打字效果是一个字一个字的接替出现，而流式效果就是在打字效果的基础上一句话或者一个段落那样接替出现。要想实现这个效果，那么就需要请求服务端，服务端通过发消息返回给前端，这就不得不提到fetchEventSourceapi了。fetc</div> </li> <li><a href="/article/1887172397115699200.htm" title="2024前端笔试题（vue2/vue3/react）" target="_blank">2024前端笔试题（vue2/vue3/react）</a> <span class="text-muted">字符敲击手</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E6%8A%80%E8%83%BD/1.htm">前端面试技能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>一、$HTML，HTTP，web综合问题1、前端需要注意哪些SEO（搜索引擎优化）合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出</div> </li> <li><a href="/article/1887170885765361664.htm" title="前端开发中的“原生模块化”——深入解析ES模块（ESM）的使用与优化" target="_blank">前端开发中的“原生模块化”——深入解析ES模块（ESM）的使用与优化</a> <span class="text-muted">桂月二二</span> <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a> <div>随着前端开发技术的不断演进，模块化的概念已不再是新鲜话题。然而，前端开发者仍然面临如何选择和使用模块化工具和规范的问题。近年来，ES模块（ESM，ECMAScriptModules）作为一种原生支持的模块化机制，逐渐成为前端开发的标准。相比传统的CommonJS、AMD等模块化方式，ESM具有更高的性能和更好的兼容性，成为现代前端开发的主流。本文将深入解析ES模块（ESM）的使用方法与优化策略，探</div> </li> <li><a href="/article/1887170125300297728.htm" title="JavaaScript----事件流的处理方式" target="_blank">JavaaScript----事件流的处理方式</a> <span class="text-muted">*Miraitowa*</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript与HTML的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻（用户或浏览器执行了某种动作）。可以使用仅在事件发生时执行的监听器（也叫处理程序）来订阅事件。这个模型叫“观察者模式”，其能够做到页面行为（在JavaScript中定义）与页面展示（在HTML和CSS中定义）的分离。一、事件流当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。这</div> </li> <li><a href="/article/1887168610401579008.htm" title="使用Vue.js和C-Lodop实现预览和打印PDF的前端开发" target="_blank">使用Vue.js和C-Lodop实现预览和打印PDF的前端开发</a> <span class="text-muted">CflfEditor</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a> <div>在前端开发中，有时候我们需要实现预览和打印PDF文件的功能。本文将介绍如何使用Vue.js和C-Lodop库来实现这样的功能。首先，我们需要安装Vue.js和C-Lodop库。在Vue.js项目中，可以使用npm或者yarn进行安装。打开终端，切换到项目目录，执行以下命令来安装Vue.js：npminstallvue接下来，我们需要下载C-Lodop库并进行配置。C-Lodop是一个用于打印和预览</div> </li> <li><a href="/article/1887166342117781504.htm" title="Vue.js组件开发-实现字母向上浮动" target="_blank">Vue.js组件开发-实现字母向上浮动</a> <span class="text-muted">LCG元</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>使用Vue实现字母向上浮动的效果实现步骤创建Vue项目：使用VueCLI来创建一个新的Vue项目。定义组件结构：在组件的模板中，定义包含字母的元素。添加样式：使用CSS动画来实现字母向上浮动的效果。绑定动画类：在Vue组件中，为字母元素绑定动画类。完整代码{{letter}}exportdefault{data(){return{//要显示的字母字符串text:"Hello,World!",//将</div> </li> <li><a href="/article/1887147560099966976.htm" title="核心HTML5/CSS3基础面试题" target="_blank">核心HTML5/CSS3基础面试题</a> <span class="text-muted">AgostoDu</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML5/CSS3高频经典面试题汇总了2023年各互联网大厂以及中小型创业公司基础阶段的最新高频面试题HTML/HTML5标签Interviewquestions1、说说你对HTML语义化的理解？HTML5新增了哪些语义化标签？（字节、百度，阿里，腾讯、京东，小米）2、DOCTYPE是干嘛的，都有哪些属性（字节）3、meta标签是干什么的，都有什么属性和作用（字节，58，商汤）4、你了解哪些HT</div> </li> <li><a href="/article/1887146549260120064.htm" title="前端进阶面试-JS面试题(阿里、字节、腾讯、美团面试高频）" target="_blank">前端进阶面试-JS面试题(阿里、字节、腾讯、美团面试高频）</a> <span class="text-muted">2401_84150137</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>…if(/*异步执行成功*/){resolve(value)}elseif(/*异步执行失败*/){reject(error)}})myPromise.then((value)=>{//成功后调用,使用value值},(error)=>{//失败后调用,获取错误信息error})4.Promise优缺点================================================</div> </li> <li><a href="/article/1887141071683645440.htm" title="前端实现ai会话聊天的核心原理三步篇" target="_blank">前端实现ai会话聊天的核心原理三步篇</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>本人有幸在业务当中实现了一个ai聊天会话界面，因此在这里总结下实现的经验。原理1:如何实现机器人的流式回复流式回复的效果就像是打字效果一样，当然与打字效果也有差异，那就是打字效果是一个字一个字的接替出现，而流式效果就是在打字效果的基础上一句话或者一个段落那样接替出现。要想实现这个效果，那么就需要请求服务端，服务端通过发消息返回给前端，这就不得不提到fetchEventSourceapi了。fetc</div> </li> <li><a href="/article/88.htm" title="ztree设置禁用节点" target="_blank">ztree设置禁用节点</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/setDisabledNode/1.htm">setDisabledNode</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); }); </div> </li> <li><a href="/article/215.htm" title="JVM patch by Taobao" target="_blank">JVM patch by Taobao</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。   7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and</div> </li> <li><a href="/article/342.htm" title="将session存储到数据库中" target="_blank">将session存储到数据库中</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) );   <?php /** * Created by PhpStorm. * User: michaeldu * Date</div> </li> <li><a href="/article/469.htm" title="Vector" target="_blank">Vector</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/vector/1.htm">vector</a> <div>public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i); </div> </li> <li><a href="/article/596.htm" title="各连接池配置参数比较" target="_blank">各连接池配置参数比较</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a> <div>        排版真心费劲，大家凑合看下吧，见谅~     Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User   数据库密码 Password Password Password   驱动名</div> </li> <li><a href="/article/723.htm" title="[简单]mybatis insert语句添加动态字段" target="_blank">[简单]mybatis insert语句添加动态字段</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>      mysql数据库,id自增,配置如下：       <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&</div> </li> <li><a href="/article/850.htm" title="struts2拦截器配置" target="_blank">struts2拦截器配置</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts>     <package name="struts2" extends="struts-default">         &</div> </li> <li><a href="/article/977.htm" title="IE中页面不居中，火狐谷歌等正常" target="_blank">IE中页面不居中，火狐谷歌等正常</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IE%E4%B8%AD%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%B1%85%E4%B8%AD/1.htm">IE中页面不居中</a> <div>问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3</div> </li> <li><a href="/article/1104.htm" title="String,int,Integer,char 几个类型常见转换" target="_blank">String,int,Integer,char 几个类型常见转换</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.</div> </li> <li><a href="/article/1231.htm" title="PL/SQL的游标类型" target="_blank">PL/SQL的游标类型</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%B8%B8%E6%A0%87%28%E9%9D%99%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">显示游标(静态游标)</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%B8%B8%E6%A0%87/1.htm">隐式游标</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87%E7%9A%84%E6%9B%B4%E6%96%B0%E5%92%8C%E5%88%A0%E9%99%A4/1.htm">游标的更新和删除</a><a class="tag" taget="_blank" href="/search/%25rowtype/1.htm">%rowtype</a><a class="tag" taget="_blank" href="/search/ref%E6%B8%B8%E6%A0%87%28%E5%8A%A8%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">ref游标(动态游标)</a> <div>游标是oracle中的一个结果集,用于存放查询的结果;   PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标     注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标   隐式游标:主要是对DML数据的操作隐</div> </li> <li><a href="/article/1358.htm" title="JUnit4中@AfterClass @BeforeClass @after @before的区别对比" target="_blank">JUnit4中@AfterClass @BeforeClass @after @before的区别对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JUnit4/1.htm">JUnit4</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法   对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源  对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次</div> </li> <li><a href="/article/1485.htm" title="精通Oracle10编程SQL(12)开发包" target="_blank">精通Oracle10编程SQL(12)开发包</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规</div> </li> <li><a href="/article/1612.htm" title="【EhCache二】ehcache.xml配置详解" target="_blank">【EhCache二】ehcache.xml配置详解</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache.xml/1.htm">ehcache.xml</a> <div>在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe   ehcac</div> </li> <li><a href="/article/1739.htm" title="java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL" target="_blank">java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener>  随后启动</div> </li> <li><a href="/article/1866.htm" title="angular.element" target="_blank">angular.element</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.element/1.htm">angular.element</a> <div>angular.element 描述:     包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）     如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e</div> </li> <li><a href="/article/1993.htm" title="java-给定两个已排序序列，找出共同的元素。" target="_blank">java-给定两个已排序序列，找出共同的元素。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素</div> </li> <li><a href="/article/2120.htm" title="sftp 异常，有遇到的吗？求解" target="_blank">sftp 异常，有遇到的吗？求解</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jcraft/1.htm">jcraft</a><a class="tag" taget="_blank" href="/search/auth/1.htm">auth</a><a class="tag" taget="_blank" href="/search/jsch/1.htm">jsch</a><a class="tag" taget="_blank" href="/search/jschexception/1.htm">jschexception</a> <div>com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec</div> </li> <li><a href="/article/2247.htm" title="[生物智能与人工智能]神经元中的电化学结构代表什么?" target="_blank">[生物智能与人工智能]神经元中的电化学结构代表什么?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>     我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色....      我们可以尝试一下...在某些神经</div> </li> <li><a href="/article/2374.htm" title="通过LAC和CID获取经纬度信息" target="_blank">通过LAC和CID获取经纬度信息</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/lac/1.htm">lac</a><a class="tag" taget="_blank" href="/search/cid/1.htm">cid</a> <div>方法1： 用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度 方法2： 发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&</div> </li> <li><a href="/article/2501.htm" title="JAVA的困难分析" target="_blank">JAVA的困难分析</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。   -----------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2628.htm" title="小学5年级英语单词背诵第二课" target="_blank">小学5年级英语单词背诵第二课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>money 钱 paper 纸 speak 讲，说 tell 告诉   remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码   learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射   must 必须 light 灯，光线，轻的 front </div> </li> <li><a href="/article/2755.htm" title="linux下面没有tree命令" target="_blank">linux下面没有tree命令</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>centos p安装 yum -y install tree   mac os安装 brew install tree   首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。 语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式</div> </li> <li><a href="/article/2882.htm" title="Map迭代方式，Map迭代，Map循环" target="_blank">Map迭代方式，Map迭代，Map循环</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/Map%E5%BE%AA%E7%8E%AF/1.htm">Map循环</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3/1.htm">Map迭代</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3%E6%96%B9%E5%BC%8F/1.htm">Map迭代方式</a> <div>Map迭代方式，Map迭代，Map循环   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年</div> </li> <li><a href="/article/3009.htm" title="Spring Cache注解+Redis" target="_blank">Spring Cache注解+Redis</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解  依赖jar包： <!-- redis --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </div> </li> <li><a href="/article/3136.htm" title="Guava中针对集合的 filter和过滤功能" target="_blank">Guava中针对集合的 filter和过滤功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子：    @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"</div> </li> <li><a href="/article/3263.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3390.htm" title="架构师之流处理---------bytebuffer的mark,limit和flip" target="_blank">架构师之流处理---------bytebuffer的mark,limit和flip</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/ByteBuffer/1.htm">ByteBuffer</a> <div>1.前言。   如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思 。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy</div> </li> <li><a href="/article/3517.htm" title="org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1" target="_blank">org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%24/1.htm">$</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E4%B9%89/1.htm">转义</a><a class="tag" taget="_blank" href="/search/el%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">el表达式</a> <div>最近在做Highcharts的过程中，在写js时，出现了以下异常：   严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, </div> </li> <li><a href="/article/3644.htm" title="用Java实现发送邮件到163" target="_blank">用Java实现发送邮件到163</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div>/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。 本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。 此篇仅介绍用</div> </li> <li><a href="/article/3771.htm" title="探索实体类存在的真正意义" target="_blank">探索实体类存在的真正意义</a> <span class="text-muted">java小叶檀</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>一. 实体类简述    实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象   它的一般格式就是 public class A{ private String id; public Str</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>