ホームページ > 記事 > ウェブフロントエンド > CSS レイアウト プロパティは要素の非表示と表示を制御します
この記事では、css に関する関連知識を提供します。主に、表示、可視性、オーバーフロー、不透明度など、要素の表示と非表示に関連する問題を紹介します。一緒にそれについて話しましょう。それがみんなに役立つことを願っています。
(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)
CSS で提供要素を表示または非表示にできるプロパティは、display、visibility、overflow、および opacity です。
display 属性は、要素の表示方法を設定するために使用されます。
表示: なし; 非表示オブジェクト
表示: ブロック; ブロックレベルの要素に変換することに加えて、要素を表示することも意味します。
#表示によって要素が非表示になると、要素は元の位置を占めなくなります
例は次のとおりです。次のとおりです:
display 属性は、要素の表示方法を設定するために使用されます。display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有显示元素的意思。機能: 表示要素が非表示になると、
は元の位置 を占めなくなります。 (人がいなくなると、お金もなくなります)
後者は非常に広く使用されており、JS とともに使用して多くの Web ページの特殊効果を作成できます。 例:nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .peppa { /* display: none; */ display: block; width: 200px; height: 200px; background-color: pink; } .george { width: 200px; height: 200px; background-color: skyblue; } </style> <div>佩奇</div> <div>乔治</div>
要素を非表示にした後の可視性、引き続き元の位置 を占めます。
非表示要素が元の位置を必要としない場合は、visibility: hiddenを使用します。非表示要素が元の位置を必要としない場合は、display:noneを使用します。可視性属性は、要素を表示するか非表示にするかを指定するために使用されます。3.overflow overflow
#overflow: スクロール; コンテンツを超過したかどうかに関係なく、スクロール バーは常に表示されます。
#overflow: auto; スクロール バーは指定された制限を超えて表示され、スクロール バーは表示されません指定された制限を超えていない場合。
配置されたボックスがある場合は、冗長な部分が非表示になるため、overflow:hidden を使用する場合は注意してください。
#概要は次のとおりです:
属性値
visible | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hidden | ||||||||||||
scroll | ||||||||||||
auto | ||||||||||||
示例: nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> .peppa{ /* overflow: visible; */ /* overflow: hidden; */ /* scroll 溢出的部分显示滚动条,不溢出也显示滚动条 */ /* overflow: scroll; */ /* auto溢出的时候才显示滚动条,不溢出不显示滚动条 */ overflow: auto; width: 200px; height: 200px; border: 3px solid pink; margin: 100px auto; } </style> <div> 《小猪佩奇》(Peppa Pig)是英国动画公司Astley Baker Davies与Entertainment One制作的原创欧洲儿童系列电视动画 [11] [13] ,由内维尔·阿斯特利、马克·贝克、菲尔·霍尔与乔里斯·范胡尔岑执导 [14] ,于2004年5月31日在英国电视五台首播 [15] ,2015年6月,《小猪佩奇》引进中国大陆,并在中央电视台少儿频道首播 [17] </div> 4.opacity 元素整体透明度opacity属性让其元素整体(包括内容)一起透明。 用法:opacity:属性值; 属性值取值:0~1之间的数字, 1表示完全不透明,0表示完全透明。
opacity会让元素整体透明(包括内容、文字、子元素) 5. 元素的显示与隐藏小结
|
以上がCSS レイアウト プロパティは要素の非表示と表示を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。