什么是css中overflow屬性-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:做網(wǎng)站、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的南陵網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!

一:overflow基本屬性

overflow基本屬性有:visibel , hidden, scroll,auto, inherit, overflow-x和overflow-y

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

作用的前提

1.非display:inline水平!

2.對應方位的尺寸限制,width/height/max-width/max-height/absolute拉伸

overflow:visibel妙用

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

二:overflow與滾動條

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

1.overflow:auto/overflow:scroll 有些元素自帶滾動條 <html> <textarea>

body/html與滾動條

無論什么瀏覽器,默認滾動條均來自html!而不是body標簽

ie8+ html{overflow:auto}

所以,如果我們想要去除頁面默認滾動條,只需要:

html{overflow:hidden}

body/html與滾動條-js與滾動高度

兼容寫法

 var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失現(xiàn)象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}

在chrome瀏覽器下bottom是可以滾動出來的。

滾動條的寬度

盒子寬度(帶滾動條)-盒子內(nèi)寬度 = 滾動條寬度

IE firefox chrome均是17像素。

水平居中跳動問題

修復方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}

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

自定義滾動條-webkit

 整體部分 ::-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; }

自定義滾動條-IE

可以使用自定義滾動插件

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

-webkit-overflow-scrolling:touch;

三:overflow與BFC

清除浮動,自適應布局等。

BFC block formatting context 塊級格式化上下文

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

overflow與BFC

1.清除浮動影響

2.避免margin穿透問題

3.兩欄自適應布局

內(nèi)部浮動無影響

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

避免margin穿透問題

設置overflow:scroll,, overflow:auto, overflow:hidden

為什么有這樣特性?

流體特性下自適應布局

1.左浮動,右普通

.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}

2.左浮動,右margin

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

3.左浮動,右padding

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

4.左浮動

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

給div設置了overflow屬性就是將元素BFC化,使用padding做流體自適應布局時候,萬萬不可讓自適應層BFC化。

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

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

 overflow:hidden;      自適應,單溢出不可見 限制應用場景
 float + float 包裹性+破壞性 無法自適應,塊狀浮動布局
position:absolute 脫離文檔流,自娛自樂
display:inline-block 包裹性,無法自適應
display:table-cell 包裹性,但天生無溢出特性,絕對寬度也能自適應。
只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化

兩欄自適應布局

 .cell{
  display:table-cell; width:2000px; //2000保證比父元素大
  *display:inline-block;*width:auto; //IE7-偽BFC特性
 }

四:overflow與絕對定位

隱藏失效與滾動固定

overflow:hidden失效

.overflow-hidden{
    width:300px;
    height:200px;
    border:5px solid #333;
    overflow:auto
}
img{postion:absolute;}

失效原因
   絕對定位元素不總被父級overflow屬性剪裁,尤其當overflow在絕對定位元素及其包含塊之間的時候
   包含塊指 “含position:relative/absolute/fixed”聲明的父級元素,沒有則body元素

如何避免失效
   1.overflow元素自身成為包含塊
   2.overflow元素的子元素成為包含塊
  3.任意合法transform聲明當作包含塊

overflow失效妙用

h0{height:0;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.abs{position:absolute;}
<div class="h0 ovh tr">
   &nbsp;<img src="" class="abs ml10 mt30"></img>
</div>

五:依賴overflow的樣式表現(xiàn)

 resize拉伸

css3有個屬性名為resize,可以拉伸元素尺寸。

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

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

resize:vertical   只有垂直方向拉伸

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

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

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

文本域自帶resize屬性,因為文本域默認overflow:auto

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

ellipsis文字溢出點點點省略

text-overflow:ellipsis
<button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
  這是一個按鈕,寬度僅200像素
</button>

六:overflow與錨點技術

錨點定位的本質(zhì):該變?nèi)萜鞯臐L動高度

錨點對位的觸發(fā)
   1.url地址中的錨鏈與錨點元素;
   2.可focus的錨點元素處于focus態(tài);

錨點定位的作用
   1.快速定位
   2.錨點定位與overflow選項卡技術

應用場景:單頁應用

以上就是css關于 overflow屬性的一些小技巧, overflow屬性介紹的詳細內(nèi)容,更多請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司其它相關文章!

以上就是什么是css中overflow屬性,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱:什么是css中overflow屬性-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://bm7419.com/article20/ddpico.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設計、營銷型網(wǎng)站建設外貿(mào)網(wǎng)站建設、微信公眾號、外貿(mào)建站Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站