hasLayout&&BlockFormattingContexts_html/css_WEB-ITnose

, , , 
, 
, , , , <fieldset>, <legend><iframe>, <embed>, <object>, <marquee></script></pre> </li>   <li>可触发 hasLayout 的 CSS 特性： <pre class="precsshui">display: inline-block         /*ALL*/height: (除 auto 外任何值)    /*仅适用IE6 7*/width: (除 auto 外任何值)     /*仅适用IE6 7*/float: (left 或 right)       /*ALL*/position: absolute           /*ALL*/writing-mode: tb-rl          /*ALL*/zoom: (除 normal 外任意值)    /*仅适用IE6 7*/</script></pre> </li>   <li>IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ： <pre class="precsshui">min-height: (任意值)/*以下适用IE7+*/min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed</script></pre> </li>   <li>IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。</li>   <h2>2.Block Formatting Contexts（BFC）</h2>   <p>IE有它自己的hasLayout属性，那么非IE浏览器呢？非IE浏览器采用的就是BFC（块格式化上下文）</p>   <li>概念说明： </li>   <li><strong>BFC</strong>是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。</li>   <li>在创建了 BFC的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。</li>   <li>在BFC 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的BFC。</li>   <li>在CSS3中，对这个概念做了改动：http://www.w3.org/TR/css3-box/#block-level0CSS3中，将BFC 叫做 flow root。</li>   <li>触发方式 <pre class="precsshui">float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)</script></pre> </li>   <p>Tips:我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)，这个方法的确简单，但很暴力 ? -#</p>   <h2>3. hasLayout 和 BFC 的特点</h2>   <h3>3.1 在触发 hasLayout 的元素和创建了 BFC的元素中，浮动元素参与高度的计算</h3>   <p><strong>情况1：没有创建 BFC的块级非替换元素，触发了 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div style="width:300px;">    <div id="Container" style="background:silver; zoom:1;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div></script></pre>   <li><strong>Container </strong>没有创建 block formatting context。</li>   <li><strong>Container</strong> 的 ‘zoom:1’设置，是为了触发 IE 中的 <strong>hasLayout</strong>；</li>   <li><strong>Container</strong> 的高度值为 auto，并且 ‘overflow’ 的值为默认的 ‘visible’；</li>   <li><strong>SPAN1</strong> 是一个行内元素， <strong>DIV1</strong> 是一个处于普通流中的块元素；</li>   <li><strong>DIV2</strong> 是一个<strong>浮动</strong>的块级元素。</li>   <p>根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。</p>   <p>所以，在进行 <strong>Container</strong> 高度计算时，只受 <strong>SPAN1</strong> 和 <strong>DIV1</strong> 的影响，应该是它们两个的高度之和，所以最终银色部分不应该包含金色的部分。</p>   <p>这段代码在不同的浏览器环境中表现如下：</p>   <table>     <tr>     IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p>去掉 <strong>Container</strong> 的 ‘zoom:1′ 后，各浏览器表现一致：</p>   <p></p>   <p>可见，IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。</p>   <p><strong>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div style="width:300px;">    <div id="Container" style="background:silver; overflow:hidden;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div></script></pre>   <li><strong>Container</strong> 的 ‘overflow:hidden;’ 创建了BFC；</li>   <li><strong>Container</strong> 的 ‘overflow:hidden;’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout；</li>   <li><strong>Container</strong> 的高度值为 ‘auto’；</li>   <li><strong>SPAN1</strong> 是一个行内元素，<strong>DIV1</strong> 是一个处于普通流中的块元素；</li>   <li><strong>DIV2</strong> 是一个浮动的块级元素。</li>   <p>根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。</p>   <p>所以，在进行 <strong>Container</strong> 高度计算时，<strong>DIV2</strong> 也应该参与计算，所以最终银色部分应该包含金色的部分。</p>   <p>这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )</p>   <table>     <tr>     IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p>可见，只要 <strong>Container</strong> 创建了 BFC，其浮动子元素就会参与其高度计算（IE7(S) 是由于 hasLayout 导致与其他浏览器的效果相同）。</p>   <h3>3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖</h3>   <p><strong>如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可 能会定位到浮动元素的下方。</strong></p>   <p><strong>情况1：没有创建 BFC 的块级非替换元素，触发了 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" zoom:1;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div></script></pre>   <li><strong>DIV1 </strong>是一个浮动元素，背景是 50% 的透明</li>   <li><strong>DIV2</strong> 的 ‘zoom:1′ 触发了 IE 中的 hasLayout。</li>   <p>其中，<strong>grid2a.png</strong> 背景是 100px * 100px 的图片：</p>   <p></p>   <p>根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，DIV2 应该有一部分呢被 DIV1 覆盖。</p>   <p>这段代码在不同的浏览器环境中表现如下：(忽略 IE 中 3px BUG 的影响)</p>   <table>     <tr>     IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p><strong>情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" overflow:hidden;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div></script></pre>   <li><strong>DIV1</strong> 是一个浮动元素，背景是50%的透明</li>   <li><strong>DIV2</strong> 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li>   <p>根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，<strong>DIV2</strong> 应该有一部分被 <strong>DIV1</strong> 覆盖。</p>   <p>这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )</p>   <table>     <tr>     IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p> </p>   <h3>3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠</h3>   <p><strong>情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="zoom:1; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div></script></pre>   <li><strong>Container</strong> 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li>   <li><strong>DIV1</strong> 的宽度没有设置，所以宽度等于 <strong>Container</strong> 的宽度。</li>   <li><strong>DIV1</strong> 的高度也没有设置，所以其高度取决于其内容的高度。</li>   <li><strong>DIV1</strong> 设置了 ‘zoom:1’，在 IE 中触发了 hasLayout。</li>   <p>根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。</p>   <p><strong>DIV1</strong> 和 <strong>DIV2</strong> 应该发生空白边折叠，深灰色的 <strong>DIV1</strong> 应该刚好包含 ‘content’ 文本。</p>   <p>这段代码在不同的浏览器环境中表现如下：</p>   <table>     <tr>     IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p>可见，在 IE 中，触发 hasLayout 的元素，阻止了它自身与子元素间的空白边折叠。</p>   <p><strong>情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。</strong></p>   <p>分析以下代码：</p>   <pre class="precsshui"><div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="overflow:hidden; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div></script></pre>   <li><strong>Container</strong> 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。</li>   <li><strong>DIV1</strong> 的宽度没有设置，所以宽度等于 <strong>Container</strong> 的宽度。</li>   <li><strong>DIV1</strong> 的高度也没有设置，所以其高度取决于其内容的高度。</li>   <li><strong>DIV1</strong> 设置了 ‘overflow:hidden’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。</li>   <p>根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成BFC 的元素不会和在流中的子元素发生空白边折叠。</p>   <p><strong>DIV1</strong> 和 <strong>DIV2</strong> 不应该发生空白边折叠，深灰色的 <strong>DIV1</strong> 应该撑满 <strong>Container</strong> 。</p>   <p>这段代码在不同的浏览器环境中表现如下：( 注意IE7(S) 此时触发了 hasLayout )</p>   <table>     <tr>     IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera    </tr>    <tr>     <td></td>     <td></td>    </tr>    </table>   <p>可见，在 IE 中，创建了 BFC，未触发 hasLayout 的元素，它自身与子元素间的空白边折叠还是会发生。</p>   <h2>hasLayout 和 BFC 的异同及可能产生的问题</h2>   <li>区别 </li>   <li>在 IE8(S) 之前的版本中，没有规范中提及的 block formatting context 和 Inline formatting context 概念，而是用 hasLayout 来达到相似的目的。</li>   <li>在 IE 中可通过设置 ‘width’、’height’、’min-width’、’min-height’、’max-width’、’max-height’、 ‘zoom’、’writing-mode’ 来触发 hasLayout，而这些特性值的设置不能够使元素创建 BFC。</li>   <li>在 IE 中很多元素默认就是拥有布局的，如 IPUNT, BUTTON, SELECT, TEXTAREA 等，但是这些元素在标准中会形成 Inline formatting context （本博客后面会介绍）。</li>   <li>共同点 </li>   <li>两者都是决定了对内容如何定位及大小计算的规则。</li>   <li>两者都决定了与其他元素的相互作用的规则。</li>   <li>‘table-cell’ 和 ‘table-caption’ 既是 hasLayout 的元素，又是可以创建 BFC 的元素。</li>   <li>浮动元素，绝对定位元素，inline-block 元素以及除 ‘visible’ 外任意值的 overflow(IE7) 在 IE 中可以触发 hasLayout，同时在标准中，又可以创建BFC。</li>   <li>可能产生的兼容性问题: </li>   <li>由于 hasLayout 和 BFC是对一类事物的不同理解，并且他们的启用条件不尽相同，因此如果一个元素设计时，在 IE 早期版本中触发了 hasLayout ，但在其他浏览器中又没有创建BFC，或者相反，一个元素在 IE 早期版本中没有触发 hasLayout ，在其他浏览器中却创建了 BFC（如设置了 ‘overflow:hidden’ ），将导致页面布局的重大差异。</li>   <h2>解决方案</h2>   <p>仅当一个元素即在 IE 早期版本中触发了 hasLayout，又在其他浏览器中创建了BFC时，才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容，或者相反，两者皆不启用。</p>   <ol>    <li>使元素即生成了BFC，又触发了 hasLayout</li>    <li>对于触发 hasLayout 的元素，通过 CSS 设置，使它产生BFC；</li>    <li>生成 BFC但是没有触发 hasLayout 的元素，通过设置 ‘zoom:1’，使其触发 hasLayout。</li>    <li>使元素即没有触发 hasLayout，又没有创建 BFC。</li>   </ol>   <p>本文部分内容完全来源于W3Help(武利剑)  ，本文参考的一些其他资料来源:</p>   <p>http://www.w3.org/TR/CSS21/visuren.html#block-formatting</p>   <p>http://reference.sitepoint.com/css/haslayout</p>   <p>http://blog.csdn.net/pengju_guo/article/details/6945436</p>   <p>http://www.qianduan.net/comprehensive-haslayout.html                    </div>

                  

	 	
                    <div class="">
                        <ul class="m-news-opt fix">
                            <li class="opt-item">
                                <a href='/htmldaima-270535.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">css奇特用法之IMG添加背景图片配合显示效果惊艳_html/css_WEB-ITnose</p></a>
                            </li>
                            <li class="opt-item ta-r">
                                 <a href='/htmldaima-270537.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">CSS3动画效果_html/css_WEB-ITnose</p></a>
                            </li>
                        </ul>
                    </div>
                    
                    
                    
                    
                </div>
              
                    </div>
                
                  

                    <div class="g-title fix">
                        <h2 class="title-txt">人气教程排行</h2>
                    </div>
                    <div class="m-rank u-dashed mb40">
			
                        <ul>
						
 <li class="rank-item">
                                <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num top">1</span>
                                   如何生成一个调查问卷_html/css_WEB-ITnose                                </a>
                            </li>							  								  														  <li class="rank-item">
                                <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num second">2</span>
                                   在页面直接显示日历_html/css_WEB-ITnose                                </a>
                            </li>								  														  								  <li class="rank-item">
                                <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num third">3</span>
                                   如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作                                </a>
                            </li>														  								  							<li class="rank-item">
                                <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">4</span>
                                   关于列表标记的详细介绍                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">5</span>
                                   cssborder-bottom（指定下边线的样式、宽度及颜色）                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">6</span>
                                   html新闻详情页_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">7</span>
                                   为何页面内容和网页边缘有空隙_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">228次</span>
                                    <span class="g-sort-num ">8</span>
                                   position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">227次</span>
                                    <span class="g-sort-num ">9</span>
                                   htmlp标签怎么换行？htmlp标签添加br换行标签的应用                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">10</span>
                                   HTML的<!DOCTYPE>标签                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">11</span>
                                   html页面中友情链接怎么进行添加设置？（代码示例）                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">12</span>
                                   form表单中属性及功能应用介绍汇总                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">13</span>
                                   详解form标签中的method属性                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">14</span>
                                   HTML5Canvas逼真烟雾效果js插件                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">15</span>
                                   页面跳转特效_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">16</span>
                                   改变鼠标选中区域的样式。_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">17</span>
                                   关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">18</span>
                                   CSS3悬浮动画效果_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">19</span>
                                   纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">20</span>
                                   body在默认情况下是具有margin外边距的_html/css_WEB-ITnose                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- / 教程内容页 -->
        </div>
    </div>
  
