-
HTML元素的滾動條的等效css代碼
查看全部 -
無論什么瀏覽器，默認滾動條來自<html>標簽而不是<body>標簽
查看全部 -
overflow起作用的前提條件
查看全部 -
如果overflow-x和overflow-y值不同，其中一個為visible，另一個為hidden、scroll、auto，visible會被重置為auto
查看全部 -
overflow的默認值visible會使得元素顯示不下的時候超出外面的容器
查看全部 -
ie6不支持內部浮動無影響
查看全部 -
父元素設置overflow：visible后高度無影響依然塌陷
查看全部 -
overflow : visible 妙用
查看全部 -
overflow如何起作用
查看全部 -
overflow與錨點技術：
1、錨點定位的本質是：改變容器的滾動高度
2、錨鏈接時，如下面的例子
給class="box"添加一個overflow：auto；樣式
點擊下面的1,2,3,4，能看見隨著滾動條的移動轉移到不同的div的位置
當改為overflow：hidden；
滾動條不見了，點擊下面的1,2,3,4，直接進行div的轉換，看不到之前的滾動變換效果
但是這樣div切換時，位置會上下偏移，不太好控制
查看全部 -
依賴于overflow的樣式：
1、resize拉伸：
resize:both;? ?水平垂直兩拉伸
resize:horizontal;? ?水平方向拉伸
resize:vertical;? ?垂直方向拉伸
resize的聲明要想起作用，元素的overflow不能為visible
2、文本域天生可以拉伸，是因為它的overflow默認為auto
3、resize拖拽區域的大小是17像素*17像素，滾動條的尺寸也是17像素
4、text-overflow:ellipsis;? 文字溢出省略號表示
不添加overflow：hidden，溢出部分不會以省略號表示
當添加了overflow：hidden；
查看全部 -
overflow與絕對定位：
1、overflow：hidden失效
一個容器，里面有張圖片，
.box{
? ?width:300px; height:200px;
? ?border:5px solid #beceeb;
? ?overflow:hidden;
}
當圖片大小超過容器大小時，超出部分會被隱藏，
但是當給圖片加上樣式：
img{
? ?position：absolute；
}
此時圖片隱藏失敗
2、overflow滾動失效
一個容器，里面有張圖片，
.box{
? ?width:300px; height:200px;
? ?border:5px solid #beceeb;
? ?overflow:auto;
}
當圖片大小超過容器大小時，容器會加上滾動條，
但是當給圖片加上樣式：
img{
? ?position：absolute；
}
拖動滾動條時圖片不再跟著滾動，超出部分直接顯示了出來
3、上訴情況失效的原因：
絕對定位元素不總是被父級overflow屬性裁剪，尤其當overflow在絕對定位元素及其包含塊之間的時候
包含塊是指“含有position:relative/absolute/fixed聲明的父級元素，沒有則body元素”
上面的例子的層次結構：
body(包含塊)
? ? ? .box(overflow)? ? overflow出現在絕對定位元素和包含塊之間
? ? ? ? ? ? img(absolute)
4、避免overflow的失效：
1）overflow元素自身為包含塊
<div class="box">
? ?<div >? ?//包含塊
? ? ? <img src="1.jpg">
? ?</div>
</div>
2）overflow元素的子元素為包含塊
3）任意合法transform聲明當做包含塊，
overflow元素自身transform：適用于IE9+/FireFox
overflow子元素transform：適用于IE9+/FireFox/Chrome/Safari/Opera
查看全部 -
overflow與塊狀格式化上下文：
1、清除浮動：
.clearfix{*zoom：1；}
.clearfix：after{content：''；display：table；clear：both；}
2、兩欄自適應：
.cell{
? ? display：table-cell；width：2000px；? ?//IE8+ BFC特性
? ? *display：inline-block；*width：auto；? ?//IE7-? 偽BFC特性
}
查看全部 -
overflow基本屬性：
1、overflow：visible、hidden、scroll、auto、inherit
visible：默認值，超出的部分依舊顯示，IE6瀏覽器容器邊框會變大以包含住超出的部分
hidden：超出的部分被隱藏
scroll：在容器的右、下出現滾動條
auto：當溢出時才出現滾動條
2、overflow-x：hidden；圖片溢出時，水平方向隱藏，但容器整體變小，垂直方向出現滾動條
3、當overflow-x，overflow-y的值相同，等同于overflow
overflow-x，overflow-y的值不同，一個賦值為visible，一個賦值為hidden、scroll或auto，那么這個visible會被重置auto
查看全部 -
去除頁面默認滾動條只需
html{overflow:hidden}
查看全部
舉報