2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10...
8 盒模型 Box Model
URL: http://www.w3.org/TR/CSS2/box...
Translator : HaoyCn
Date: 15th of Aug, 2015
译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！
CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。
8.1 盒尺寸 Box Dimensions
每个盒都有一个内容区域 Content （如，文本，图片等）以及可选的围绕在周围的内边距、边框和外边距区域；每个区域的大小由本文后述的属性指定。下图展示了这些区域的关联以及用于描述外边距、边框和内边距的各部分的术语。
外边距、边框和内边距可以被分解到上、右、下、左各部分（如，在上图中， LM 表示左外边距， RP 表示右内边距， TB 表示上边框等）。
四种区域（内容、内边距、边框、外边距）的边界被称作一个“边缘 Edge ”，因此每个盒有四种边缘：
内容边缘 Content Edge 或内边缘 Inner Edge
内容边缘围绕着由盒的宽和高所指定的矩形，该矩形通常由元素的已渲染内容 Rendered Content 所决定。四个内容边缘规定了盒的内容盒 Content Box 。
内边距边缘
内边距边缘围绕着盒的内边距。如果内边距宽度为0，则内边距边缘即是内容边缘。四个内边距边缘规定了盒的内边距盒 Padding Box 。
边框边缘
边框边缘围绕着盒的边框。如果边框宽度为0，则边框边缘即是内边距边缘。四个边框边缘规定了盒的边框盒 Border Box 。
外边距边缘或外边缘
外边距边缘围绕着盒的外边距。如果外边距宽度为0，则外边距边缘即边框边缘。四个外边距边缘规定了盒的外边距盒 Margin Box 。
每个边缘都可以被分解成上、右、下、左边缘。
盒内容区域的尺寸——即内容宽度 Content Width 和内容高度 Content Width ——由这些因素所决定：生成盒的元素是否设置了 width 和 height 属性；盒是否包含了文本或其他盒；盒是否为表格；等等。盒的宽度和高度将在视觉格式化模型详述一章中讨论。
盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 background 属性所规定。外边距的背景始终为透明。
8.2 外边距、内边距和边框的例子
下例展示了外边距、内边距和边框如何交互。HTML文档：
Examples of margins, padding, and borders<title>
<style type="text/css">
ul {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* 未设置边框 */
}
li {
color: white;/* 文本颜色为白色 */
background: blue;/* 内容和内边距背景为蓝色 */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* 注意右内边距为0 */
list-style: none/* 列表前没有符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: medium;/* 各边均设置边框 */
border-color: lime;
}
</style>
</head>
<body>
<ul>
<li>First element of list</li>
<li class="withborder">Second element of list is a bit longer to illustrate wrapping.</li>
</ul>
</body>
</html></code></pre>
<p>该文档结果为文档树中（省略其他关系）一个 <code> ul </code> 元素及其两个 <code> li </code> 子元素。</p>
<p>下面的第一图展示了例子的结果。第二图展示了 <code> ul </code> 元素及其 <code> li </code> 子元素的外边距、内边距和边框之间的关系。（图片不成比例）</p>
<p><span class="img-wrap"><img alt="bKuRLle.png" title="bKuRLle.png" src="http://img.e-com-net.com/image/info9/f249f7a304c549689d401b8676a3ba2b.jpg" width="0" height="0"></span></p>
<p>注意：</p>
<ul>
<li><p>每个 <code> li </code> 盒的内容宽度是从上到下计算的；所有 <code> li </code> 盒的包含块由 <code> ul </code> 元素创建。</p></li>
<li><p>每个 <code> li </code> 盒的外边距盒高度由其内容高度加上上下内边距、边框、外边距所决定。需要留意的是 <code> li </code> 盒间的垂直外边距发生了折叠。</p></li>
<li><p><code> li </code> 盒的右内边距宽度被设为零（ <code> padding </code> 属性）。效果如第二图所示。</p></li>
<li><p><code> li </code> 盒的外边距是透明的——外边距总为透明——所以 <code> ul </code> 的内边距和内容区域的背景颜色（黄）穿透外边距显示了出来。</p></li>
<li><p>第二个 <code> li </code> 元素指定了虚线边框（ <code> border-style </code> 属性）。</p></li>
</ul>
<h3>8.3 外边距各属性</h3>
<p>外边距的各属性规定了盒的外边距区域的宽度。 <code> margin </code> 设置所有四个方向的外边距，而其他外边距属性则只设置各自方向宽度。这些属性应用于所有元素，但垂直外边距在非替代行内元素上无效。</p>
<blockquote>
<p>译者注：此处以及下文的各属性介绍均略，可查CSS手册</p>
</blockquote>
<h4>8.3.1 外边距折叠</h4>
<p>在CSS中，两个及以上的（不一定是同胞）盒的相邻外边距可能合并为一个单独的外边距。以这种方式的合并的外边距被称为折叠 <code> Collapse </code> ，合并后的外边距被称为折叠外边距 <code> Collapsed Margin </code> 。</p>
<p>相邻垂直外边距发生折叠，除了：</p>
<ul>
<li><p>根元素的盒的外边距不折叠</p></li>
<li><p>如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p></li>
</ul>
<p>水平外边距不重叠。</p>
<p>两个外边距为相邻关系，当且仅当：</p>
<ul>
<li><p>是同属一个块格式化上下文的文档流内块级盒</p></li>
<li><p>没有行盒、空隙、内边距和边框分隔它们（注意某些零高度行盒会因此而被忽略（见9.4.2章））</p></li>
<li><p>盒边缘垂直相邻，也就是说，满足以下形式之一：</p></li>
<li><p>盒上外边距及其第一个文档流内子盒的上外边距</p></li>
<li><p>盒下外边距及下一个文档流内的同胞盒的上外边距</p></li>
<li><p>如果父盒的高度计算值为 <code> auto </code> ，其最后一个文档流内子盒的下外边距及父盒的下外边距</p></li>
<li><p>如果一个盒不建立新的块格式化上下文、 <code> min-height </code> 计算值为零、 <code> height </code> 计算值为零或 <code> auto </code> 、没有在文档流内的子盒，其上下外边距</p></li>
</ul>
<p>如果一个折叠外边距与另一外边距的任何一边相邻，则视二者相邻。</p>
<p>注意：不是同胞或祖先关系的元素也可以产生相邻外边距。</p>
<p>注意：上述规则表明了：</p>
<ul>
<li><p>浮动盒的外边距不同其他任何盒折叠（甚至浮动及其文档流内的子元素也不折叠）</p></li>
<li><p>创建了新的块格式化上下文的元素（如浮动、 <code> overflow </code> 不为 <code> visible </code> 的元素）的外边距不同其在文档流内的子元素外边距折叠</p></li>
<li><p>绝对定位盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></li>
<li><p>行内块盒的外边距不同其他任何盒折叠（甚至不同其文档流内的子元素折叠）</p></li>
<li><p>文档流内块级元素的下外边距始终同其下一个文档流内的块级同胞的上外边距折叠，除非该对同胞之间有空隙。</p></li>
<li><p>文档流内块元素如果没有上边框和上内边距，其第一个文档流内块级子元素没有空隙，二者的上外边距折叠。</p></li>
<li><p>文档流内 <code> height </code> 为 <code> auto </code> 、 <code> min-height </code> 为零、没有下内边距和下边框的块盒，如果其最后一个文档流内块级子盒的下外边距没有同一个有空隙的上外边距折叠，二者下外边距折叠。</p></li>
<li><p>如果某盒的 <code> min-height </code> 属性为零、没有上下边框和上下内边距、其 <code> height </code> 为0或 <code> auto </code> 、没有包含行盒、其所有的文档流内子元素外边距（如果有）折叠，则折叠其外边距。</p></li>
</ul>
<p>当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果发生折叠的外边距中有负数，则为最大正数相邻外边距减去最小负数相邻外边距的绝对值。如果不存在正数外边距，则为零减去最小负数相邻外边距的绝对值。</p>
<p>如果一个盒的上下外边距相邻，则外边距可能穿过盒而折叠 <code> Collapse Through It </code> 。这种情况下，元素的定位取决于它同其他外边距折叠的元素的关系。</p>
<ul>
<li><p>如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。</p></li>
<li><p>否则，要么该元素的父元素的外边距不折叠，要么只有父元素的下外边距折叠。上边框边缘位置是假定该元素下边框非零时的位置。</p></li>
</ul>
<p>需要注意的是，被折叠穿过的元素的定位对与之外边距折叠的其他元素的定位无影响；其上边框边缘的定位仅用于布局其后代元素。</p>
<h3>8.6 双向上下文 Bidirectional Context 中行内元素的盒模型</h3>
<p>对每个行盒而言，用户代理必须按视觉顺序（而非逻辑顺序）渲染其生成的行内盒的外边距、边框和内边距。</p>
<p>当元素 <code> direction </code> 属性值为 <code> ltr </code> ，元素呈现的第一个行盒的最左生成盒拥有左外边距、左边框和左内边距，而元素呈现的最后一个行盒的最右生成盒拥有右内边距、右边框和右外边距。</p>
<p>当元素 <code> direction </code> 属性值为 <code> rtl </code> ，元素呈现的第一个行盒的最右生成盒拥有右外边距、右边框和右内边距，而元素呈现的最后一个行盒的最左生成盒拥有左内边距、左边框和左外边距。</p>
<h1>译者之思</h1>
<p>译者读毕此文，细心揣摩，将经验和疑问总结如下：</p>
<h3>一、两种盒模型</h3>
<p>本章节描述了W3C的标准盒模型，同时还存在IE6在怪异模式 <code> Quicks Mode </code> 的另一种盒模型。此处简述二者的区别如下——</p>
<p>W3C标准下：盒总宽/高度 = width/height + padding + border + margin</p>
<p>怪异模式下：盒总宽/高度 = width/height + margin = 内容宽/高度 + padding + border + margin</p>
<p>CSS3中， <code> box-sizing </code> 默认为 <code> content-box </code> ，即采用W3C标准盒模型，若取值 <code> border-box </code> 则采用怪异模式盒模型。</p>
<h3>二、不透明的外边距</h3>
<p>CSS规范道：</p>
<blockquote>
<p>盒的内容、内边距以及边框区域的背景样式由生成盒的元素的 <code> background </code> 属性所规定。外边距的背景始终为透明。</p>
</blockquote>
<p>但在根元素 <code> html </code> 上设置了外边距，并规定了背景，该背景仍铺满全屏。</p>
<p>如下CSS：</p>
<pre><code>html {
margin: 50px;
background: #000;
}</code></pre>
<p><code> body </code> 同此理。译者暂不知其因。欢迎读者指教。</p>
<h3>三、有空隙的元素</h3>
<p>外边距折叠中，很多地方叙述了“有空隙的元素”，这是什么意思呢？其意义即是说，该元素清除了浮动。</p>
<p>在翻译视觉格式化模型一章中，W3C给出了清除浮动以及计算空隙宽度的的案例，译者建议读者认真阅读该部分，尤其关注：当空隙为负值时取消外边距折叠的情形。</p>
<p>点此阅读：<a href="http://segmentfault.com/a/1190000003096320">http://segmentfault.com/a/119...</a>。</p>
<p>如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。</p>
<blockquote>
<p>如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。</p>
</blockquote>
<p>以下代码中， <code> B </code> 是浮动块，为清除其浮动， <code> C </code> 引入了空隙。</p>
<p>共同CSS：</p>
<pre><code>html,body{padding:0;margin:0;}
/*横线，直观对比折叠情况*/
.line{height:50px;background:red;}
.mt{margin-top:50px;}
.mb{margin-bottom:50px;}
#B{float:left;width:1px;height:1px;}
#C{clear:both;}</code></pre>
<p><strong>其外边距将同其后同胞的相邻外边距折叠：</strong></p>
<p>HTML：</p>
<pre><code><body>
<div id="A">
<div id="B"></div>
<div id="C" class="mb"></div>
<div id="D" class="mb"></div>
<div class="line"></div>
</div>
</body></code></pre>
<p>渲染结果是， <code> C </code> 和 <code> D </code> 的外边距折叠。</p>
<p><strong>不同父块的下外边距折叠</strong></p>
<p>HTML：</p>
<pre><code> <body>
<div id="A" class="mb">
<div id="B"></div>
<div id="C" class="mb"></div>
</div>
<div class="line"></div>
</body></code></pre>
<p>渲染结果是， <code> C </code> 的外边距不同其父元素 <code> A </code> 的外边距折叠。</p>
<h3>四、避免盒自身垂直外边距折叠</h3>
<blockquote>
<p>如果一个盒不建立新的块格式化上下文、 <code> min-height </code> 计算值为零、 <code> height </code> 计算值为零或 <code> auto </code> 、没有在文档流内的子盒，其上下外边距</p>
</blockquote>
<p>由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：</p>
<ol>
<li><p>建立新块格式化上下文，如 <code> overflow: hidden </code></p></li>
<li><p>设置 <code> min-height </code></p></li>
<li><p>设置固定高 <code> height </code></p></li>
<li><p>添加文档流内（即非浮动、非绝对定位）子盒</p></li>
</ol>
<p>需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。</p>
</article>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1296418943073853440"></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)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1950232820773351424.htm"
title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
<span class="text-muted">good2know</span>
<div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
</li>
<li><a href="/article/1950214964396486656.htm"
title="js操作样式" target="_blank">js操作样式</a>
<span class="text-muted">郝加升</span>
<div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div>
</li>
<li><a href="/article/1950194742100815872.htm"
title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a>
<span class="text-muted"></span>
<div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div>
</li>
<li><a href="/article/1950191165710069760.htm"
title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a>
<span class="text-muted">浪子神剑</span>
<div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div>
</li>
<li><a href="/article/1950115062781898752.htm"
title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a>
<span class="text-muted">yqcoder</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div>
</li>
<li><a href="/article/1950075480849838080.htm"
title="关于前端的性能优化" target="_blank">关于前端的性能优化</a>
<span class="text-muted"></span>
<div>性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C</div>
</li>
<li><a href="/article/1950066193071140864.htm"
title="Grid布局参考资料" target="_blank">Grid布局参考资料</a>
<span class="text-muted">kiterumer</span>
<div>Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（</div>
</li>
<li><a href="/article/1950039673418084352.htm"
title="解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法" target="_blank">解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法</a>
<span class="text-muted">cmmav33990</span>
<a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>这个错误表明Webpack在处理CSS依赖时找不到合适的模块工厂，通常发生在配置不完整或依赖冲突的情况下。以下是详细的解决方案：核心解决方案方案1：安装并配置正确的CSS处理器（最推荐）bashnpminstall--save-devcss-loaderstyle-loader#或使用mini-css-extract-plugin替代style-loadernpminstall--save-dev</div>
</li>
<li><a href="/article/1950005757994921984.htm"
title="50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）" target="_blank">50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）</a>
<span class="text-muted"></span>
<div>我们继续50个小项目挑战！——Pokedex组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3结合PokeAPI来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦</div>
</li>
<li><a href="/article/1949999823293837312.htm"
title="CSS基础（3）" target="_blank">CSS基础（3）</a>
<span class="text-muted">Zzz_睡不醒</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>CSS背景操作1.多重背景(MultipleBackgrounds)div{background-image:url(image1.png),url(image2.png);background-position:rightbottom,lefttop;background-repeat:no-repeat,repeat;background-size:auto,cover;}background</div>
</li>
<li><a href="/article/1949991125741793280.htm"
title="《博客园精华集》web标准分册第2论筛选结果文章列表" target="_blank">《博客园精华集》web标准分册第2论筛选结果文章列表</a>
<span class="text-muted"></span>
<div>《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying</div>
</li>
<li><a href="/article/1949942706956464128.htm"
title="GAMES202——作业1 实时阴影(ShadowMap，PCF，PCSS)" target="_blank">GAMES202——作业1 实时阴影(ShadowMap，PCF，PCSS)</a>
<span class="text-muted"></span>
<div>目录任务ShadowMapPCFPCSS实现ShadowMapuseShadowMapPCFfindBlockerPCSS结果任务ShadowMap1.在ShadowMaterial.js中需要向Shader传递正确的uLightMVP矩阵，该矩阵参与了第一步从光源处渲染场景从而构造ShadowMap的过程。你需要完成DirectionalLight中的CalcLightMVP(translate</div>
</li>
<li><a href="/article/1949938159328489472.htm"
title="Shadow Map ———— PCSS（percentage-closer Soft Shadow）" target="_blank">Shadow Map ———— PCSS（percentage-closer Soft Shadow）</a>
<span class="text-muted">kevin_dust</span>
<div>ShadowMap————PCSS（percentage-closerSoftShadow）1、PCSS解决了什么问题传统的PCF每一次采样过滤耗费很大（每次都要遍历附近的几个点，虽然用了泊松分布，但还是不可避免），PCSS算法基本解决了该问题（通过动态计算采样范围，使用FindBlocker剔除非阴影点）传统的PCF半影不够逼真…PCSS算法通过计算准确的半影范围解决了4、PCSS的有关你资料：</div>
</li>
<li><a href="/article/1949902988864712704.htm"
title="PyQt5窗口背景设置全攻略：三种方法实现精美界面" target="_blank">PyQt5窗口背景设置全攻略：三种方法实现精美界面</a>
<span class="text-muted"></span>
<div>QSS样式表法（最常用）特点：声明式语法、支持CSS特性、子控件自动继承样式1.纯色背景设置创建主窗口并设置黄色背景win=QMainWindow()win.setObjectName("MainWindow")win.setStyleSheet("#MainWindow{background-color:yellow}")2.背景图片设置（自适应尺寸）使用border-image实现背景图平铺w</div>
</li>
<li><a href="/article/1949898570761039872.htm"
title="[python][flask]flask静态资源" target="_blank">[python][flask]flask静态资源</a>
<span class="text-muted"></span>
<div>在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├</div>
</li>
<li><a href="/article/1949895918400630784.htm"
title="前端面试题" target="_blank">前端面试题</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种</div>
</li>
<li><a href="/article/1949885827723096064.htm"
title="Python BeautifulSoup 解析网页按钮元素" target="_blank">Python BeautifulSoup 解析网页按钮元素</a>
<span class="text-muted">PythonAI编程架构实战家</span>
<a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/beautifulsoup/1.htm">beautifulsoup</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/ai/1.htm">ai</a>
<div>PythonBeautifulSoup解析网页按钮元素：从基础原理到工程实践的深度解析关键词BeautifulSoup、HTML解析、按钮元素定位、DOM树遍历、CSS选择器、网络爬虫、前端自动化摘要本文系统解析使用PythonBeautifulSoup库定位和提取网页按钮元素的全流程技术方案。从HTML文档的底层结构出发，结合BeautifulSoup的核心解析机制，覆盖从基础概念到高级工程实践</div>
</li>
<li><a href="/article/1949801101146517504.htm"
title="Tailwind CSS 响应式设计实战指南" target="_blank">Tailwind CSS 响应式设计实战指南</a>
<span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C/1.htm">用户体验</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/1.htm">代码优化</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88/1.htm">移动优先</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%B8%83%E5%B1%80/1.htm">网站布局</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Tailwind/1.htm">Tailwind</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a>
<div>title:TailwindCSS响应式设计实战指南date:2024/6/13updated:2024/6/13author:cmdragonexcerpt:这篇文章介绍了如何运用TailwindCSS框架创建响应式网页设计，涵盖博客、电商网站及企业官网的布局实例，包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时，探讨了与JavaScript框架集成、CSS预处理器配合、设计</div>
</li>
<li><a href="/article/1949793538065625088.htm"
title="揭秘前端 CSS3 字体特效的实现方法" target="_blank">揭秘前端 CSS3 字体特效的实现方法</a>
<span class="text-muted"></span>
<div>#揭秘前端CSS3字体特效的实现方法>关键词：CSS3、字体特效、text-shadow、@font-face、font-feature-settings、动画效果、Web字体>摘要：本文通过生活化的比喻和实战案例，深入解析CSS3实现字体特效的核心技术。从基础文字阴影到高级字体动画，揭秘7种酷炫效果实现原理，并提供可直接复用的代码模板。##背景介绍###目的和范围本文系统讲解CSS3实现字体特效</div>
</li>
<li><a href="/article/1949793537402925056.htm"
title="Tailwind CSS与服务器端渲染：SSR项目样式处理" target="_blank">Tailwind CSS与服务器端渲染：SSR项目样式处理</a>
<span class="text-muted">AI实战架构笔记</span>
<a class="tag" taget="_blank" href="/search/AI%E6%9E%B6%E6%9E%84%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">AI架构开发实战</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>TailwindCSS与服务器端渲染：SSR项目样式处理关键词：TailwindCSS、服务器端渲染、SSR、样式处理、性能优化、Next.js、Nuxt.js摘要：本文将深入探讨如何在服务器端渲染(SSR)项目中高效使用TailwindCSS。我们将从基本原理出发，分析Tailwind在SSR环境下的独特挑战，提供完整的解决方案，并通过实际案例展示最佳实践。文章涵盖性能优化策略、常见问题解决以及</div>
</li>
<li><a href="/article/1949784836155699200.htm"
title="现代 CSS 工程化：从 Tailwind 到 CSS-in-JS，再到样式性能优化" target="_blank">现代 CSS 工程化：从 Tailwind 到 CSS-in-JS，再到样式性能优化</a>
<span class="text-muted">rjewh88998</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
<div>一、引言：CSS工程化的演进与现代挑战传统CSS开发的痛点（样式冲突、复用困难、维护成本高、缺乏动态性）什么是CSS工程化？（系统化、规范化、工具化解决CSS开发问题）现代CSS工程化的核心目标（效率提升、样式一致性、可维护性、性能优化）本文核心内容与阅读价值（全面解析主流方案，掌握工程化落地与优化策略）前置知识要求（基础CSS语法、前端框架基础认知）二、原子化CSS方案：TailwindCSS深</div>
</li>
<li><a href="/article/1949680428101201920.htm"
title="html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签" target="_blank">html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签</a>
<span class="text-muted">zhangjunzongque</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA/1.htm">个人</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8/1.htm">常用</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a>
<div>typora-copy-images-to:media第01阶段.web基础：html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签一、前言1.基础班学习目标目标：能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件），用HTML+CSS布局出符合W3C规范的网页（也就是说，我们写的代码，要符合标准）。简单的说，能根据美工给的图，</div>
</li>
<li><a href="/article/1949608571167633408.htm"
title="Vue项目发布后浏览器缓存问题解决" target="_blank">Vue项目发布后浏览器缓存问题解决</a>
<span class="text-muted"></span>
<div>1.现象描述每次Jenkins自动化发布Vue项目后，用户需要手动全部清理历史缓存数据才可以使用系统，用户体验非常不好2.解决方案2.1配置public/index.html配置index.html,在首页启动no-store禁止缓存2.2配置vue.config.js按时间戳打包vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题，当然我们也可以自己重新定义根据时间戳cons</div>
</li>
<li><a href="/article/1949578816791834624.htm"
title="Web字体特效全攻略：从基础到创新设计" target="_blank">Web字体特效全攻略：从基础到创新设计</a>
<span class="text-muted"></span>
<div>本文还有配套的精品资源，点击获取简介：Web字体特效通过结合HTML、CSS和JavaScript，增强网页文本的视觉表现和交互性。文章详细介绍了实现这些特效的技术要点，包括HTML基础结构的设置、CSS样式和新特性的应用，以及JavaScript和相关库的使用。此外，还讲解了字体图标、动画库的利用，以及响应式设计的考虑，确保字体特效在不同设备上的兼容性。提供丰富的实例和资源，旨在帮助开发者打造具</div>
</li>
<li><a href="/article/1949573518538633216.htm"
title="CSS预处理器与后处理器对比解析" target="_blank">CSS预处理器与后处理器对比解析</a>
<span class="text-muted">代码的余温</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>CSS预处理器和后处理器是现代前端开发中用于增强和优化CSS的强大工具，它们解决了原生CSS在大型项目中的维护和兼容性问题，但工作方式和目标不同：CSS预处理器（CSSPreprocessor）定义：CSS预处理器是一种扩展CSS语言的脚本工具。开发者使用预处理器特有的语法（如变量、嵌套、函数等）编写代码，再通过编译器将其转换为标准CSS。核心特性：变量：存储颜色、尺寸等重复值，方便全局修改。$p</div>
</li>
<li><a href="/article/1949570744082034688.htm"
title="CSS3文本阴影特效全攻略" target="_blank">CSS3文本阴影特效全攻略</a>
<span class="text-muted"></span>
<div>CSS3文本阴影效果实现下面我将创建一个展示各种CSS3文本阴影效果的页面，包含多种样式示例和代码实现。设计思路创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果实现代码CSS3文本阴影效果大全*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'OpenSans',sa</div>
</li>
<li><a href="/article/1949557889618210816.htm"
title="css文本超出显示省略号" target="_blank">css文本超出显示省略号</a>
<span class="text-muted"></span>
<div>单行文本溢出.singleline-ellipsis{overflow:hidden;//文本长度超出限定宽度时，则隐藏超出内容white-space:nowrap;//设置文本不换行，在一行显示text-overflow:ellipsis;//当对象内文本溢出时显示省略标记（…）注意：只有在设置了overflow:hidden和white-space:nowrap后text-overflow才能</div>
</li>
<li><a href="/article/1949557890037641216.htm"
title="css 设置 多行超出 显示为 省略号 ，可 多行超出 显示为 省略号" target="_blank">css 设置 多行超出 显示为 省略号 ，可 多行超出 显示为 省略号</a>
<span class="text-muted">大刘鸭</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css%E8%B6%85%E5%87%BA%E6%98%BE%E7%A4%BA%E4%B8%BA%E7%9C%81%E7%95%A5%E5%8F%B7/1.htm">css超出显示为省略号</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E5%AD%97%E8%B6%85%E5%87%BA%E5%A4%9A%E8%A1%8C%E9%9A%90%E8%97%8F%E6%98%BE%E7%A4%BA%E7%9C%81%E7%95%A5%E5%8F%B7/1.htm">文字超出多行隐藏显示省略号</a>
<div>开发过程中我们可能会遇到这样的需求：有一行文本，不足一行，全部显示，超出一行，行尾显示为省略号。可能你会有些扫操作，用JS去动态的判断，尽管效果已经实现，但是看上去搓的一逼，配不上前端这个词。下面给你介绍两种优雅的方式，来实现这个效果。HTML如下：这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，</div>
</li>
<li><a href="/article/1949557132634419200.htm"
title="CSS属性的特性_层叠性" target="_blank">CSS属性的特性_层叠性</a>
<span class="text-muted">51349592</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>CSS中层叠的概念：对于一个元素来说，相同一个属性我们可以通过不同的选择器给它进行多次设置；那么属性会被一层层覆盖上去；但是最终只有一个会生效；那么多个样式属性覆盖上去，哪一个会生效呢？判断一：选择器的权重，权重大的生效，根据权重可以判断出优先级判断二：先后顺序，权重相同时，后面设置的生效；层叠性的影响因素：选择器类型决定基础权重：选择器类型权重示例内联样式1,0,0,0ID选择器0,1,0,0类</div>
</li>
<li><a href="/article/1949557133112569856.htm"
title="CSS元素隐藏方法" target="_blank">CSS元素隐藏方法</a>
<span class="text-muted">51349592</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>CSS提供了多种隐藏元素的方法，但它们在视觉表现、可访问性和布局影响上各不相同。方法一：display:none（完全隐藏）.hide-element{display:none;}特点：元素完全从渲染树中移除，不占据任何文档流空间（类似不存在）无法触发任何事件（点击、键盘交互等）会触发重排（reflow）和重绘（repaint），频繁切换可能影响性能方法二：visibility:hidden（视觉</div>
</li>
<li><a href="/article/77.htm"
title="算法 单链的创建与删除" target="_blank">算法 单链的创建与删除</a>
<span class="text-muted">换个号韩国红果果</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>
先创建结构体
struct student {
int data;
//int tag;//标记这是第几个
struct student *next;
};
// addone 用于将一个数插入已从小到大排好序的链中
struct student *addone(struct student *h,int x){
if(h==NULL) //??????
</div>
</li>
<li><a href="/article/204.htm"
title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a>
<div> 断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。
看完整章内容，</div>
</li>
<li><a href="/article/331.htm"
title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a>
<span class="text-muted">deng520159</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
<div>今天把zeus事务单元测试放出来,让大家指出他的毛病,
1.ZeusTransactionTest.java 单元测试
package com.dengliang.zeus.webdemo.test;
import java.util.ArrayList;
import java.util.List;
import org.junit.Test;
import </div>
</li>
<li><a href="/article/458.htm"
title="Rss 订阅 开发" target="_blank">Rss 订阅 开发</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/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a>
<div>
RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。
RSS</div>
</li>
<li><a href="/article/585.htm"
title="分页查询实现" target="_blank">分页查询实现</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a>
<div>在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。
按实现形式分前台分页和服务器分页：
前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。
服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据</div>
</li>
<li><a href="/article/712.htm"
title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a>
<div>spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： </div>
</li>
<li><a href="/article/839.htm"
title="highCharts柱状图" target="_blank">highCharts柱状图</a>
<span class="text-muted">布衣凌宇</span>
<a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a>
<div>第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller
@Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController { private UserServi</div>
</li>
<li><a href="/article/966.htm"
title="我的spring学习笔记2-IoC（反向控制 依赖注入）" target="_blank">我的spring学习笔记2-IoC（反向控制 依赖注入）</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a>
<div>IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe</div>
</li>
<li><a href="/article/1093.htm"
title="TLS java简单实现" target="_blank">TLS java简单实现</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/keystore/1.htm">keystore</a><a class="tag" taget="_blank" href="/search/tls/1.htm">tls</a><a class="tag" taget="_blank" href="/search/secure/1.htm">secure</a>
<div>
1. SSLServer.java
package ssl;
import java.io.FileInputStream;
import java.io.InputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.security.KeyStore;
import </div>
</li>
<li><a href="/article/1220.htm"
title="Zip解压压缩文件" target="_blank">Zip解压压缩文件</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/Zip%E6%A0%BC%E5%BC%8F%E8%A7%A3%E5%8E%8B/1.htm">Zip格式解压</a><a class="tag" taget="_blank" href="/search/Zip%E6%B5%81%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Zip流的使用</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E8%A7%A3%E5%8E%8B/1.htm">文件解压</a>
<div>
ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件;
ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));
&n</div>
</li>
<li><a href="/article/1347.htm"
title="underscore.js 学习（一）" target="_blank">underscore.js 学习（一）</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/underscore/1.htm">underscore</a>
<div> 工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。 学</div>
</li>
<li><a href="/article/1474.htm"
title="java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)" target="_blank">java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jstatd/1.htm">jstatd</a>
<div>1.介绍
jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。
jstatd是基于RMI的，所以在运行jstatd的服务</div>
</li>
<li><a href="/article/1601.htm"
title="【Spring框架三】Spring常用注解之Transactional" target="_blank">【Spring框架三】Spring常用注解之Transactional</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/transactional/1.htm">transactional</a>
<div>Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：
/*
* Copyright 2002-2010 the original author or authors.
*
* Licensed under the Apache License, Version </div>
</li>
<li><a href="/article/1728.htm"
title="我(程序员)的前进方向" target="_blank">我(程序员)的前进方向</a>
<span class="text-muted">bitray</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....</div>
</li>
<li><a href="/article/1855.htm"
title="nginx lua开发经验总结" target="_blank">nginx lua开发经验总结</a>
<span class="text-muted">ronin47</span>
<div>使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa</div>
</li>
<li><a href="/article/1982.htm"
title="java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶" target="_blank">java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
import java.util.Stack;
public class ReverseStackRecursive {
/**
* Q 66.颠倒栈。
* 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。
* 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。
*1. Pop the top element
*2. Revers</div>
</li>
<li><a href="/article/2109.htm"
title="正确理解Linux内存占用过高的问题" target="_blank">正确理解Linux内存占用过高的问题</a>
<span class="text-muted">cfyme</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上：
Mem: 3889836k total, 3341868k used, 547968k free, 286044k buffers
Swap: 6127608k total,&nb</div>
</li>
<li><a href="/article/2236.htm"
title="[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题" target="_blank">[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a>
<div>
当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。
而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。</div>
</li>
<li><a href="/article/2363.htm"
title="自定义类的equals函数" target="_blank">自定义类的equals函数</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/equals/1.htm">equals</a>
<div>仅作笔记使用
public class VectorQueue {
private final Vector<VectorItem> queue;
private class VectorItem {
private final Object item;
private final int quantity;
public VectorI</div>
</li>
<li><a href="/article/2490.htm"
title="Linux下安装R语言" target="_blank">Linux下安装R语言</a>
<span class="text-muted">datageek</span>
<a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80+linux/1.htm">R语言 linux</a>
<div>命令如下：sudo gedit /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke</div>
</li>
<li><a href="/article/2617.htm"
title="如何修改mysql 并发数(连接数)最大值" target="_blank">如何修改mysql 并发数(连接数)最大值</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了
方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可
方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass</div>
</li>
<li><a href="/article/2744.htm"
title="单一功能原则" target="_blank">单一功能原则</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">面向对象的程序设计</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1/1.htm">软件设计</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%8E%9F%E5%88%99/1.htm">编程原则</a>
<div>单一功能原则[
编辑]
SOLID 原则
单一功能原则
开闭原则
Liskov代换原则
接口隔离原则
依赖反转原则
查
论
编
在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有</div>
</li>
<li><a href="/article/2871.htm"
title="POJO、VO和JavaBean区别和联系" target="_blank">POJO、VO和JavaBean区别和联系</a>
<span class="text-muted">fanmingxing</span>
<a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a>
<div>POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被</div>
</li>
<li><a href="/article/2998.htm"
title="SpringSecurity3.X--LDAP：AD配置" target="_blank">SpringSecurity3.X--LDAP：AD配置</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a>
<div>前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。
将配置文件中的如下部分删除：
<!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
</div>
</li>
<li><a href="/article/3125.htm"
title="mac mysql 修改密码" target="_blank">mac mysql 修改密码</a>
<span class="text-muted">IXHONG</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>$ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-</div>
</li>
<li><a href="/article/3252.htm"
title="设计模式--抽象工厂模式" target="_blank">设计模式--抽象工厂模式</a>
<span class="text-muted">kerryg</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>抽象工厂模式：
工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。
总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，</div>
</li>
<li><a href="/article/3379.htm"
title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a>
<span class="text-muted">nannan408</span>
<div> 首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。
孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军</div>
</li>
<li><a href="/article/3506.htm"
title="scala如何读取和写入文件内容？" target="_blank">scala如何读取和写入文件内容？</a>
<span class="text-muted">qindongliang1922</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>直接看如下代码：
package file
import java.io.RandomAccessFile
import java.nio.charset.Charset
import scala.io.Source
import scala.reflect.io.{File, Path}
/**
* Created by qindongliang on 2015/</div>
</li>
<li><a href="/article/3633.htm"
title="C语言算法之百元买百鸡" target="_blank">C语言算法之百元买百鸡</a>
<span class="text-muted">qiufeihu</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
<div>中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？
代码如下：
#include <stdio.h>
int main()
{
int cock,hen,chick; /*定义变量为基本整型*/
for(coc</div>
</li>
<li><a href="/article/3760.htm"
title="Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode" target="_blank">Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode</a>
<span class="text-muted">wyz2009107220</span>
<a class="tag" taget="_blank" href="/search/NameNode/1.htm">NameNode</a>
<div>正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。
1. Secondary NameNode
原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image
优点：Hadoop较早的版本都自带，</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>