本篇文章給大家分享的是有關(guān)什么是css中overflow屬性，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)波密免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一：overflow基本屬性

overflow基本屬性有：visibel ， hidden， scroll，auto， inherit， overflow-x和overflow-y

overflow-x和overflow-y設(shè)置一樣的值，等同于overflow。如果不同，其中一個賦予visibel，auto，另一個賦值visibel，auto ，hidden。則會被重置為auto。

作用的前提

1.非display：inline水平！

2.對應(yīng)方位的尺寸限制，width/height/max-width/max-height/absolute拉伸

overflow：visibel妙用

IE7瀏覽器下，文字越多，按鈕兩側(cè)padding留白就越大。給所有按鈕添加css樣式 overflow：visible

二：overflow與滾動條

滾動條出現(xiàn)的條件

1.overflow：auto/overflow:scroll 有些元素自帶滾動條 </p><p><strong>body/html與滾動條</strong></p><p>無論什么瀏覽器，默認(rèn)滾動條均來自html!而不是body標(biāo)簽</p><pre>ie8+ html{overflow:auto}</pre><p>所以，如果我們想要去除頁面默認(rèn)滾動條，只需要：</p><pre>html{overflow:hidden}</pre><p>body/html與滾動條-js與滾動高度</p><p>兼容寫法</p><pre> var st = document.body.scrollTop || document.documentElement.scrollTop overflow的padding-bottom缺失現(xiàn)象 .box{width:400px;height:100px;padding:100px 0; overfow:auto;}</pre><p>在chrome瀏覽器下bottom是可以滾動出來的。</p><p><strong>滾動條的寬度</strong></p><p>盒子寬度（帶滾動條）-盒子內(nèi)寬度 = 滾動條寬度</p><p>IE firefox chrome均是17像素。</p><p><strong>水平居中跳動問題</strong></p><pre>修復(fù)方法 1.html{overflow-y:scroll;} 2. .container{padding-left:calc(100vw-100%);}</pre><p>100vw - 瀏覽器寬度；100%-可用內(nèi)容寬度</p><p><strong> 自定義滾動條-webkit</strong></p><pre> 整體部分 ::-webkit-scrollbar 兩端按鈕 ::-webkit-scrollbar-button 外層軌道 ::-webkit-scrollbar-track 內(nèi)層軌道 ::-webkit-scrollbar-track-piece 滾動滑塊 ::-webkit-scrollbar-thumb 邊角 ::-webkit-scrollbar-corner 實際常用 ::-webkit-scrollbar{//寬度 width:8px; height:8px; } ::-webkit-scrollbar-thumb{//拖動條 background-color:rgba(0,0,0,.3); border-radius : 6px; } ::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }</pre><p>自定義滾動條-IE</p><p>可以使用自定義滾動插件</p><p>IOS原生滾動回調(diào)效果</p><pre>-webkit-overflow-scrolling:touch;</pre><p><strong>三：overflow與BFC</strong></p><p>清除浮動，自適應(yīng)布局等。</p><p>BFC block formatting context 塊級格式化上下文</p><p>頁面之結(jié)界，內(nèi)部元素在怎么折騰都影響不到外面。</p><p><strong>overflow與BFC</strong></p><p>1.清除浮動影響</p><p>2.避免margin穿透問題</p><p>3.兩欄自適應(yīng)布局</p><p>內(nèi)部浮動無影響</p><pre>.clearfix{*zoom:1;} .clearfix:after{centent:'';display:table;clear:both;}</pre><p>避免margin穿透問題</p><p>設(shè)置overflow:scroll，， overflow:auto， overflow:hidden</p><p><strong>為什么有這樣特性？</strong></p><p>流體特性下自適應(yīng)布局</p><p>1.左浮動，右普通</p><pre>.left{float:left;width:128px;} .right{min-height:190px;background-color:#beceeb}</pre><p>2.左浮動，右margin</p><pre>.left{float:left;width:128px;} .right{min-height:190px;margin-left:150px;background-color:#beceeb}</pre><p>3.左浮動，右padding</p><pre>.left{float:left;width:128px;} .right{min-height:190px;padding-left:150px;background-color:#beceeb}</pre><p>4.左浮動</p><pre>.left{float:left;width:128px;} .right{min-height:190px;overflow:hidden;background-color:#beceeb}</pre><p>給div設(shè)置了overflow屬性就是將元素BFC化，使用padding做流體自適應(yīng)布局時候，萬萬不可讓自適應(yīng)層BFC化。</p><p>是不是所有BFC屬性都有如此表現(xiàn)</p><p>yes.由于自身特性，具體表現(xiàn)不一</p><pre> overflow:hidden; 自適應(yīng)，單溢出不可見 限制應(yīng)用場景 float + float 包裹性+破壞性 無法自適應(yīng)，塊狀浮動布局 position:absolute 脫離文檔流，自娛自樂 display:inline-block 包裹性，無法自適應(yīng) display:table-cell 包裹性，但天生無溢出特性，絕對寬度也能自適應(yīng)。 只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化</pre><p>兩欄自適應(yīng)布局</p><pre> .cell{ display:table-cell; width:2000px; //2000保證比父元素大 *display:inline-block;*width:auto; //IE7-偽BFC特性 }</pre><p><strong>四：overflow與絕對定位</strong></p><p>隱藏失效與滾動固定</p><p><strong> overflow:hidden失效</strong></p><pre>.overflow-hidden{ width:300px; height:200px; border:5px solid #333; overflow:auto } img{postion:absolute;}</pre><p>失效原因<br/>    絕對定位元素不總被父級overflow屬性剪裁，尤其當(dāng)overflow在絕對定位元素及其包含塊之間的時候<br/>    包含塊指 “含position:relative/absolute/fixed”聲明的父級元素，沒有則body元素</p><p>如何避免失效<br/>    1.overflow元素自身成為包含塊<br/>    2.overflow元素的子元素成為包含塊<br/>  3.任意合法transform聲明當(dāng)作包含塊</p><p>overflow失效妙用</p><pre>h0{height:0;} .ovh{overflow:hidden;} .tr{text-align:right;} .abs{position:absolute;} <div id="squ6kqw" class="h0 ovh tr">  <img src="" class="abs ml10 mt30"></img> </div></pre><p><strong>五：依賴overflow的樣式表現(xiàn)</strong></p><p><strong>  resize拉伸</strong></p><p>css3有個屬性名為resize，可以拉伸元素尺寸。</p><p>.resize:both     水平垂直兩邊拉；</p><p>.resize:horizontal 只有水平方向拉伸</p><p>resize:vertical   只有垂直方向拉伸</p><p>但是，此聲明想要其作用，元素的overflow屬性值不能是visible！</p><pre><button style="resize:both;overflow:hidden">按鈕</button></pre><p>這樣一個按鈕就可以實現(xiàn)拉伸效果了。</p><p>文本域自帶resize屬性，因為文本域默認(rèn)overflow：auto</p><p>文本域resize拖拽漁區(qū)大小是17*17像素。 也就是滾動條的尺寸</p><p>ellipsis文字溢出點點點省略</p><pre>text-overflow:ellipsis <button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden"> 這是一個按鈕，寬度僅200像素 </button></pre><p><strong>六：overflow與錨點技術(shù)</strong></p><p><strong> 錨點定位的本質(zhì)：該變?nèi)萜鞯臐L動高度</strong></p><p>錨點對位的觸發(fā)<br/>    1.url地址中的錨鏈與錨點元素；<br/>    2.可focus的錨點元素處于focus態(tài)；</p><p>錨點定位的作用<br/>    1.快速定位<br/>    2.錨點定位與overflow選項卡技術(shù)</p><p>應(yīng)用場景：單頁應(yīng)用</p><p>以上就是css關(guān)于 overflow屬性的一些小技巧， overflow屬性介紹的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！</p><p>以上就是什么是css中overflow屬性，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p> <br> 網(wǎng)站題目：什么是css中overflow屬性 <br> 網(wǎng)站地址：<a href="http://weahome.cn/article/iheijp.html">http://weahome.cn/article/iheijp.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/pjojsg.html">jquery中this指的是什么意思</a> </li><li> <a href="/article/pjopce.html">C++利用LuaIntf調(diào)用Lua的方法示例</a> </li><li> <a href="/article/pjojio.html">如何使用HTML5的drawImage()方法繪制圖像</a> </li><li> <a href="/article/pjopcd.html">Mysql之事務(wù)提交和隔離級別</a> </li><li> <a href="/article/pjopdd.html">springboot全局異常處理方法匯總</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">成都企業(yè)網(wǎng)站制作</a><a target="_blank">溫江網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作公司</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作公司</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">網(wǎng)站備案</a><a target="_blank">工商服務(wù)</a><a target="_blank">鏈接買賣</a><a target="_blank">網(wǎng)站收錄</a><a target="_blank">免費做網(wǎng)站</a><a target="_blank">互聯(lián)網(wǎng)信息經(jīng)營許可證</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">營銷型網(wǎng)站建設(shè)</a><a target="_blank">德陽網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站建設(shè)</a><a target="_blank">網(wǎng)站建設(shè)報價方案</a><a target="_blank">手機(jī)網(wǎng)站建設(shè)公司</a><a target="_blank">成都門戶網(wǎng)站建設(shè)設(shè)計方案</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">雅安服務(wù)器托管</a><a target="_blank">成都托管服務(wù)器</a><a target="_blank">重慶移動機(jī)房托管</a><a target="_blank">重慶電信五里店機(jī)房托管</a><a target="_blank">服務(wù)器機(jī)柜租賃</a><a target="_blank">眉山服務(wù)器托管</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國免費咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號錦天國際A幢1002號</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號</a></div> <!--<div id="squ6kqw" class="fr"><a target="_blank">成都網(wǎng)站建設(shè)</a>：<a target="_blank">創(chuàng)新互聯(lián)</a></div>--> </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計制作</a> <a target="_blank">重慶網(wǎng)頁設(shè)計</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="2uukt" class="pl_css_ganrao" style="display: none;"><legend id="2uukt"><meter id="2uukt"><blockquote id="2uukt"><center id="2uukt"></center></blockquote></meter></legend><code id="2uukt"><pre id="2uukt"></pre></code><pre id="2uukt"></pre><fieldset id="2uukt"><acronym id="2uukt"><td id="2uukt"><samp id="2uukt"></samp></td></acronym></fieldset><bdo id="2uukt"><strong id="2uukt"><acronym id="2uukt"></acronym></strong></bdo><strong id="2uukt"><style id="2uukt"><thead id="2uukt"><blockquote id="2uukt"></blockquote></thead></style></strong><blockquote id="2uukt"></blockquote><strike id="2uukt"></strike><video id="2uukt"><abbr id="2uukt"></abbr></video><track id="2uukt"></track><address id="2uukt"><button id="2uukt"><small id="2uukt"></small></button></address><dl id="2uukt"><wbr id="2uukt"><big id="2uukt"><center id="2uukt"></center></big></wbr></dl><table id="2uukt"><sup id="2uukt"><bdo id="2uukt"><tr id="2uukt"></tr></bdo></sup></table><th id="2uukt"></th><form id="2uukt"></form><big id="2uukt"><tr id="2uukt"></tr></big><small id="2uukt"></small><em id="2uukt"></em><samp id="2uukt"></samp><kbd id="2uukt"><track id="2uukt"></track></kbd><big id="2uukt"></big><cite id="2uukt"></cite><code id="2uukt"><sup id="2uukt"><p id="2uukt"><tfoot id="2uukt"></tfoot></p></sup></code><i id="2uukt"><nav id="2uukt"><cite id="2uukt"><ol id="2uukt"></ol></cite></nav></i><form id="2uukt"></form><th id="2uukt"></th><small id="2uukt"><nav id="2uukt"><dl id="2uukt"><dd id="2uukt"></dd></dl></nav></small><dfn id="2uukt"></dfn><tbody id="2uukt"><ul id="2uukt"><button id="2uukt"></button></ul></tbody><form id="2uukt"></form><track id="2uukt"></track><big id="2uukt"><center id="2uukt"><tr id="2uukt"></tr></center></big><xmp id="2uukt"></xmp><small id="2uukt"><strong id="2uukt"></strong></small><code id="2uukt"><pre id="2uukt"><wbr id="2uukt"></wbr></pre></code><font id="2uukt"><dfn id="2uukt"><form id="2uukt"><table id="2uukt"></table></form></dfn></font><dl id="2uukt"><dd id="2uukt"></dd></dl><strong id="2uukt"><div id="2uukt"></div></strong><track id="2uukt"></track><label id="2uukt"><code id="2uukt"></code></label><dfn id="2uukt"><small id="2uukt"><var id="2uukt"></var></small></dfn><acronym id="2uukt"><sub id="2uukt"></sub></acronym><center id="2uukt"><delect id="2uukt"><xmp id="2uukt"><sup id="2uukt"></sup></xmp></delect></center><th id="2uukt"></th><fieldset id="2uukt"></fieldset><legend id="2uukt"><strike id="2uukt"></strike></legend><form id="2uukt"><meter id="2uukt"></meter></form><object id="2uukt"><nav id="2uukt"><dl id="2uukt"><input id="2uukt"></input></dl></nav></object><center id="2uukt"></center><optgroup id="2uukt"></optgroup><input id="2uukt"><thead id="2uukt"></thead></input><style id="2uukt"><thead id="2uukt"><progress id="2uukt"><xmp id="2uukt"></xmp></progress></thead></style><listing id="2uukt"><strong id="2uukt"></strong></listing><pre id="2uukt"></pre><th id="2uukt"><samp id="2uukt"><small id="2uukt"></small></samp></th><code id="2uukt"></code><pre id="2uukt"></pre><listing id="2uukt"></listing><td id="2uukt"></td><noscript id="2uukt"><noframes id="2uukt"><menu id="2uukt"></menu></noframes></noscript><noframes id="2uukt"></noframes><big id="2uukt"></big><object id="2uukt"><span id="2uukt"><font id="2uukt"></font></span></object><sup id="2uukt"><samp id="2uukt"><ins id="2uukt"></ins></samp></sup><div id="2uukt"><b id="2uukt"></b></div><bdo id="2uukt"><label id="2uukt"><s id="2uukt"></s></label></bdo><source id="2uukt"></source><meter id="2uukt"><blockquote id="2uukt"></blockquote></meter><track id="2uukt"><nav id="2uukt"><dl id="2uukt"></dl></nav></track><meter id="2uukt"></meter><ins id="2uukt"></ins><strong id="2uukt"><listing id="2uukt"><menu id="2uukt"><form id="2uukt"></form></menu></listing></strong><div id="2uukt"></div><big id="2uukt"></big><nobr id="2uukt"></nobr><th id="2uukt"></th><code id="2uukt"></code><thead id="2uukt"><mark id="2uukt"><abbr id="2uukt"></abbr></mark></thead><ins id="2uukt"><delect id="2uukt"></delect></ins><sub id="2uukt"><form id="2uukt"><acronym id="2uukt"><div id="2uukt"></div></acronym></form></sub><ins id="2uukt"></ins><p id="2uukt"></p><legend id="2uukt"></legend><del id="2uukt"></del><thead id="2uukt"><pre id="2uukt"></pre></thead><source id="2uukt"></source><strong id="2uukt"></strong><progress id="2uukt"></progress><ol id="2uukt"></ol><output id="2uukt"><small id="2uukt"><strong id="2uukt"></strong></small></output><nobr id="2uukt"><video id="2uukt"><dfn id="2uukt"><div id="2uukt"></div></dfn></video></nobr><delect id="2uukt"><sup id="2uukt"><option id="2uukt"></option></sup></delect><meter id="2uukt"></meter><dl id="2uukt"></dl><samp id="2uukt"></samp><label id="2uukt"><code id="2uukt"></code></label><ul id="2uukt"><menu id="2uukt"></menu></ul><noframes id="2uukt"></noframes><button id="2uukt"><tr id="2uukt"></tr></button><sup id="2uukt"></sup></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>