Rumah hujung hadapan web Soal Jawab bahagian hadapan css中隐藏的是什么命令

css中隐藏的是什么命令

Feb 28, 2021 am 11:53 AM
css

css中隐藏命令有三种,分别是:1、使用“display:none”来不占位置的隐藏所有内容;2、使用“visibility:hidden”来占位置的隐藏内容;3、使用“overflow:hidden”隐藏溢出内容。

css中隐藏的是什么命令

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS中隐藏内容的3种方法及属性值 

在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法:

1、使用display:none来隐藏所有内容

display:none可以让网页中所有内容不显示,如代码、文字、链接、图片、p层,是推荐的内容隐藏方式。

<p style="display:none;">我不占地儿,你看不见我;</p>
Salin selepas log masuk
描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
run-in此元素会根据上下文作为块级元素或内联元素显示。
inherit规定应该从父元素继承 display 属性的值。

2、使用visibility:hidden来隐藏内容

visibility:hidden和display:none可以隐藏的内容几乎一样,但唯一区别是它虽然隐藏了内容,但被隐藏掉的内容仍旧占据空间,这段隐藏了内容却保留空间的位置会在网页中显示为空白。

<p style="visibility:hidden;">我占了地儿,你也看不见我;</p>
Salin selepas log masuk
描述
visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit规定应该从父元素继承 visibility 属性的值。

3、使用overflow:hidden隐藏溢出内容

overflow:hidden这种方式可以隐藏掉固定区域外的内容,它可以有效控制显示区域。但应注意,使用它时需要给它定义宽度和高度,否则会无效

<p style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</p>
Salin selepas log masuk

overflow用法中存在一个分支,overflow-x:hidden和overflow-y:hidden,x是横向范围,y是纵向范围,这两个属性经常用在需要隐藏滚动条时。

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

    【推荐:《css视频教程》】

Atas ialah kandungan terperinci css中隐藏的是什么命令. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah maksud pemegang tempat dalam vue Apakah maksud pemegang tempat dalam vue May 07, 2024 am 09:57 AM

Apakah maksud pemegang tempat dalam vue

Bagaimana untuk menulis ruang dalam vue Bagaimana untuk menulis ruang dalam vue Apr 30, 2024 am 05:42 AM

Bagaimana untuk menulis ruang dalam vue

Bagaimana untuk mendapatkan dom dalam vue Bagaimana untuk mendapatkan dom dalam vue Apr 30, 2024 am 05:36 AM

Bagaimana untuk mendapatkan dom dalam vue

Apakah maksud span dalam js Apakah maksud span dalam js May 06, 2024 am 11:42 AM

Apakah maksud span dalam js

Apakah maksud rem dalam js Apakah maksud rem dalam js May 06, 2024 am 11:30 AM

Apakah maksud rem dalam js

Bagaimana untuk memperkenalkan imej ke dalam vue Bagaimana untuk memperkenalkan imej ke dalam vue May 02, 2024 pm 10:48 PM

Bagaimana untuk memperkenalkan imej ke dalam vue

Apakah fungsi tag span Apakah fungsi tag span Apr 30, 2024 pm 01:54 PM

Apakah fungsi tag span

Dalam bahasa apakah pemalam penyemak imbas ditulis? Dalam bahasa apakah pemalam penyemak imbas ditulis? May 08, 2024 pm 09:36 PM

Dalam bahasa apakah pemalam penyemak imbas ditulis?

See all articles