這篇文章給大家分享的是有關(guān)css中overflow屬性的使用技巧有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、岑鞏網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為岑鞏等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

一：overflow基本屬性

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

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

作用的前提

1.非display：inline水平！

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

overflow：visibel妙用

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

二：overflow與滾動(dòng)條

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

1.overflow：auto/overflow:scroll有些元素自帶滾動(dòng)條</p><p>body/html與滾動(dòng)條</p><p>無(wú)論什么瀏覽器，默認(rèn)滾動(dòng)條均來(lái)自html!而不是body標(biāo)簽</p><p>ie8+html{overflow:auto}</p><p>所以，如果我們想要去除頁(yè)面默認(rèn)滾動(dòng)條，只需要：</p><p>html{overflow:hidden}</p><p>body/html與滾動(dòng)條-js與滾動(dòng)高度</p><p>兼容寫(xiě)法</p><p>varst=document.body.scrollTop||document.documentElement.scrollTop</p><p>overflow的padding-bottom缺失現(xiàn)象</p><p>.box{width:400px;height:100px;padding:100px0;overfow:auto;}</p><p>在chrome瀏覽器下bottom是可以滾動(dòng)出來(lái)的。</p><p>滾動(dòng)條的寬度</p><p>盒子寬度（帶滾動(dòng)條）-盒子內(nèi)寬度=滾動(dòng)條寬度</p><p>IEfirefoxchrome均是17像素。</p><p>水平居中跳動(dòng)問(wèn)題</p><p>修復(fù)方法</p><p>1.html{overflow-y:scroll;}</p><p>2..container{padding-left:calc(100vw-100%);}</p><p>100vw-瀏覽器寬度；100%-可用內(nèi)容寬度</p><p>自定義滾動(dòng)條-webkit</p><p>整體部分::-webkit-scrollbar</p><p>兩端按鈕::-webkit-scrollbar-button</p><p>外層軌道::-webkit-scrollbar-track</p><p>內(nèi)層軌道::-webkit-scrollbar-track-piece</p><p>滾動(dòng)滑塊::-webkit-scrollbar-thumb</p><p>邊角::-webkit-scrollbar-corner</p><p>實(shí)際常用</p><p>::-webkit-scrollbar{//寬度width:8px;height:8px;}</p><p>::-webkit-scrollbar-thumb{//拖動(dòng)條background-color:rgba(0,0,0,.3);border-radius:6px;}</p><p>::-webkit-scrollbar-track{//背景槽background-color:#ddd;border-radius:6px;}</p><p>自定義滾動(dòng)條-IE</p><p>可以使用自定義滾動(dòng)插件</p><p>IOS原生滾動(dòng)回調(diào)效果</p><p>-webkit-overflow-scrolling:touch;</p><p>三：overflow與BFC</p><p>清除浮動(dòng)，自適應(yīng)布局等。</p><p>BFCblockformattingcontext塊級(jí)格式化上下文</p><p>頁(yè)面之結(jié)界，內(nèi)部元素在怎么折騰都影響不到外面。</p><p>overflow與BFC</p><p>1.清除浮動(dòng)影響</p><p>2.避免margin穿透問(wèn)題</p><p>3.兩欄自適應(yīng)布局</p><p>內(nèi)部浮動(dòng)無(wú)影響</p><p>.clearfix{*zoom:1;}</p><p>.clearfix:after{centent:'';display:table;clear:both;}</p><p>避免margin穿透問(wèn)題</p><p>設(shè)置overflow:scroll，，overflow:auto，overflow:hidden</p><p>為什么有這樣特性？</p><p>流體特性下自適應(yīng)布局</p><p>1.左浮動(dòng)，右普通</p><p>.left{float:left;width:128px;}</p><p>.right{min-height:190px;background-color:#beceeb}</p><p>2.左浮動(dòng)，右margin</p><p>.left{float:left;width:128px;}</p><p>.right{min-height:190px;margin-left:150px;background-color:#beceeb}</p><p>3.左浮動(dòng)，右padding</p><p>.left{float:left;width:128px;}</p><p>.right{min-height:190px;padding-left:150px;background-color:#beceeb}</p><p>4.左浮動(dòng)</p><p>.left{float:left;width:128px;}</p><p>.right{min-height:190px;overflow:hidden;background-color:#beceeb}</p><p>給div設(shè)置了overflow屬性就是將元素BFC化，使用padding做流體自適應(yīng)布局時(shí)候，萬(wàn)萬(wàn)不可讓自適應(yīng)層BFC化。</p><p>是不是所有BFC屬性都有如此表現(xiàn)</p><p>yes.由于自身特性，具體表現(xiàn)不一</p><p>overflow:hidden;自適應(yīng)，單溢出不可見(jiàn)限制應(yīng)用場(chǎng)景</p><p>float+float包裹性+破壞性無(wú)法自適應(yīng)，塊狀浮動(dòng)布局</p><p>position:absolute脫離文檔流，自?shī)首詷?lè)</p><p>display:inline-block包裹性，無(wú)法自適應(yīng)</p><p>display:table-cell包裹性，但天生無(wú)溢出特性，絕對(duì)寬度也能自適應(yīng)。</p><p>只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化</p><p>兩欄自適應(yīng)布局</p><p>.cell{</p><p>display:table-cell;width:2000px;//2000保證比父元素大</p><p>*display:inline-block;*width:auto;//IE7-偽BFC特性</p><p>}</p><p>四：overflow與絕對(duì)定位</p><p>隱藏失效與滾動(dòng)固定</p><p>overflow:hidden失效</p><p>.overflow-hidden{</p><p>width:300px;</p><p>height:200px;</p><p>border:5pxsolid#333;</p><p>overflow:auto</p><p>}</p><p>img{postion:absolute;}</p><p>失效原因</p><p>絕對(duì)定位元素不總被父級(jí)overflow屬性剪裁，尤其當(dāng)overflow在絕對(duì)定位元素及其包含塊之間的時(shí)候</p><p>包含塊指“含position:relative/absolute/fixed”聲明的父級(jí)元素，沒(méi)有則body元素</p><p>如何避免失效</p><p>1.overflow元素自身成為包含塊</p><p>2.overflow元素的子元素成為包含塊</p><p>3.任意合法transform聲明當(dāng)作包含塊</p><p>overflow失效妙用</p><p>h0{height:0;}</p><p>.ovh{overflow:hidden;}</p><p>.tr{text-align:right;}</p><p>.abs{position:absolute;}</p><p><divclass="h0ovhtr"></p><p> <imgsrc=""class="absml10mt30"></img></p><p></div></p><p>五：依賴overflow的樣式表現(xiàn)</p><p>resize拉伸</p><p>css3有個(gè)屬性名為resize，可以拉伸元素尺寸。</p><p>.resize:both水平垂直兩邊拉；</p><p>.resize:horizontal只有水平方向拉伸</p><p>resize:vertical只有垂直方向拉伸</p><p>但是，此聲明想要其作用，元素的overflow屬性值不能是visible！</p><p><buttonstyle="resize:both;overflow:hidden">按鈕</button></p><p>這樣一個(gè)按鈕就可以實(shí)現(xiàn)拉伸效果了。</p><p>文本域自帶resize屬性，因?yàn)槲谋居蚰J(rèn)overflow：auto</p><p>文本域resize拖拽漁區(qū)大小是17*17像素。也就是滾動(dòng)條的尺寸</p><p>ellipsis文字溢出點(diǎn)點(diǎn)點(diǎn)省略</p><p>text-overflow:ellipsis</p><p><buttonstyle="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden"></p><p>這是一個(gè)按鈕，寬度僅200像素</p><p></button></p><p>六：overflow與錨點(diǎn)技術(shù)</p><p>錨點(diǎn)定位的本質(zhì)：該變?nèi)萜鞯臐L動(dòng)高度</p><p>錨點(diǎn)對(duì)位的觸發(fā)</p><p>1.url地址中的錨鏈與錨點(diǎn)元素；</p><p>2.可focus的錨點(diǎn)元素處于focus態(tài)；</p><p>錨點(diǎn)定位的作用</p><p>1.快速定位</p><p>2.錨點(diǎn)定位與overflow選項(xiàng)卡技術(shù)</p><p>應(yīng)用場(chǎng)景：?jiǎn)雾?yè)應(yīng)用<br/><br/><br/><img src="/upload/otherpic70/49483.jpg" alt="css中overflow屬性的使用技巧有哪些"></p><p>感謝各位的閱讀！關(guān)于“css中overflow屬性的使用技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！</p> <br> 新聞標(biāo)題：css中overflow屬性的使用技巧有哪些 <br> 地址分享：<a href="http://weahome.cn/article/pchojg.html">http://weahome.cn/article/pchojg.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/dsjgoec.html">linux基礎(chǔ)命令scp的簡(jiǎn)單介紹</a> </li><li> <a href="/article/dsjgoee.html">php查詢總數(shù)據(jù) php查詢一條記錄</a> </li><li> <a href="/article/dsjgosc.html">如何在php里安裝數(shù)據(jù)庫(kù) php安裝mysql</a> </li><li> <a href="/article/dsjgoid.html">java代碼實(shí)現(xiàn)更新操作 java更新周期</a> </li><li> <a href="/article/dsjgooe.html">帝國(guó)cms模板在哪兒 帝國(guó)cms模板文件放在哪里</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">成都網(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">免費(fèi)建站</a><a target="_blank">免費(fèi)網(wǎng)站建設(shè)</a><a target="_blank">軟文營(yíng)銷(xiāo)</a><a target="_blank">代理記賬</a><a target="_blank">藥房許可證</a><a target="_blank">400電話</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è)報(bào)價(jià)</a><a target="_blank">成都集團(tuán)網(wǎng)站建設(shè)</a><a href="http://weahome.cn/mobile/" target="_blank">重慶手機(jī)網(wǎng)站建設(shè)</a><a target="_blank">醫(yī)藥醫(yī)療網(wǎng)站建設(shè)方案</a><a target="_blank">網(wǎng)站建設(shè)推廣</a><a target="_blank">移動(dòng)網(wǎng)站建設(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">成都機(jī)柜租用</a><a target="_blank">西信服務(wù)器托管</a><a target="_blank">雅安服務(wù)器托管</a><a target="_blank">光華服務(wù)器托管</a><a target="_blank">貴陽(yáng)聯(lián)通機(jī)房</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國(guó)免費(fèi)咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號(hào)錦天國(guó)際A幢1002號(hào)</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號(hào)</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">移動(dòng)服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計(jì)制作</a> <a target="_blank">重慶網(wǎng)頁(yè)設(shè)計(jì)</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è)計(jì)</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ù)約顧問(wèn)</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="g42wq" class="pl_css_ganrao" style="display: none;"><tbody id="g42wq"><s id="g42wq"><bdo id="g42wq"></bdo></s></tbody><del id="g42wq"></del><tbody id="g42wq"><em id="g42wq"><del id="g42wq"></del></em></tbody><fieldset id="g42wq"></fieldset><dd id="g42wq"></dd><nav id="g42wq"></nav><tbody id="g42wq"><wbr id="g42wq"><cite id="g42wq"></cite></wbr></tbody><dl id="g42wq"></dl><li id="g42wq"></li><dl id="g42wq"></dl><wbr id="g42wq"></wbr><abbr id="g42wq"><kbd id="g42wq"><pre id="g42wq"></pre></kbd></abbr><tbody id="g42wq"></tbody><optgroup id="g42wq"></optgroup><button id="g42wq"></button><noscript id="g42wq"><em id="g42wq"><del id="g42wq"></del></em></noscript><acronym id="g42wq"></acronym><button id="g42wq"></button><noscript id="g42wq"></noscript><fieldset id="g42wq"><menu id="g42wq"><tr id="g42wq"></tr></menu></fieldset><tbody id="g42wq"><wbr id="g42wq"><cite id="g42wq"></cite></wbr></tbody><abbr id="g42wq"></abbr><abbr id="g42wq"></abbr><tr id="g42wq"></tr><blockquote id="g42wq"><tfoot id="g42wq"><rt id="g42wq"></rt></tfoot></blockquote><dfn id="g42wq"></dfn><dd id="g42wq"></dd><td id="g42wq"><strike id="g42wq"><menu id="g42wq"></menu></strike></td><table id="g42wq"></table><xmp id="g42wq"></xmp><kbd id="g42wq"></kbd><small id="g42wq"></small><wbr id="g42wq"></wbr><cite id="g42wq"></cite><abbr id="g42wq"></abbr><kbd id="g42wq"><pre id="g42wq"><td id="g42wq"></td></pre></kbd><abbr id="g42wq"><delect id="g42wq"><pre id="g42wq"></pre></delect></abbr><em id="g42wq"></em><del id="g42wq"><dfn id="g42wq"><center id="g42wq"></center></dfn></del><strong id="g42wq"><optgroup id="g42wq"><li id="g42wq"></li></optgroup></strong><object id="g42wq"><small id="g42wq"><abbr id="g42wq"></abbr></small></object><button id="g42wq"></button><center id="g42wq"><dl id="g42wq"><nav id="g42wq"></nav></dl></center><object id="g42wq"><small id="g42wq"><abbr id="g42wq"></abbr></small></object><nav id="g42wq"></nav><delect id="g42wq"><tr id="g42wq"><td id="g42wq"></td></tr></delect><option id="g42wq"></option><dfn id="g42wq"></dfn><object id="g42wq"><bdo id="g42wq"><abbr id="g42wq"></abbr></bdo></object><tr id="g42wq"><td id="g42wq"><fieldset id="g42wq"></fieldset></td></tr></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; //絕對(duì)路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>