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/1829526035885027328.htm"
title="Web前端" target="_blank">Web前端</a>
<span class="text-muted">2301_78085386</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>网页开发学习内容:htmlcssJavaScript两个框架:VUE.jsElementUIUI->userinterface用户界面html(HyperTextMarkupLanguage):超文本标记语言文本:文字字符超文本:网页内容标记:标签标识例如商品上的标签,介绍了商品的信息html语言就是一种标记语言,提供许多的标签,不同的标签功能不同,网页就是通过这些标签描述出来的,最终通过浏览器解</div>
</li>
<li><a href="/article/1829407037809848320.htm"
title="vue中printjs使用指南" target="_blank">vue中printjs使用指南</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/1.htm">vue</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>使用攻略参考文档https://printjs.crabbly.com/分页使用css的page-break-after:always来控制在某个DIV之后新开一个页面我是封面我是目录，你不知道我的内容有多长我是正文，我需要从一个新页面开始展示标题栏每页重复打印因为打印时，表格中的thead和tfoot默认会在每一页重复打印，所以只要设置好表格结构就行。html打印{{modelRef.hospi</div>
</li>
<li><a href="/article/1829402245695893504.htm"
title="《CSS 揭秘》每章详细读书笔记" target="_blank">《CSS 揭秘》每章详细读书笔记</a>
<span class="text-muted">lawler61</span>
<a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%88%9B/1.htm">原创</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css%E6%8F%AD%E7%A7%98/1.htm">css揭秘</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a>
<div>《CSS揭秘》每章详细读书笔记[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eS4SupjZ-1589817256003)(https://raw.githubusercontent.com/lawler61/blog/master/css/css-jiemi-notes/images/logo.jpg)]一、个人站点www.freeze61.me可直接复制html</div>
</li>
<li><a href="/article/1829401615891787776.htm"
title="CSS基础 水平垂直居中" target="_blank">CSS基础 水平垂直居中</a>
<span class="text-muted">呼叫6945</span>
<a class="tag" taget="_blank" href="/search/CSS%E7%AF%87/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/css3/1.htm">css3</a>
<div>几种实现水平垂直居中方式利用定位+margin:auto利用定位+margin:负值利用定位+transformtable布局flex布局grid布局利用定位+margin:auto先上代码：.father{width:500px;height:300px;border:1pxsolid#0a3b98;position:relative;}.son{width:100px;height:40px;</div>
</li>
<li><a href="/article/1829399727557406720.htm"
title="《CSS 揭秘》案例dome" target="_blank">《CSS 揭秘》案例dome</a>
<span class="text-muted">kingrome2009</span>
<a class="tag" taget="_blank" href="/search/css3%E5%8A%A8%E7%94%BB/1.htm">css3动画</a><a class="tag" taget="_blank" href="/search/css%E6%8F%AD%E7%A7%98/1.htm">css揭秘</a>
<div>本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。史上最全的实例建议不要买书因为电子版的更适合我们下载链接css揭秘pdfdomeDocument*{margin:0;padding:0;}body{backgr</div>
</li>
<li><a href="/article/1829395691915538432.htm"
title="CSS 知识点及使用案例" target="_blank">CSS 知识点及使用案例</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/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/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/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><a class="tag" taget="_blank" href="/search/%E6%94%B9%E8%A1%8C%E5%AD%A6it/1.htm">改行学it</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A%E5%88%9B%E6%96%B0/1.htm">创业创新</a>
<div>1.CSS三种引入方式1.1行内样式直接在HTML元素上通过style属性定义样式。这是行内样式。1.2内部样式表在HTML文档的部分使用标签定义样式。p{color:blue;font-size:18px;}这是内部样式。1.3外部样式表通过标签在HTML文档的部分链接外部CSS文件。1.3外部样式表通过标签在HTML文档的部分链接外部CSS文件。styles.css文件内容：p{color:g</div>
</li>
<li><a href="/article/1829380320340832256.htm"
title="react 样式和vue样式的区别" target="_blank">react 样式和vue样式的区别</a>
<span class="text-muted">资深前端之路</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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>
<div>区别一：react：一个页面通常分为2个组件，js或者jsx+css文件。vue:通常分为.vue+css文件区别二：react在写页面样式时，最好其余的样式最好包裹在当前样式下面，不然容易生成全局样式，对其它页面的样式造成影响。vue在页面内使用scoped,使样式只在当前页面内生效。同时还有deep、global来对样式进行向上向下优化。deep可以对当前页面组件内的样式调整；global可以</div>
</li>
<li><a href="/article/1829374074032320512.htm"
title="第 004 期 提高页面渲染速度的 3 个 CSS 技巧" target="_blank">第 004 期 提高页面渲染速度的 3 个 CSS 技巧</a>
<span class="text-muted">前端GoGoGo7</span>
<div>提到提高页面渲染速度，我们第一想到的是优化JavaScript。其实通过优化CSS也能提高页面渲染速度。优化方案1.延时渲染屏幕外的内容-content-visibility:auto很长的页面会有大量的内容在屏幕外。如果只渲染屏幕内的内容，屏幕外的内容在出现时才渲染，能大大的节约渲染时间。CSSContainmentModuleLevel2模块新增了content-visibility属性。这个</div>
</li>
<li><a href="/article/1829364426218762240.htm"
title="safari中filter: drop-shadow()导致图片展示不出来" target="_blank">safari中filter: drop-shadow()导致图片展示不出来</a>
<span class="text-muted">史努比的大头</span>
<a class="tag" taget="_blank" href="/search/safari/1.htm">safari</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>有时候我们可能需要通过css来改变一个svg图片的颜色，比如让其跟随主题色改变.send-button{overflow:hidden;.send-button-img{filter:drop-shadow(@primary-24px0px0px);transform:translateX(24px);}}上面代码的原理是：drop-shadow(@primary-24px0px0px):这行代码</div>
</li>
<li><a href="/article/1829316782754721792.htm"
title="密码访问单页自定义跳转页面源码" target="_blank">密码访问单页自定义跳转页面源码</a>
<span class="text-muted">CSDN专家-微编程</span>
<a class="tag" taget="_blank" href="/search/HTML%E9%A1%B9%E7%9B%AE/1.htm">HTML项目</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/ecmascript/1.htm">ecmascript</a>
<div>源码介绍密码访问单页自定义跳转页面源码，密码访问单页自定义跳转页面，修改了的密码访问单页，添加了js自定义密码跳转页面。需要正确输入密码才能跳转目标网址。源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面源码截图源码下载密码访问单页自定义跳转页面源码</div>
</li>
<li><a href="/article/1829243801135312896.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>
<div>htmlDocumentcssbody{display:flex;justify-content:center;height:100vh;align-items:center;transform-style:preserve-3d;}.olympic-rings{width:800px;height:400px;display:flex;flex-wrap:wrap;justify-content</div>
</li>
<li><a href="/article/1829217197642313728.htm"
title="前端 css基础" target="_blank">前端 css基础</a>
<span class="text-muted">湫風如兮</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>1.什么是css是一组样式设置的规则，用于控制页面的外观样式2.为什么使用css1.实现内容与样式的分离，便于团队开发2.样式复用，便于网站的后期维护3.页面的精确控制，让页面更精美3.css作用1.页面外观美化2.布局和定位4.css应用方式也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式4.1.内部样式在title标签下面建一个style标签写css代码优点：在同一个页面内部便于</div>
</li>
<li><a href="/article/1829164129882042368.htm"
title="使用css3实现【水波纹扩散效果】" target="_blank">使用css3实现【水波纹扩散效果】</a>
<span class="text-muted">自不量力的A同学</span>
<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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>使用css3实现【水波纹扩散效果】在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。下面是一个基础的示例：Html.container{position:relative;overflow:hidden;}.wave-effect{position:absolute;top:0;left:0;width:100%;height:</div>
</li>
<li><a href="/article/1829162236048928768.htm"
title="使用css实现水球效果" target="_blank">使用css实现水球效果</a>
<span class="text-muted">——jinqiang12345</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a>
<div>通过在制定overflow：hidden的元素上添加非常大圆形，而且圆形设置圆角，并不断滚动，数量多了就可以显示出水波效果@keyframesroll{form{transform:rotate(0deg);}to{transform:rotate(360deg);}}.shuiqiu{width:200px;height:200px;border-radius:50%;border:5pxsol</div>
</li>
<li><a href="/article/1829159208726130688.htm"
title="css特效之水滴效果" target="_blank">css特效之水滴效果</a>
<span class="text-muted">Zhu Xiaopi</span>
<a class="tag" taget="_blank" href="/search/css%E7%89%B9%E6%95%88%E9%9B%86%E5%90%88/1.htm">css特效集合</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>css特效之水滴效果想看看效果：html代码：<divclass="</div>
</li>
<li><a href="/article/1829158703807426560.htm"
title="vue3+ts+canvas项目中图片进行矩形批注" target="_blank">vue3+ts+canvas项目中图片进行矩形批注</a>
<span class="text-muted">嘴巴嘟嘟</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</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><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>canvas是什么？一个html5支持的新标签，见名知意，canvas就是画板的意思，可以在canvas上画画。css画三角形很简单，但是要画五角星呢，不妨试试canvas（文档有教学）今天我们做的是在图片中画矩形，顾名思义就是模仿批注功能。看效果：废话不多说直接上代码删除import{ref,reactive,onMounted}from"vue";constflag=ref(false);co</div>
</li>
<li><a href="/article/1829156938852691968.htm"
title="CSS 的使用方式，CSS的基本结构" target="_blank">CSS 的使用方式，CSS的基本结构</a>
<span class="text-muted">x星默y</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%9D%97%E5%9F%BA%E7%9F%B3/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/css/1.htm">css</a>
<div>CSS的使用方式CSS用于描述元素外观，即元素是什么模样也称为元素样式它该怎么用呢?解答之前先来思考几个问题内容是什么?有意义的存在CSS不是吗?进一步来说，CSS不就是内容吗?对于内容该怎么做?使用元素来装载我使用CSS是在做什么?描述元素的外观进一步讲，不就是相关的信息吗?对于相关的信息该怎么做?使用元素的属性来存储另外，这件事说明了什么?有着明确的目标那该怎么做？单独成文因此，使用CSS的方</div>
</li>
<li><a href="/article/1829149876190015488.htm"
title="CSS实现水滴效果图" target="_blank">CSS实现水滴效果图</a>
<span class="text-muted">N201871643</span>
<a class="tag" taget="_blank" href="/search/%E7%83%AD%E9%97%A8%E7%9B%B8%E5%85%B3%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/1.htm">热门相关技术分享</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>
<div>CSS实现水滴效果图目录一、引言二、定义三、常用属性四、事件五、实操步骤一、引言水滴效果是一种常见的动画效果，常用于网页设计中。通过使用CSS技术，我们可以实现这种效果，为网页增添生动和吸引力。本文将详细介绍如何使用CSS实现水滴效果，并提供相关技术分析。二、定义水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（CascadingStyleShee</div>
</li>
<li><a href="/article/1829144365700837376.htm"
title="微信小程序iconfont图标字体解决方案" target="_blank">微信小程序iconfont图标字体解决方案</a>
<span class="text-muted">kikiki4</span>
<div>此文演示如何在小程序上使用iconfont字体图标。使用说明登录阿里巴巴iconfont.cnimage.png新建项目image.png点击icon收藏image.png加入到test项目中image.png下载到本地解压image.png生成代码image.png复制iconfont.css到xxx.wxssimage.png替换iconfont.css中的@font-face为上面的生成代码</div>
</li>
<li><a href="/article/1829117219393597440.htm"
title="编程小白如何成为大神？大学新生的最佳入门大神级攻略" target="_blank">编程小白如何成为大神？大学新生的最佳入门大神级攻略</a>
<span class="text-muted">一禅（OneZen）</span>
<a class="tag" taget="_blank" href="/search/%E9%9A%8F%E7%AC%94/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/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>编程语言选择1.选择一种编程语言入门：Python：Python是初学者的绝佳选择。它语法简单、易读易写、用途广泛，广泛应用于数据科学、机器学习、Web开发、自动化测试等领域。JavaScript：对于对Web开发感兴趣的学生，JavaScript是必学的。它在前端开发中占据主导地位，并且与HTML和CSS结合使用，构建动态网页。Java：Java是一种面向对象的编程语言，广泛应用于企业级应用和A</div>
</li>
<li><a href="/article/1829097560552337408.htm"
title="Qt 爬取网页信息" target="_blank">Qt 爬取网页信息</a>
<span class="text-muted">Qt历险记</span>
<a class="tag" taget="_blank" href="/search/Qt/1.htm">Qt</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%BA%A7%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88/1.htm">高级开发工程师</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>QuestionQt爬取网页信息Answer学习如何使用Qt爬取网页信息的学习路线可以分为以下几个阶段：1.基础知识准备C++编程基础：Qt主要使用C++，因此需要有扎实的C++编程基础。网络编程基础：了解HTTP协议、TCP/IP等网络基础知识。HTML/CSS/JavaScript基础：了解网页的基本结构和内容。2.学习Qt框架Qt基础：学习Qt的基本概念，如信号与槽、事件处理、界面布局等。Q</div>
</li>
<li><a href="/article/1829037300223406080.htm"
title="CSS3基本语法" target="_blank">CSS3基本语法</a>
<span class="text-muted">刘心奶黄包qaq</span>
<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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>文章目录一、CSS引入方式二、选择器1、标签选择器2、类选择器3、id选择器4、通配符选择器三、字体操作1、字体大小2、字体粗细3、字体样式（是否倾斜）4、字体修改常见字体系列修改字体系列语法四、文本操作1、文本缩进2、文本水平对齐方式3、文本修饰4、文本水平居中总结**text-align：center;**5、文本水平居中方法margin五、行高font连写六、颜色常见取值七、选择器进阶1、后</div>
</li>
<li><a href="/article/1829017762605920256.htm"
title="vue el-form中label使用类似小程序text标签 space的功能" target="_blank">vue el-form中label使用类似小程序text标签 space的功能</a>
<span class="text-muted">qq_42463588</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在Vue中，没有直接类似于微信小程序中标签的space属性，该属性用于控制文本节点之间的空格处理方式。然而，Vue和Web开发中，文本节点之间的空格处理通常是通过HTML和CSS来控制的，而不是像小程序那样通过组件属性来控制。在HTML中，连续的空格字符通常会被浏览器合并为一个空格字符显示。这意味着，如果你直接在Vue模板中写入多个空格，它们可能不会在渲染的HTML中按原样显示。解决方案使用CSS</div>
</li>
<li><a href="/article/1829013227116261376.htm"
title="Nginx负载均衡中静态与动态内容分离策略与实践" target="_blank">Nginx负载均衡中静态与动态内容分离策略与实践</a>
<span class="text-muted">夜色呦</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>在构建高性能的Web应用时，合理分离静态和动态内容是提升用户体验和服务器效率的关键策略。Nginx，作为一种强大的Web服务器和反向代理，提供了灵活的配置选项来实现这种分离。本文将详细探讨如何在Nginx中实现负载均衡时对静态和动态内容进行有效分离，以及如何通过这种分离提高整体的系统性能。1.静态与动态内容的基本概念静态内容指的是那些不经常变化的资源，如图片、CSS文件、JavaScript文件等</div>
</li>
<li><a href="/article/1829012848999755776.htm"
title="【前端基础篇】JavaScript之jQuery介绍" target="_blank">【前端基础篇】JavaScript之jQuery介绍</a>
<span class="text-muted">Trouvaille ~</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a><a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9%E5%99%A8/1.htm">选择器</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>文章目录前言JQuery基本介绍和使用方法引入依赖jQuery语法jQuery选择器jQuery事件操作元素获取/设置元素内容获取/设置元素属性获取/返回css属性添加元素删除元素总结：常用的jQuery方法-详细解释与示例事件处理拓展-详细解释与示例其他拓展内容前言在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔JQuery基本介绍和使用方法W3C标准给我们提供了⼀系列</div>
</li>
<li><a href="/article/1829012470497374208.htm"
title="HTML静态网页成品作业(HTML+CSS)——世博园介绍(2个页面)" target="_blank">HTML静态网页成品作业(HTML+CSS)——世博园介绍(2个页面)</a>
<span class="text-muted">爱码网页成品</span>
<a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</a><a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">静态网页</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E7%94%9F%E7%BD%91%E9%A1%B5/1.htm">学生网页</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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>
<div>不定期分享源码，关注不丢失哦文章目录一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码五、源码获取一、作品介绍️本套采用HTML+CSS，未使用Javacsript代码，共有2个页面。二、作品演示三、代码目录四、网站代码HTML部分代码世博园景区简介各馆介绍景区简介上海世博园是2010年上海世博会的举办场地。2010年上海世博会是首次由中国举办，是世界博览会史上最大规模。总投资超过北</div>
</li>
<li><a href="/article/1828997599043088384.htm"
title="CSS中的align-content属性：实现垂直居中的新方式" target="_blank">CSS中的align-content属性：实现垂直居中的新方式</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言在CSS的漫长发展历程中，垂直居中一直是一个令人头疼的问题。不过，好消息是，到了2024年，CSS终于引入了一种新的方式来实现垂直居中，那就是使用align-content属性。本文将详细介绍align-content的使用方式，并对比之前常见的垂直居中方法，帮助你更好地理解和应用这一新特性。align-content属性简介在CSS中，align-content属性原本主要用在Flexbox</div>
</li>
<li><a href="/article/1828992304581537792.htm"
title="使用css3的动画属性@keyframes创建小说轮播图" target="_blank">使用css3的动画属性@keyframes创建小说轮播图</a>
<span class="text-muted">Wiktok</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A8%A1%E6%9D%BF%E5%88%B6%E4%BD%9C/1.htm">前端模板制作</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a>
<div>最近一直在琢磨做一个小说网站模板，在寻找灵感时发现一个很好的小说展示效果-小说三维轮播，如下图所示：这种小说轮播展示方法不仅美观而且节省页面空间，那么他到底怎么实现的呢？由于本人是一个小白，所以去网上查了一下，但是很遗憾，没找到相关方法。通过页面元素检查，发现他应该使用的是css的媒体属性@media并结合js的相关功能，应该挺复杂的，那么我们能不能用一种相对简单的方法实现它呢？答案是有。通过cs</div>
</li>
<li><a href="/article/1828988899330977792.htm"
title="要隐藏滚动条，您可以使用CSS中的overflow属性。" target="_blank">要隐藏滚动条，您可以使用CSS中的overflow属性。</a>
<span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/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>
<div>要隐藏滚动条，您可以使用CSS中的overflow属性。在您的样式文件中添加以下代码：cssCopycode.main-wrapper{overflow:hidden;}.header-menu-container{overflow-y:hidden;}这段CSS代码会将.main-wrapper元素和.header-menu-container元素的滚动条隐藏起来。确保将这段样式代码添加到您的V</div>
</li>
<li><a href="/article/1828981718246322176.htm"
title="java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档" target="_blank">java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档</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/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8</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>