您好,登錄后才能下訂單哦!
這篇“css中隱藏命令有哪些”文章,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要參考一下,對于“css中隱藏命令有哪些”,小編整理了以下知識點,請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進入主題吧。
css是一種用來表現HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規則的優先級由css根據這個層次結構決定,從而實現級聯效果,發展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。
css中隱藏命令有三種,分別是:1、使用“display:none”來隱藏所有內容;2、使用“visibility:hidden”來隱藏內容;3、使用“overflow:hidden”隱藏溢出內容。
CSS中隱藏內容的3種方法及屬性值
在制作網頁時,隱藏內容也是一種比較常用的手法,它的作用一般有:隱藏文本/圖片、隱藏鏈接、隱藏超出范圍的內容、隱藏彈出層、隱藏滾動條、清除錯位和浮動等等。 使用CSS即可使以上提到的內容隱藏起來,幾種隱藏內容的方法:
1、使用display:none來隱藏所有內容
display:none可以讓網頁中所有內容不顯示,如代碼、文字、鏈接、圖片、p層,是推薦的內容隱藏方式。
<p style="display:none;">我不占地兒,你看不見我;</p>
值 描述 none 此元素不會被顯示。 block 此元素將顯示為塊級元素,此元素前后會帶有換行符。 inline 默認。此元素會被顯示為內聯元素,元素前后沒有換行符。 run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。 inherit 規定應該從父元素繼承 display 屬性的值。
2、使用visibility:hidden來隱藏內容【推薦:《css視頻教程》】
visibility:hidden和display:none可以隱藏的內容幾乎一樣,但唯一區別是它雖然隱藏了內容,但被隱藏掉的內容仍舊占據空間,這段隱藏了內容卻保留空間的位置會在網頁中顯示為空白。
<p style="visibility:hidden;">我占了地兒,你也看不見我;</p>
值 描述 visible 默認值。元素是可見的。 hidden 元素是不可見的。 collapse 當在表格元素中使用時,此值可刪除一行或一列,但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 "hidden"。 inherit 規定應該從父元素繼承 visibility 屬性的值。
3、使用overflow:hidden隱藏溢出內容
overflow:hidden這種方式可以隱藏掉固定區域外的內容,它可以有效控制顯示區域。但應注意,使用它時需要給它定義寬度和高度,否則會無效。
<p style="width:120px; height:20px; overflow:hidden;">我占的地兒太多了你就看不見我的尾巴了。。。。。</p>
overflow用法中存在一個分支,overflow-x:hidden和overflow-y:hidden,x是橫向范圍,y是縱向范圍,這兩個屬性經常用在需要隱藏滾動條時。
值 | 描述 |
---|---|
visible | 默認值。內容不會被修剪,會呈現在元素框之外。 |
hidden | 內容會被修剪,并且其余內容是不可見的。 |
scroll | 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。 |
auto | 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
以上是“css中隱藏命令有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。