一撤嫩、overflow的屬性
visible 默認(rèn)值
hidden 溢出隱藏
scroll 顯示滾動(dòng)條
auto 溢出滾動(dòng)
inherit 繼承
其中 hidden 、scroll 、auto屬性會(huì)為元素創(chuàng)建BFC特性衬廷。
二 、 overflow-x 和 overflow-x (IE8+)
- overflow-x 和overflow-y設(shè)置了同樣的值汽绢， 則overflow為該值
- overflow-x 或者overflow-y 如果有一個(gè)值為visible吗跋，另一個(gè)值為 hidden scroll 和 auto其中一個(gè)，那么visible的那一邊會(huì)被設(shè)置為auto.
三宁昭、滾動(dòng)條的寬高會(huì)影響元素的容納寬高
- HTML元素的滾動(dòng)條會(huì)影響自身的寬度
image.png
其他元素則會(huì)影響他的可容乃寬度 比如說(shuō)元素的寬度為100px跌宛，他能容乃的寬度為:
image.png
100px - 滾動(dòng)條寬度 （一般為17px）
如果設(shè)置overflow: auto`當(dāng)里面元素大于這個(gè)寬度是就會(huì)出現(xiàn)滾動(dòng)條
四、overflow實(shí)用場(chǎng)景
- 阻止margin穿透
利用BFC特性久窟，為元素設(shè)置overflow: hidden / scroll / auto
- 清除浮動(dòng)
為元素設(shè)置overflow: hidden / auto / scroo清除子元素浮動(dòng)帶來(lái)的高度坍塌情況 （原因是使用了BFC特性/ BFC元素的高度會(huì)計(jì)算包含浮動(dòng)的子元素）
- 自適應(yīng)布局
為一個(gè)block元素設(shè)置overflow值和一個(gè)float的元素并排布局秩冈，就會(huì)形成block元素的自適應(yīng)，(原因是因?yàn)閎lock元素還保持著塊級(jí)元素的特性斥扛，寬的會(huì)100%填滿父級(jí)元素、但是設(shè)置為BFC后丹锹，又不得不與外界保持完全獨(dú)立的關(guān)系稀颁，所以會(huì)進(jìn)可能個(gè)填充剩余的寬度，實(shí)現(xiàn)了自適應(yīng)寬度楣黍。)
.box {
background: #ccc;
overflow: hidden;
}
.child1 {
width: 100px;
height: 100px;
background: green;
float: left;
margin-right: 10px;
}
.child2 {
background: yellow;
height: 100px;
overflow: hidden;
}
image.png
- 使用overflow: hidden 實(shí)現(xiàn) 文本省略
ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
