溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css中overflow屬性的使用技巧有哪些

發(fā)布時(shí)間：2022-03-02 09:45:03 來(lái)源：億速云 閱讀：221 作者：小新 欄目：web開(kāi)發(fā)

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

　　一：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)條<html><textarea>

　　body/html與滾動(dòng)條

　　無(wú)論什么瀏覽器，默認(rèn)滾動(dòng)條均來(lái)自html!而不是body標(biāo)簽

　　ie8+html{overflow:auto}

　　所以，如果我們想要去除頁(yè)面默認(rèn)滾動(dòng)條，只需要：

　　html{overflow:hidden}

　　body/html與滾動(dòng)條-js與滾動(dòng)高度

　　兼容寫(xiě)法

　　varst=document.body.scrollTop||document.documentElement.scrollTop

　　overflow的padding-bottom缺失現(xiàn)象

　　.box{width:400px;height:100px;padding:100px0;overfow:auto;}

　　在chrome瀏覽器下bottom是可以滾動(dòng)出來(lái)的。

　　滾動(dòng)條的寬度

　　盒子寬度（帶滾動(dòng)條）-盒子內(nèi)寬度=滾動(dòng)條寬度

　　IEfirefoxchrome均是17像素。

　　水平居中跳動(dòng)問(wèn)題

　　修復(fù)方法

　　1.html{overflow-y:scroll;}

　　2..container{padding-left:calc(100vw-100%);}

　　100vw-瀏覽器寬度；100%-可用內(nèi)容寬度

　　自定義滾動(dòng)條-webkit

　　整體部分::-webkit-scrollbar

　　兩端按鈕::-webkit-scrollbar-button

　　外層軌道::-webkit-scrollbar-track

　　內(nèi)層軌道::-webkit-scrollbar-track-piece

　　滾動(dòng)滑塊::-webkit-scrollbar-thumb

　　邊角::-webkit-scrollbar-corner

　　實(shí)際常用