<!-- 页尾 -->
<div class="footer">
   本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>
<!-- / 页尾 -->

 <script type="text/javascript" src="/kan/js/read.js"></script>

<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
 <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div>  -->


<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password"  value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
                <label class="ui-label"> </label>
                <label for="agreement" class="ui-label-checkbox">
                <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
                <input type="hidden" name="notforward" id="notforward" value="1">
                <input  type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>                           
       <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
  <p class="int-btn"><a rel="nofollow" id="loginbt"  class="loginbtn"><span>登录</span></a></p> 
  </form>
</div>
<form id="regform" action="/user-center-reg.html" method="post">
<div  class="login-reg" style="display: none;" id="con_login_2">
<input type="hidden" name="t" id="t"/>
  <p class="int-text">
    <input  id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
    <p class="int-text">
    <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
  <p class="int-text">
  <input  type="password" id="pwd" name="password" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p>
  <p class="int-text1"><span class="inputbox">
    <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
    </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张"  id="indexlogin"></p>
  <p class="int-info">
    <label>
      <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox">
      我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
  </p>
  <p class="int-btn"><input type="hidden" name="dosubmit"/>
<a rel="nofollow" class="loginbtn"  id="register"><span>注册</span></a></p>
</div>
 </form>
</div>
</div>

</div>















</div>
 
<script type="text/javascript" src="/kan/js/foot_js.js"></script>   
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
 <script type="text/javascript" src="/layui/layui.js"></script>
    <script>
    layui.use('code', function() {
        layui.code({
            elem: 'pre', //默认值为.layui-code
            about: false,
            skin: 'notepad',
            title: 'php怎么实现数据库验证跳转代码块',
            encode: true //是否转义html标签。默认不开启
        });
    });
    </script>

</body>

</html>