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