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"></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>点此阅读：http://segmentfault.com/a/119...。</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>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1176884233700978688"></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/93.htm"
title="java工厂模式" target="_blank">java工厂模式</a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%B7%A5%E5%8E%82/1.htm">抽象工厂</a>
<div>工厂模式有
1、工厂方法
2、抽象工厂方法。
下面我的实现是抽象工厂方法,
给所有具体的产品类定一个通用的接口。
package 工厂模式;
/**
* 航天飞行接口
*
* @Description
* @author FuJianyong
* 2015-7-14下午02:42:05
*/
public interface SpaceF</div>
</li>
<li><a href="/article/220.htm"
title="nginx频率限制+python测试" target="_blank">nginx频率限制+python测试</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E9%A2%91%E7%8E%87+python/1.htm">nginx 频率 python</a>
<div>
部分内容参考：http://www.abc3210.com/2013/web_04/82.shtml
首先说一下遇到这个问题是因为网站被攻击，阿里云报警，想到要限制一下访问频率，而不是限制ip（限制ip的方案稍后给出）。nginx连接资源被吃空返回状态码是502，添加本方案限制后返回599，与正常状态码区别开。步骤如下：</div>
</li>
<li><a href="/article/347.htm"
title="java线程和线程池的使用" target="_blank">java线程和线程池的使用</a>
<span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a>
<div>java线程和线程池
一、创建多线程的方式
java多线程很常见，如何使用多线程，如何创建线程，java中有两种方式，第一种是让自己的类实现Runnable接口，第二种是让自己的类继承Thread类。其实Thread类自己也是实现了Runnable接口。具体使用实例如下：
1、通过实现Runnable接口方式 1 2 </div>
</li>
<li><a href="/article/474.htm"
title="Linux" target="_blank">Linux</a>
<span class="text-muted">171815164</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>ubuntu kernel
http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.1.2-unstable/
安卓sdk代理
mirrors.neusoft.edu.cn 80
输入法和jdk
sudo apt-get install fcitx
su</div>
</li>
<li><a href="/article/601.htm"
title="Tomcat JDBC Connection Pool" target="_blank">Tomcat JDBC Connection Pool</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/Connection/1.htm">Connection</a>
<div> Tomcat7 抛弃了以往的DBCP 采用了新的Tomcat Jdbc Pool 作为数据库连接组件，事实上DBCP已经被Hibernate 所抛弃，因为他存在很多问题，诸如：更新缓慢，bug较多，编译问题，代码复杂等等。
Tomcat Jdbc P</div>
</li>
<li><a href="/article/728.htm"
title="敲代码的一点想法" target="_blank">敲代码的一点想法</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/%E9%9A%8F%E7%AC%94/1.htm">随笔</a><a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%83%B3/1.htm">感想</a>
<div> 入门学习java编程已经半年了,一路敲代码下来,现在也才1w+行代码量,也就菜鸟水准吧,但是在整个学习过程中,我一直在想,为什么很多培训老师,网上的文章都是要我们背一些代码?比如学习Arraylist的时候,教师就让我们先参考源代码写一遍,然</div>
</li>
<li><a href="/article/855.htm"
title="jvm指令集" target="_blank">jvm指令集</a>
<span class="text-muted">程序员是怎么炼成的</span>
<a class="tag" taget="_blank" href="/search/jvm+%E6%8C%87%E4%BB%A4%E9%9B%86/1.htm">jvm 指令集</a>
<div>转自：http://blog.csdn.net/hudashi/article/details/7062675#comments
将值推送至栈顶时 const ldc push load指令
const系列
该系列命令主要负责把简单的数值类型送到栈顶。(从常量池或者局部变量push到栈顶时均使用)
0x02 &nbs</div>
</li>
<li><a href="/article/982.htm"
title="Oracle字符集的查看查询和Oracle字符集的设置修改" target="_blank">Oracle字符集的查看查询和Oracle字符集的设置修改</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div> 本文主要讨论以下几个部分：如何查看查询oracle字符集、 修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题。
一、什么是Oracle字符集
Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储，处理，检索数据。它使数据库工具，错误消息，排序次序，日期，时间，货</div>
</li>
<li><a href="/article/1109.htm"
title="png在Ie6下透明度处理方法" target="_blank">png在Ie6下透明度处理方法</a>
<span class="text-muted">antonyup_2006</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/Firebug/1.htm">Firebug</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a>
<div>由于之前到深圳现场支撑上线，当时为了解决个控件下载，我机器上的IE8老报个错，不得以把ie8卸载掉，换个Ie6,问题解决了，今天出差回来，用ie6登入另一个正在开发的系统，遇到了Png图片的问题，当然升级到ie8(ie8自带的开发人员工具调试前端页面JS之类的还是比较方便的，和FireBug一样，呵呵)，这个问题就解决了，但稍微做了下这个问题的处理。
我们知道PNG是图像文件存储格式，查询资</div>
</li>
<li><a href="/article/1236.htm"
title="表查询常用命令高级查询方法(二)" target="_blank">表查询常用命令高级查询方法(二)</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84%E6%9F%A5%E8%AF%A2/1.htm">分组查询</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E5%90%88%E6%9F%A5%E8%AF%A2/1.htm">联合查询</a>
<div>----------------------------------------------------分组查询 group by having --平均工资和最高工资 select avg(sal)平均工资,max(sal) from emp ; --每个部门的平均工资和最高工资</div>
</li>
<li><a href="/article/1363.htm"
title="uploadify3.1版本参数使用详解" target="_blank">uploadify3.1版本参数使用详解</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/uploadify3.1/1.htm">uploadify3.1</a>
<div>使用：
绑定的界面元素<input id='gallery'type='file'/>$("#gallery").uploadify({设置参数，参数如下});
设置的属性：
id: jQuery(this).attr('id'),//绑定的input的ID
langFile: 'http://ww</div>
</li>
<li><a href="/article/1490.htm"
title="精通Oracle10编程SQL(17)使用ORACLE系统包" target="_blank">精通Oracle10编程SQL(17)使用ORACLE系统包</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>/*
*使用ORACLE系统包
*/
--1.DBMS_OUTPUT
--ENABLE:用于激活过程PUT,PUT_LINE,NEW_LINE,GET_LINE和GET_LINES的调用
--语法：DBMS_OUTPUT.enable(buffer_size in integer default 20000);
--DISABLE:用于禁止对过程PUT,PUT_LINE,NEW</div>
</li>
<li><a href="/article/1617.htm"
title="【JVM一】JVM垃圾回收日志" target="_blank">【JVM一】JVM垃圾回收日志</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a>
<div>将JVM垃圾回收的日志记录下来，对于分析垃圾回收的运行状态，进而调整内存分配(年轻代，老年代，永久代的内存分配)等是很有意义的。JVM与垃圾回收日志相关的参数包括：
-XX:+PrintGC
-XX:+PrintGCDetails
-XX:+PrintGCTimeStamps
-XX:+PrintGCDateStamps
-Xloggc
-XX:+PrintGC
通</div>
</li>
<li><a href="/article/1744.htm"
title="Toast使用" target="_blank">Toast使用</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/toast/1.htm">toast</a>
<div>Android中的Toast是一种简易的消息提示框，toast提示框不能被用户点击，toast会根据用户设置的显示时间后自动消失。
创建Toast
两个方法创建Toast
makeText(Context context, int resId, int duration)
参数：context是toast显示在</div>
</li>
<li><a href="/article/1871.htm"
title="angular.identity" target="_blank">angular.identity</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>
<div>angular.identiy 描述: 返回它第一参数的函数. 此函数多用于函数是编程. 使用方法: angular.identity(value); 参数详解: Param Type Details value
*
to be returned. 返回值: 传入的value 实例代码:
<!DOCTYPE HTML>
</div>
</li>
<li><a href="/article/1998.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.List;
public class CircleDigitsInDivision {
/**
* 题目：求循环节，若整除则返回NULL，否则返回char*指向循环节。先写思路。函数原型：char*get_circle_digits(unsigned k,unsigned j)
</div>
</li>
<li><a href="/article/2125.htm"
title="Java 日期 周 年" target="_blank">Java 日期 周 年</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/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a>
<div>
/**
* java日期操作(月末、周末等的日期操作)
*
* @author
*
*/
public class DateUtil {
/** */
/**
* 取得某天相加(减)後的那一天
*
* @param date
* @param num
* </div>
</li>
<li><a href="/article/2252.htm"
title="[高考与专业]欢迎广大高中毕业生加入自动控制与计算机应用专业" target="_blank">[高考与专业]欢迎广大高中毕业生加入自动控制与计算机应用专业</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a>
<div>
不知道现在的高校还设置这个宽口径专业没有,自动控制与计算机应用专业,我就是这个专业毕业的,这个专业的课程非常多,既要学习自动控制方面的课程,也要学习计算机专业的课程,对数学也要求比较高.....如果有这个专业,欢迎大家报考...毕业出来之后,就业的途径非常广.....
以后</div>
</li>
<li><a href="/article/2379.htm"
title="分层查询（Hierarchical Queries）" target="_blank">分层查询（Hierarchical Queries）</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92%E6%9F%A5%E8%AF%A2/1.htm">递归查询</a><a class="tag" taget="_blank" href="/search/%E5%B1%82%E6%AC%A1%E6%9F%A5%E8%AF%A2/1.htm">层次查询</a>
<div>Hierarchical Queries
If a table contains hierarchical data, then you can select rows in a hierarchical order using the hierarchical query clause:
hierarchical_query_clause::=
start with condi</div>
</li>
<li><a href="/article/2506.htm"
title="数据迁移" target="_blank">数据迁移</a>
<span class="text-muted">daysinsun</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E8%BF%81%E7%A7%BB/1.htm">数据迁移</a>
<div>最近公司在重构一个医疗系统，原来的系统是两个.Net系统，现需要重构到java中。数据库分别为SQL Server和Mysql，现需要将数据库统一为Hana数据库，发现了几个问题，但最后通过努力都解决了。
1、原本通过Hana的数据迁移工具把数据是可以迁移过去的，在MySQl里面的字段为TEXT类型的到Hana里面就存储不了了，最后不得不更改为clob。
2、在数据插入的时候有些字段特别长</div>
</li>
<li><a href="/article/2633.htm"
title="C语言学习二进制的表示示例" target="_blank">C语言学习二进制的表示示例</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/basic/1.htm">basic</a>
<div>进制的表示示例
# include <stdio.h>
int main(void)
{
int i = 0x32C;
printf("i = %d\n", i);
/*
printf的用法
%d表示以十进制输出
%x或%X表示以十六进制的输出
%o表示以八进制输出
*/
return 0;
}
</div>
</li>
<li><a href="/article/2760.htm"
title="NsTimer 和 UITableViewCell 之间的控制" target="_blank">NsTimer 和 UITableViewCell 之间的控制</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
<div>情况是这样的:
一个UITableView, 每个Cell的内容是我自定义的 viewA viewA上面有很多的动画, 我需要添加NSTimer来做动画, 由于TableView的复用机制, 我添加的动画会不断开启, 没有停止, 动画会执行越来越多.
解决办法:
在配置cell的时候开始动画, 然后在cell结束显示的时候停止动画
查找cell结束显示的代理</div>
</li>
<li><a href="/article/2887.htm"
title="MySql中case when then 的使用" target="_blank">MySql中case when then 的使用</a>
<span class="text-muted">fanxiaolong</span>
<a class="tag" taget="_blank" href="/search/casewhenthenend/1.htm">casewhenthenend</a>
<div>select "主键", "项目编号", "项目名称","项目创建时间", "项目状态","部门名称","创建人"
union
(select
pp.id as "主键",
pp.project_number as &</div>
</li>
<li><a href="/article/3014.htm"
title="Ehcache（01）——简介、基本操作" target="_blank">Ehcache（01）——简介、基本操作</a>
<span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%AE%80%E4%BB%8B/1.htm">简介</a><a class="tag" taget="_blank" href="/search/CacheManager/1.htm">CacheManager</a><a class="tag" taget="_blank" href="/search/crud/1.htm">crud</a>
<div>Ehcache简介
目录
1 CacheManager
1.1 构造方法构建
1.2 静态方法构建
2 Cache
2.1&</div>
</li>
<li><a href="/article/3141.htm"
title="最容易懂的javascript闭包学习入门" target="_blank">最容易懂的javascript闭包学习入门</a>
<span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。
下面就是我的学习笔记，对于Javascript初学者应该是很有用的。
一、变量的作用域
要理解闭包，首先必须理解Javascript特殊</div>
</li>
<li><a href="/article/3268.htm"
title="提升网站转化率的四步优化方案" target="_blank">提升网站转化率的四步优化方案</a>
<span class="text-muted">php教程分享</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a>
<div>网站开发完成后,我们在进行网站优化最关键的问题就是如何提高整体的转化率，这也是营销策略里最最重要的方面之一，并且也是网站综合运营实例的结果。文中分享了四大优化策略：调查、研究、优化、评估，这四大策略可以很好地帮助用户设计出高效的优化方案。
PHP开发的网站优化一个网站最关键和棘手的是，如何提高整体的转化率，这是任何营销策略里最重要的方面之一，而提升网站转化率是网站综合运营实力的结果。今天，我就分</div>
</li>
<li><a href="/article/3395.htm"
title="web开发里什么是HTML5的WebSocket？" target="_blank">web开发里什么是HTML5的WebSocket？</a>
<span class="text-muted">naruto1990</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a>
<div>当前火起来的HTML5语言里面，很多学者们都还没有完全了解这语言的效果情况，我最喜欢的Web开发技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看6个HTML5教程介绍里 的 WebSocket API：它可用于客户端、服</div>
</li>
<li><a href="/article/3522.htm"
title="Socket初步编程——简单实现群聊" target="_blank">Socket初步编程——简单实现群聊</a>
<span class="text-muted">Everyday都不同</span>
<a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/1.htm">网络编程</a><a class="tag" taget="_blank" href="/search/%E5%88%9D%E6%AD%A5%E8%AE%A4%E8%AF%86/1.htm">初步认识</a>
<div>初次接触到socket网络编程，也参考了网络上众前辈的文章。尝试自己也写了一下，记录下过程吧：
服务端：（接收客户端消息并把它们打印出来）
public class SocketServer {
private List<Socket> socketList = new ArrayList<Socket>();
public s</div>
</li>
<li><a href="/article/3649.htm"
title="面试：Hashtable与HashMap的区别（结合线程）" target="_blank">面试：Hashtable与HashMap的区别（结合线程）</a>
<span class="text-muted">toknowme</span>
<div>昨天去了某钱公司面试，面试过程中被问道
Hashtable与HashMap的区别？当时就是回答了一点，Hashtable是线程安全的，HashMap是线程不安全的，说白了，就是Hashtable是的同步的，HashMap不是同步的，需要额外的处理一下。
今天就动手写了一个例子，直接看代码吧
package com.learn.lesson001;
import java</div>
</li>
<li><a href="/article/3776.htm"
title="MVC设计模式的总结" target="_blank">MVC设计模式的总结</a>
<span class="text-muted">xp9802</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a>
<div>随着Web应用的商业逻辑包含逐渐复杂的公式分析计算、决策支持等，使客户机越
来越不堪重负，因此将系统的商业分离出来。单独形成一部分，这样三层结构产生了。
其中‘层’是逻辑上的划分。
三层体系结构是将整个系统划分为如图2.1所示的结构[3]
（1）表现层（Presentation layer）：包含表示代码、用户交互GUI、数据验证。
该层用于向客户端用户提供GUI交互，它允许用户</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>