內(nèi)容溢出和剪裁

如果一個(gè)元素的內(nèi)容對(duì)于元素大小來(lái)說(shuō)過(guò)大，就有可能溢出元素本身。對(duì)于此情況，有一些解決辦法可選。

溢出 overflow

• 值
  • visible(默認(rèn)):內(nèi)容在元素框外可見(jiàn)。一般會(huì)導(dǎo)致內(nèi)容超出其自己的元素框，但不會(huì)改變框的形狀
  • scroll:溢出部分通過(guò)滾動(dòng)條查看
  • hidden:溢出部分無(wú)法查看
  • auto:一般只有必要時(shí)出現(xiàn)滾動(dòng)條
• 適用于所有元素
• 有繼承性

剪裁 clip

如果一個(gè)絕對(duì)定位元素的內(nèi)容溢出其內(nèi)容框，而overflow設(shè)置為要求剪裁該內(nèi)容，通過(guò)使用屬性 clip 可以改變剪裁區(qū)域的形狀。

• 值
  • auto(默認(rèn)):表示該元素內(nèi)容不應(yīng)剪裁
  • rect(top,right,bottom,left):定義矩形剪裁形狀。只改變顯示內(nèi)容的區(qū)域形狀，不改變內(nèi)容區(qū)的形狀
    注意：其值不是邊偏移，而是距離元素左上角的距離。如需要涵蓋左上角20*20像素的正方形，則rect(0,20px,20px,0)
• 適用于絕對(duì)定位元素
• 無(wú)繼承性
• 取值：rect(...)值允許為長(zhǎng)度值（可為負(fù)值）或auto，auto表示將剪裁邊界設(shè)置為適當(dāng)?shù)膬?nèi)容邊界

元素可見(jiàn)性 visibility

• 取值
  • visible（默認(rèn)）：可見(jiàn)
  • hidden：不可見(jiàn)，但會(huì)影響文檔布局，就像它還是可見(jiàn)的一樣
    注：與display:none 有區(qū)別。后者不僅不顯示，而且會(huì)從文檔中刪除，不影響文檔布局
  • collapse：表顯示中使用；對(duì)于非表元素，與hidden同含義
• 應(yīng)用于所有元素
• 有繼承性

轉(zhuǎn)載于:https://www.cnblogs.com/seven7seven/p/4121371.html

總結(jié)

以上是生活随笔為你收集整理的溢出和剪裁，可见性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。