CSS レイアウトプロパティは要素の非表示と表示を制御します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS レイアウトプロパティは要素の非表示と表示を制御します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 am 09:28 AM

css

この記事では、css に関する関連知識を提供します。主に、表示、可視性、オーバーフロー、不透明度など、要素の表示と非表示に関連する問題を紹介します。一緒にそれについて話しましょう。それがみんなに役立つことを願っています。

CSS レイアウトプロパティは要素の非表示と表示を制御します

(学習ビデオ共有: css ビデオチュートリアル、html ビデオチュートリアル)

CSS で提供要素を表示または非表示にできるプロパティは、display、visibility、overflow、および opacity です。

1.display 属性

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>

CSS レイアウトプロパティは要素の非表示と表示を制御します

2.visibility 可視性

機能:

要素を非表示にした後の可視性、引き続き元の位置 を占めます。

非表示要素が元の位置を必要としない場合は、visibility: hiddenを使用します。

非表示要素が元の位置を必要としない場合は、display:noneを使用します。

可視性属性は、要素を表示するか非表示にするかを指定するために使用されます。

visibility要素を非表示にした後も、引き続き元の位置を占有します

3.overflow overflow

overflow 属性が指定されている場合、コンテンツが要素の境界ボックスからオーバーフローした場合 (指定された高さと幅を超えた場合) はどうなりますか。

; オブジェクトサイズを超える内容は表示せず、超過した部分を非表示にします。

#overflow: スクロール; コンテンツを超過したかどうかに関係なく、スクロールバーは常に表示されます。

#overflow: auto; スクロールバーは指定された制限を超えて表示され、スクロールバーは表示されません指定された制限を超えていない場合。

配置されたボックスがある場合は、冗長な部分が非表示になるため、overflow:hidden を使用する場合は注意してください。

#概要は次のとおりです:

属性値

説明visibleコンテンツを切り取ったり、スクロールバーを追加したりしませんhiddenオブジェクトサイズを超えるコンテンツは表示せず、超過部分を非表示にします。scroll関係なく常に表示します。コンテンツが超過したかどうかのスクロールバーauto制限を超えた場合はスクロールバーが自動的に表示され、スクロール制限を超えない場合、バーは表示されません

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

示例：

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. 元素的显示与隐藏小结

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围