1、元素的顯示及隱藏
1、實現方式:
① display
② visibility
③ overflow
2、display
① 元素的隱藏 display: none;
1) 結論:元素本身還在dom中,只是隱藏而已
2) 元素是不佔位置的
② 元素的顯示 display: block;
1) 結論:display:block可以讓行內元素、行內塊元素轉化為塊狀元素
2) display:block可以讓隱藏的元素顯示出來
3、visibility
① 元素的隱藏 visibility: hidden;
1) 元素本身還在dom中,只是隱藏而已
2) 元素是佔位置的
② 元素的顯示 visibility: visible;
4、overflow
① overflow: hidden; 盒子中多餘的內容隱藏掉
② overflow: scroll; 產生滾動條 :不管內容有沒有溢位都會產生滾動條
③ overflow: auto; 溢位會有滾動條,沒有溢位不會有滾動條
5、總結
overflow:hidden 1、容器中多餘的內容隱藏掉
2、清除浮動
3、消除巢狀關係的外邊距合併所帶來的影響
2、溢位文字隱藏
1、word-break:自動換行
(1) break-all:允許在單詞內換行。
(2) keep-all:只能在半形空格或連字元處換行。
(3) 注意:主要處理英文單詞
2、一行溢位文字隱藏
(1) white-space:nowrap 強制在同一行內顯示所有文字
(2) overflow:hidden 多餘的內容隱藏掉
(3) text-overflow: ellipsis; 溢位的部分顯示省略號
(4) 注意:三個屬性同時使用才有效果
3、多行溢位文字隱藏
(1) display: -webkit-box;
(2) -webkit-box-orient: vertical;
(3) -webkit-line-clamp: 行數;
(4) overflow: hidden;
顯示 隱藏 隱藏檔案
顯示隱藏檔案 開啟終端,輸入命令 該命令將finder的隱藏檔案顯示出來,並重新啟動finder。隱藏隱藏檔案 開啟終端,輸入命令 該命令將finder的隱藏檔案隱藏出來,並重新啟動finder。顯示以.開頭的檔案 在finder中,按快捷鍵command shift 可以顯示隱藏檔案 資料夾,再按...
顯示隱藏文字內容 2020 11 20
自學js,錯誤案例 value可得到屬性值或者更改屬性值 判斷value值是否為空,所以用 doctype html content type content text html charset utf 8 input style head 1 value可得到屬性值或者更改屬性值 text val...
CSS隱藏文字的幾個方法
通常偏移掉字型的方式是 1 使用text indent 9999px 可是他有乙個侷限性 他只適用於塊級元素block而我們往往有時候想偏移掉的a上的字型所以問題就來了text indent 9999px 雖然用起來比較愜意將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了如果正好這個...