overflow

overflow的用法仍是比較靈活， 也是使用比較頻繁的css屬性， 在屢次使用以後有了心得， 記錄一下。

 

overflow的屬性

visible 　　 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 　　內容會被修剪，而且其他內容是不可見的。
scroll　　　內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto   　　  若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit  　　規定應該從父元素繼承 overflow 屬性的值。

 

 

visible：通常用於當某元素被設置overflow的其餘屬性， 須要動態去掉的時候使用

hidden：須要隱藏、裁剪一個元素的時候使用。 也可用於清除邊距重疊，好比：

<div style="margin: 100px 0;background: #ff0;">
	<div style="margin: 100px 0;background: #f0f">
		div二
	</div>
    div一
</div>

　　上面的兩個div設置了上下邊距各100px，咱們指望的是div一上邊距100px，div二距裏div一的上邊距100px。

　　實際上只有div一和div二的上邊距重疊100px

上下元素的margin會發生重疊，重疊後取最大的margin，不少時候這不是咱們想要的，overflow:hidden就派上用場了， 使用這個屬性就能夠清除重疊。

 以下圖，這是一個簡單的用法。

咱們常使用的  一段文字超出顯示省略號， 也是經過hidden這個屬性來實現的， 好比：

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

　　

scroll：元素顯示滾動條， 以查看元素的全貌

auto：元素自適應顯示

 

auto和scroll在內容超出元素的時候均可以經過滾動條來查看內容的全貌，不過auto比scroll更美觀。

scroll不管是否超出元素， 元素都將顯示滾動條

auto在內容沒有超出元素的時候是不存在滾動條的，只有在超出的時候才顯示

 

inherit：元素繼承父級屬性

父級的overflow是什麼屬性，該元素就是什麼屬性。

 

overflow樣式屬性比較經常使用， 在某些地方靈活使用能夠少些代碼，提升項目的性能（別人說能夠提升的）

 

 

我是剛入門不久的前端工程師，內容寫的可能不是那麼精簡、清楚，我會慢慢改進排版以及內容，但願各位多多指點，多多支持，謝謝

（ps: 若是有剛加入前端這個行業的，比較迷茫的同窗，歡迎進羣交流，但願不嫌棄的同行或者大佬加羣你們一塊兒交流，相信將來會更好，羣號：815957915）