ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS レイアウト プロパティは要素の非表示と表示を制御します

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

WBOY
WBOY転載
2022-08-03 09:28:472317ブラウズ

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

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

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

CSS で提供要素を表示または非表示にできるプロパティは、displayvisibilityoverflow、および 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: 表示; 要素は表示されます
  • visibility: hidden; 要素は非表示です

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

3.overflow overflow

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

    オーバーフロー: 表示; コンテンツの切り取りやスクロール バーの追加は行われません

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

#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>

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

4.opacity 元素整体透明度

opacity属性让其元素整体(包括内容)一起透明。

用法:opacity:属性值;

属性值取值:0~1之间的数字, 1表示完全不透明,0表示完全透明。

  

opacity会让元素整体透明(包括内容、文字、子元素)

5. 元素的显示与隐藏小结

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

(学习视频分享:css视频教程html视频教程

以上がCSS レイアウト プロパティは要素の非表示と表示を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。