　　::-webkit-scrollbar{//寬度width:8px;height:8px;}

　　::-webkit-scrollbar-thumb{//拖動(dòng)條background-color:rgba(0,0,0,.3);border-radius:6px;}

　　::-webkit-scrollbar-track{//背景槽background-color:#ddd;border-radius:6px;}

　　自定義滾動(dòng)條-IE

　　可以使用自定義滾動(dòng)插件

　　IOS原生滾動(dòng)回調(diào)效果

　　-webkit-overflow-scrolling:touch;

　　三：overflow與BFC

　　清除浮動(dòng)，自適應(yīng)布局等。

　　BFCblockformattingcontext塊級(jí)格式化上下文

　　頁(yè)面之結(jié)界，內(nèi)部元素在怎么折騰都影響不到外面。

　　overflow與BFC

　　1.清除浮動(dòng)影響

　　2.避免margin穿透問(wèn)題

　　3.兩欄自適應(yīng)布局

　　內(nèi)部浮動(dòng)無(wú)影響

　　.clearfix{*zoom:1;}

　　.clearfix:after{centent:'';display:table;clear:both;}

　　避免margin穿透問(wèn)題

　　設(shè)置overflow:scroll，，overflow:auto，overflow:hidden

　　為什么有這樣特性？

　　流體特性下自適應(yīng)布局

　　1.左浮動(dòng)，右普通

　　.left{float:left;width:128px;}

　　.right{min-height:190px;background-color:#beceeb}

　　2.左浮動(dòng)，右margin

　　.left{float:left;width:128px;}

　　.right{min-height:190px;margin-left:150px;background-color:#beceeb}

　　3.左浮動(dòng)，右padding

　　.left{float:left;width:128px;}

　　.right{min-height:190px;padding-left:150px;background-color:#beceeb}

　　4.左浮動(dòng)

　　.left{float:left;width:128px;}

　　.right{min-height:190px;overflow:hidden;background-color:#beceeb}

　　給div設(shè)置了overflow屬性就是將元素BFC化，使用padding做流體自適應(yīng)布局時(shí)候，萬(wàn)萬(wàn)不可讓自適應(yīng)層BFC化。

　　是不是所有BFC屬性都有如此表現(xiàn)

　　yes.由于自身特性，具體表現(xiàn)不一

　　overflow:hidden;自適應(yīng)，單溢出不可見(jiàn)限制應(yīng)用場(chǎng)景

　　float+float包裹性+破壞性無(wú)法自適應(yīng)，塊狀浮動(dòng)布局

　　position:absolute脫離文檔流，自?shī)首詷?lè)

　　display:inline-block包裹性，無(wú)法自適應(yīng)

　　display:table-cell包裹性，但天生無(wú)溢出特性，絕對(duì)寬度也能自適應(yīng)。

　　只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化

　　兩欄自適應(yīng)布局

　　.cell{

　　display:table-cell;width:2000px;//2000保證比父元素大

　　*display:inline-block;*width:auto;//IE7-偽BFC特性

　　}

　　四：overflow與絕對(duì)定位

　　隱藏失效與滾動(dòng)固定

　　overflow:hidden失效

　　.overflow-hidden{

　　width:300px;

　　height:200px;

　　border:5pxsolid#333;

　　overflow:auto

　　}

　　img{postion:absolute;}

　　失效原因

　　絕對(duì)定位元素不總被父級(jí)overflow屬性剪裁，尤其當(dāng)overflow在絕對(duì)定位元素及其包含塊之間的時(shí)候

　　包含塊指“含position:relative/absolute/fixed”聲明的父級(jí)元素，沒(méi)有則body元素

　　如何避免失效

　　1.overflow元素自身成為包含塊

　　2.overflow元素的子元素成為包含塊

　　3.任意合法transform聲明當(dāng)作包含塊

　　overflow失效妙用

　　h0{height:0;}

　　.ovh{overflow:hidden;}

　　.tr{text-align:right;}

　　.abs{position:absolute;}

　　<divclass="h0ovhtr">

　　&nbsp;<imgsrc=""class="absml10mt30"></img>

　　</div>

　　五：依賴(lài)overflow的樣式表現(xiàn)

　　resize拉伸

　　css3有個(gè)屬性名為resize，可以拉伸元素尺寸。

　　.resize:both水平垂直兩邊拉；

　　.resize:horizontal只有水平方向拉伸

　　resize:vertical只有垂直方向拉伸

　　但是，此聲明想要其作用，元素的overflow屬性值不能是visible！

　　<buttonstyle="resize:both;overflow:hidden">按鈕</button>

　　這樣一個(gè)按鈕就可以實(shí)現(xiàn)拉伸效果了。

　　文本域自帶resize屬性，因?yàn)槲谋居蚰J(rèn)overflow：auto

　　文本域resize拖拽漁區(qū)大小是17*17像素。也就是滾動(dòng)條的尺寸

　　ellipsis文字溢出點(diǎn)點(diǎn)點(diǎn)省略

　　text-overflow:ellipsis

　　<buttonstyle="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">

　　這是一個(gè)按鈕，寬度僅200像素

　　</button>

　　六：overflow與錨點(diǎn)技術(shù)

　　錨點(diǎn)定位的本質(zhì)：該變?nèi)萜鞯臐L動(dòng)高度

　　錨點(diǎn)對(duì)位的觸發(fā)

　　1.url地址中的錨鏈與錨點(diǎn)元素；

　　2.可focus的錨點(diǎn)元素處于focus態(tài)；

　　錨點(diǎn)定位的作用

　　1.快速定位

　　2.錨點(diǎn)定位與overflow選項(xiàng)卡技術(shù)

　　應(yīng)用場(chǎng)景：?jiǎn)雾?yè)應(yīng)用


css中overflow屬性的使用技巧有哪些


感謝各位的閱讀！關(guān)于“css中overflow屬性的使用技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手