深入理解CSS溢出overflow-小火柴的蓝色理想

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了深入理解CSS溢出overflow-小火柴的蓝色理想，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6456字，纯文字阅读大概需要10分钟。

内容图文

前面的话

　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况

定义

overflow溢出

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

　　[注意]除了IE7-浏览器外，其他浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

overflow-X | overflow-y

　　overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性，后来被CSS3采用，并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中一个值显式设置为visible或未设置默认为visible，而另外一个值是非visible的值。则visible值会被重置为auto

　　值: visible | hidden | scroll | auto | inherit | no-display | no-content

　　初始值: visible

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

属性

visible

　　元素的内容在元素框之外也可见

　　[注意1]IE6-浏览器中元素的包含块会延伸，使得可以包裹其超出的内容

.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}
.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}

<div class="box">
    <div class="in"></div>
</div>

　　左图为IE6-浏览器，右图为其他浏览器

　　[注意2]IE7-浏览器的按钮(包括和两种)存在bug，当按钮上的文字越多时，按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题

　　左图为默认情况，右图为设置overflow后的情况

auto

　　如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容

　　[注意]对于一般浏览器来说，和默认带有overflow:auto的属性。但IE7-浏览器则不同，默认存在纵向滚动条</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #800000;">//IE7-浏览器 html</span>{<span style="color: #ff0000;">overflow-y</span>:<span style="color: #0000ff;"> scroll</span>;}<span style="color: #800000;"> //其他浏览器 html</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> auto</span>;}<span style="color: #800000;"> //去除页面默认滚动条 html</span>{<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;}</script></pre> </div> <p><strong>scroll</strong></p> <p>　　元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容</p> <p>　　[注意]firefox和IE8+浏览器在overflow:scroll或auto时，存在padding-bottom缺失现象</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #800000;">.box</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">scroll</span>; }<span style="color: #800000;"> .in</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> lightgreen</span>; }</script></pre> </div> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="in"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></script></pre> </div> <p>　　左图为chrome浏览器的情况，右图为firefox浏览器的情况</p> <table border="0"> <tbody> <tr> <td><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/740839-20160317234110834-1405480704.jpg" alt="" /></td> <td><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/740839-20160317234118521-2013570361.jpg" alt="" /></td> </tr> </tbody> </table> <p><strong style="line-height: 1.5;">hidden</strong></p> <p>　　元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见</p> <p><strong>no-display</strong></p> <p>　　当内容溢出容器时不显示元素，类似于元素添加了display:none属性一样</p> <p><strong>no-content</strong></p> <p>　　当内容溢出窗口时不显示内容，类似于元素添加了visibility: hidden属性一样</p> <p>　　[注意]no-display和no-content这两个属性目前没有浏览器支持</p> <p> </p> <h3 id="anchor3">失效</h3> <p><span class="Apple-tab-span"> 　　绝对定位元素不总是被父级overflow属性剪裁，尤其是当overflow在绝对定位元素及其包含块之间的时候</span></p> <p><span class="Apple-tab-span"><span class="Apple-tab-span"> 　　　　[注意]由于固定定位是相对于视窗定位的，所以固定定位元素无法被其所有的父级元素overflow属性剪裁</span></span> </p> <p><iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/ggqxnrl4" frameborder="0" width="320" height="240"></iframe></p> <p>【解决办法】</p> <p>【1】overflow元素自身为包含块</p> <p>　　给父级设置position:absolute或fixed或relative</p> <p><iframe style="width: 100%; height: 260px;" src="http://sandbox.runjs.cn/show/wlndlyuh" frameborder="0" width="320" height="240"></iframe></p> <p>【2】overflow元素的子元素为包含块</p> <p>　　在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="overflow:hidden;"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="position:relative"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="position:absolute"</span><span style="color: #0000ff;">></span>绝对定位元素<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></script></pre> </div> <p> </p> <h3 id="anchor4">应用</h3> <p>　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用。关于BFC的详细信息移步至此</p> <p>【1】清除浮动影响</p> <p><iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/au010jbz" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]IE6-浏览器使用overflow这种方式并不能清除浮动，常用的消除浮动的方法是</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #800000;">.clear</span>{<span style="color: #ff0000;"> *zoom</span>:<span style="color: #0000ff;"> 1</span>; }<span style="color: #800000;"> .clear:after</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }</script></pre> </div> <p> </p> <p>【2】避免margin穿透</p> <p><iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/8eqzbwqx" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]使用overflow属性只是避免margin穿透的很多方法中的一个，其他的方法还有BFC化、设置padding、设置border等 </p> <p> </p> <p>【3】两栏自适应布局</p> <p><iframe style="width: 100%; height: 230px;" src="http://sandbox.runjs.cn/show/q7u2vxgh" frameborder="0" width="320" height="240"></iframe></p> <p>　　[注意]使用overflow属性的场景限制比较明显，常用的两栏自适应布局的方法:</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #800000;">.cell</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> table-cell</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2000px</span>;<span style="color: #ff0000;"> *display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> *width</span>:<span style="color: #0000ff;">auto</span>; }</script></pre> </div> <p> </p> <p>【4】选项卡</p> <p><span class="Apple-tab-span"> 　　overflow选项卡主要用于单页应用</span></p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show-in"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="one"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show-in"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="two"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show-in"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="three"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show-in"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="four"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">nav </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con-in"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#one"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con-in"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#two"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con-in"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#three"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con-in"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#four"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> </script></pre> </div> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #800000;">body</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;"> center</span>; }<span style="color: #800000;"> ul</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;"> a</span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> inherit</span>; }<span style="color: #800000;"> .show</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid black</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 40px</span>; }<span style="color: #800000;"> .show-in</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100px</span>; }<span style="color: #800000;"> #one</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> lightgreen</span>; }<span style="color: #800000;"> #two</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> lightyellow</span>; }<span style="color: #800000;"> #three</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> lightblue</span>; }<span style="color: #800000;"> #four</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> pink</span>; }<span style="color: #800000;"> .con</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 10px 0 0 10px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>; }<span style="color: #800000;"> .con-in</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 16px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid black</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> gray</span>; }</script></pre> </div> <p><iframe style="width: 100%; height: 200px;" src="http://sandbox.runjs.cn/show/9w3vdrhw" frameborder="0" width="320" height="240"></iframe></p> <script type="text/javascript">// <![CDATA[ var all = document.getElementById('cnblogs_post_body').children; var select = []; for(var i = 1; i < all.length; i++){ if(all[i].getAttribute('id')){ if(all[i].getAttribute('id').match(/anchor\d/)){ select.push(all[i]); } } } var wheel = function(e){ e = e || event; var data; if(e.wheelDelta){ data = e.wheelDelta; }else{ data = -e.detail * 40; } for(var i = 0; i < select.length; i++){ if(select[i].getBoundingClientRect().top > 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } } } document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false); var oCon = document.getElementById("content"); var close = oCon.getElementsByTagName('span')[0]; close.onclick = function(){ if(this.innerHTML == '显示目录'){ this.innerHTML = '×'; this.style.background = ''; oCon.style.border = '2px solid #ccc'; oCon.style.width = ''; oCon.style.height = ''; oCon.style.overflow = ''; oCon.style.lineHeight = '30px'; }else{ this.innerHTML = '显示目录'; this.style.background = '#3399ff'; oCon.style.border = 'none'; oCon.style.width = '60px'; oCon.style.height = '30px'; oCon.style.overflow = 'hidden'; oCon.style.lineHeight = ''; } } for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = '#3399ff'; } oCon.children[i].onmouseout = function(){ this.style.color = 'inherit'; if(this.mark){ this.style.color = '#3399ff'; } } oCon.children[i].onclick = function(){ change(this); } } function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = 'inherit'; oCon.children[i].style.textDecoration = 'none'; oCon.children[i].style.borderColor = 'transparent'; } _this.mark = true; _this.style.color = '#3399ff'; _this.style.textDecoration = 'underline'; _this.style.borderColor = '#2175bc'; } // ]]></ script></div><div id="MySignature"></div> <div class="clear"></div><a href="http://www.laitingfm.com" /></a> <a href="https://curl.qcloud.com/kfoLTs9R" /></a> </article> </div> <div class="w310 r"> <a href="https://www.gxlcms.com/server-467421.html" target="_blank"> <img src="http://www.gxlcms.com/Public/aiod/ts.jpg" /></a> <div class="book"> <a href="http://www.gxlcms.com/special/html/" target="_blank" title="html代码教程/参考手册"> <img src="https://img.gxlcms.com/" alt="html代码教程/参考手册" /> <h3>html代码教程/参考手册</h3> </a> </div> <div class="youclmt"> <h3>html代码热搜</h3> </div> <div class="langmubt"> <ul> <li><a href="/htmldaima-351469.html" target="_blank">disabled不可输入的值无法传递到action层</a></li><li><a href="/htmldaima-351465.html" target="_blank">html标签中的this使用介绍</a></li><li><a href="/htmldaima-351462.html" target="_blank">html设置加粗、倾斜、下划线、删除线等字体效果</a></li><li><a href="/htmldaima-351442.html" target="_blank">html页面嵌套使用示例(frameset使用方法)</a></li><li><a href="/htmldaima-351441.html" target="_blank">html悬浮框架的设置使用示例(iframe加载html)</a></li><li><a href="/htmldaima-351438.html" target="_blank">html无序列表标签和有序列表标签使用示例</a></li><li><a href="/htmldaima-351432.html" target="_blank">通过CSS实现的html背景色渐变</a></li><li><a href="/htmldaima-351431.html" target="_blank">多个div中table的tdwidth设置一样也不法对齐</a></li><li><a href="/htmldaima-351430.html" target="_blank">html中table为每个单元格设置不同颜色和宽度</a></li><li><a href="/htmldaima-351429.html" target="_blank">html标准写法与dreamweaver自动生成的不一样</a></li><li><a href="/htmldaima-351424.html" target="_blank">将html标签在浏览器居中显示的css样式</a></li><li><a href="/htmldaima-351421.html" target="_blank">hr水平线样式示例代码</a></li><li><a href="/htmldaima-351415.html" target="_blank">html中#includefile的用法示例介绍</a></li><li><a href="/htmldaima-351414.html" target="_blank">通过css控制HTML文本框中的文字垂直居中</a></li><li><a href="/htmldaima-351411.html" target="_blank">使用iframe在网页中嵌入其他网页的方法</a></li><li><a href="/htmldaima-351410.html" target="_blank">html文件中flash视频格式(flv、swf)文件的嵌入方法</a></li><li><a href="/htmldaima-351409.html" target="_blank">a链接刷新页面与js刷新页面用法示例介绍</a></li><li><a href="/htmldaima-351408.html" target="_blank">Form提交表单页面刷新不跳转</a></li><li><a href="/htmldaima-351404.html" target="_blank">html中使用margin:0auto整个页面不居中的解决方法</a></li><li><a href="/htmldaima-351402.html" target="_blank">input中id和name属性的区别示例介绍</a></li><li><a href="/htmldaima-351399.html" target="_blank">iframe子页面操作父页面并实现屏蔽页面弹出层效果</a></li><li><a href="/htmldaima-351392.html" target="_blank">如何在textarea文本输入区内实现换行</a></li><li><a href="/htmldaima-351389.html" target="_blank">html表单属性readonly和disabled的使用方法</a></li><li><a href="/htmldaima-351380.html" target="_blank">IE网页弹出窗口的常用参数整理可自行设定</a></li><li><a href="/htmldaima-351364.html" target="_blank">htmldoctype作用介绍</a></li> </ul> </div> <a href="https://curl.qcloud.com/I8w1gZa8" target="_blank"> <img src="http://www.gxlcms.com/ad/tx500x500.jpg" /></a> </div> </div> </div> </div> <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: '深入理解CSS溢出overflow-小火柴的蓝色理想代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <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="/?s=user-center-qqlogin.html"> QQ </a></div> --> <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/?s=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="/?s=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="/?s=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="/?s=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="/?s=user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/?s=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> <div id="footer"> <div class="w1200"> <p class="tips_text">本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！ <a href="/?s=gb-show-p-1.html" title="合作方式" target="_blank">合作方式</a></p> <p class="tips_text">Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?afb4873a3fbaa95f710a04306bfb4a0b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备19030742号</a></p> </div> </div> <link rel="stylesheet" href="/Public/del/css/list.css"> </body> </html>

内容总结

以上是互联网集市为您收集整理的深入理解CSS溢出overflow-小火柴的蓝色理想全部内容，希望文章能够帮你解决深入理解CSS溢出overflow-小火柴的蓝色理想所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端