資訊專欄INFORMATION COLUMN
摘要：一般地，一個塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會根據(jù)其祖先的屬性裁剪。默認情況下，元素不會被裁剪。在閉合路徑內(nèi)的內(nèi)容會顯示，而路徑外邊的都會被剪掉著作權歸作者所有。
Overflow and clipping
一般地，一個塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個盒可能會溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如：
一行無法拆分，導致行盒比塊盒寬
一個塊級盒對其包含塊來說太寬了。當一個元素的width屬性具有一個能讓生成盒從包含塊的邊內(nèi)溢出的值時，可能會發(fā)生這種情況
一個元素的高度超出了為其包含塊顯式指定的高度（即，包含塊的高度由height屬性決定，而不是由內(nèi)容高度）
一個后代盒是絕對定位的，部分內(nèi)容在該盒外部。這種盒并不一定會根據(jù)其祖先的overflow屬性裁剪。特殊的，它們不會被介于自身和包含塊之間的任意祖先的overflow裁剪
一個后代盒具有負margin，導致它的部分內(nèi)容被定為在該盒外部
text-indent屬性讓一個行盒掛在該塊盒的left或者right邊上
出現(xiàn)溢出時，overflow屬性指定了一個盒是否應該被裁剪到其padding邊內(nèi)，以及是否需要提供一種滾動機制來訪問所有被裁剪掉的內(nèi)容
Overflowoverflow各種屬性值的表現(xiàn)
在本例中,overflow:visible默認,對溢出不作處理;overflow:hidden對溢出部分進行隱藏;overflow:scroll對右邊以及下邊做出滾動條處理,不管元素是否溢出;overflow:auto對溢出部分做滾動條處理;overflow:inherit應該從父元素繼承overflow屬性的值
css3新特性
css3中增加了overflow-x以及overflow-y分別代表水平方向和垂直方向的overflow,這兩個屬性是相同值時,等同于overflow的屬性值;這兩個值一個非overflow:visible,一個為overflow:visible時,overflow:visible的屬性值會變?yōu)?br>overflow:auto
overflow起作用的前提:
非display:inline水平
對應方位的尺寸限制.width/height/max-width/max-height/absolute拉伸
對于單元格td等,還需要table為table-layout:fixed狀態(tài)才行
對于ie7瀏覽器來說,使用overflow會有一些bug:
滾動條樣式不同(這一條在win10中都一樣)
寬度設定機制,對于子元素設置width:100%,ie7會按照父元素寬度計算,也就是400px,而子元素有垂直滾動條占據(jù)一部分空間,所以實際水平寬度不到400px,因此水平滾動條會出現(xiàn)
解決方法是去掉width:100%
.box{ width: 400px; height: 100px; overflow: auto; } .content{ width: 100%; height: 200px; background-color: #beceeb; }
ie7瀏覽器下,文字越多,按鈕兩側(cè)padding留白就越大,這時,給按鈕樣式添加overflow:visiable就能解決
Overflow與滾動條 滾動條出現(xiàn)的條件overflow:auto/overflow:scroll,html標簽,textarea標簽
子元素超出父元素限制
Body/Html與滾動條在瀏覽器中,默認滾動條均來自而不是
原因:新建一個空白html,默認.5em margin,如果滾動條來自,則應該有邊距,而不是靠著瀏覽器邊緣
IE7-瀏覽器默認: html{ overflow-y:scroll}
IE8+瀏覽器默認: html{overflow:auto}
所以我們?nèi)コ撁婺J滾動條,只需要:
html{ overflow:hidden}
使用js獲取滾動高度
Chrome瀏覽器是:document.body.scrollTop
其他瀏覽器: document.documentElement.scrollTop
為了兼容性建議使用: var st=document.documentElement.scrollTop||document.body.scrollTop
Overflow的padding-bottom缺失現(xiàn)象 .box{
width: 400px;
height: 100px;
padding: 100px 0;
overflow: auto;
border: 1px solid #000;
}
上面的代碼在Chrome瀏覽器中會出現(xiàn)padding-bottom,而在其它瀏覽器中都不會出現(xiàn),這樣就導致出現(xiàn)不一樣的scrollHeight
滾動條的寬度準確說法應該是滾動欄的寬度.下面方法可以簡單獲得:
.box{
width: 400px;
overflow:scroll;
}
.in{
*zoom:1;
}
var a = console.log (400-document.getElementsById("in").clientWidth);
Overflow:auto的潛在布局隱患
滾動條會占用容器尺寸,原本和諧的布局,滾動條出現(xiàn)后可能會錯位或者出現(xiàn)水平滾動條,在實現(xiàn)這種布局時一般使用自適應布局或者預留合適寬度
水平居中跳動問題.container{width:1150px;margin:0 auto}
這種使用水平居中的布局,因為滾動條會占用一部分空間,所以滾動的時候會跳動,向左偏移滾動條寬度
水平居中跳動問題的修復
1.html{overflow-y:scroll}
這個解決方案唯一缺點就是不美觀,會出現(xiàn)滾動條
2..container{padding-left:calc(100vw-100%);}
100vw-瀏覽器寬度; 100%-可用內(nèi)容寬度;這個解決方案需要IE9+支持
非overflow:visible可以觸發(fā)BFC
清除浮動影響
避免margin穿透問題
兩欄自適應布局
1.overflow內(nèi)部float無影響,IE6是不支持的,所以才有了廣為流傳的清除浮動方法:
清除浮動方法
3.overflow與兩欄自適應布局
使用overflow實現(xiàn)兩欄自適應布局
還有一種廣為流傳的實現(xiàn)兩欄自適應布局的方法,使用table-cell
table-cell實現(xiàn)兩欄自適應布局
Overflow與absolute隱藏失效與滾動固定
在上面的例子中,一旦子元素設置為absolute,父元素的overflow屬性會失效
絕對定位元素不總是被父級overflow屬性裁剪,尤其當overflow在絕對定位元素及其包含塊之間的時候
如何避免失效
overflow元素自身為包含塊
overflow元素的子元素為包含塊
任意合法transform聲明當作包含塊
transform聲明當作包含塊
overflow元素自身transform
overflow子元素transform
避免失效例子
Overflow妙用居中及邊緣對齊定位
這里面的邊緣對齊定位,使用的就是父元素overflow:hidden,子元素的 被隱藏,后面的圖片設置position:absolute使overflow對于圖片的作用失效,從而實現(xiàn)滾動條上下滾動的邊緣定位效果
依賴overflow的樣式表現(xiàn)CSS3有個屬性名為resize,可以拉伸元素尺寸:
resize:both水平垂直兩邊拉
resize:horizontal只有水平方向拉伸
resize:vertical只有垂直方向拉伸
但是,此聲明起作用的前提是元素不是overflow:visible
一些依賴overflow的樣式表現(xiàn)
例1中,我們給button使用了一個overflow:hidden以及resize:both,button可以水平垂直拉伸
例2是一個textarea,因為它默認overflow:auto,所以它默認就能拉伸
例3是我們給段落一個overflow:hidden以及text-overflow:ellipsis,就會在最后顯示...(省略號)
錨點與錨鏈
在這個例子中,通過的#mm3(錨鏈)找到圖片的id(錨點)來定位
錨點定位的本質(zhì)就是:改變?nèi)萜鞯臐L動高度
需要滿足的條件:
容器可滾動
錨點元素在容器內(nèi)
錨點定位的觸發(fā)url地址中的錨鏈與錨點元素
可focus的錨點元素處于fcous態(tài)
錨點定位的作用快速定位
錨點定位與overflow選項卡技術
overflow選項卡
在這個例子中,我們使用了錨點定位技術實現(xiàn)選項卡,并使用overflow:hidden隱藏溢出的選項卡
這種用法有一個不足之處,就是當我們在頁面偏下位置時,當你切換選項卡的時候,它會定位到最外層的滾動條,體驗很糟糕,所以一般用在單頁場景
URL錨點HTML定位技術機制、應用與問題
無JavaScript純CSS實現(xiàn)選項卡輪轉(zhuǎn)切換效果
Clip&&clip-path Clip裁剪區(qū)域（clipping region）定義了一個元素border box的哪一部分是可見的。默認情況下，元素不會被裁剪。然而，裁剪區(qū)域可以通過clip屬性顯式地設置
clip的剪切例子
使用clip裁剪必須是absolute或者fixed元素,本例中沒有逗號分隔的是兼容IE6/7版本
rect(top,right,bottom,left);中的top,bottom是相對于盒子上邊框邊界的偏移,left,right是相對于盒子左邊框邊界的偏移
clip屬性已經(jīng)棄用,因為它的適用范圍太小,只能用在絕對定位元素下,而且只能用于裁剪矩形,取而代之的是clip-path
Clip-pathclip-path，包括了一條閉合的矢量路徑，它可以是CSS中定義的基礎形狀，也可以是包含了clipPath標簽的SVG元素。在閉合路徑內(nèi)的內(nèi)容會顯示，而路徑外邊的都會被剪掉著作權歸作者所有。
clip-path語法:
clip-path:| [ || ] | none
where
