CSS 레이아웃 속성은 요소의 숨기기 및 표시를 제어합니다.

이 글은 css에 대한 관련 지식을 제공합니다. 표시, 가시성, 오버플로, 불투명도 등 요소의 표시 및 숨기기와 관련된 문제를 주로 소개합니다. 모두에게 도움이 되기를 바랍니다. . 도움이 되는.

(학습 비디오 공유: css 비디오 튜토리얼, html 비디오 튜토리얼)

CSS는 요소를 표시하고 숨길 수 있는 몇 가지 속성, 즉 display, visibility, overflow 및 을 제공합니다. 불투명.

1.display 속성

display 속성은 요소가 표시되는 방식을 설정하는 데 사용됩니다.

          디스플레이: 없음; 숨겨진 개체

            디스플레이: 블록 수준 요소로 변환하는 것 외에도 요소를 표시한다는 의미도 있습니다.

요소를 숨긴 후 디스플레이가 더 이상 원래 위치를 차지하지 않습니다.

예는 다음과 같습니다.

display 속성은 요소가 표시되는 방식을 설정하는 데 사용됩니다.

display: none 隐藏对象
 
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

특징: 디스플레이 요소를 숨긴 후 더 이상 원래 위치를 차지하지 않습니다 . (사람이 사라지면 돈도 사라집니다)

후자의 응용 프로그램은 매우 광범위하며 JS와 함께 사용하여 많은 웹 페이지 특수 효과를 만들 수 있습니다.

예:

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>

2.visibility Visibility

특징: visibility 요소를 숨긴 후에도 계속 원래 위치를 차지합니다.

숨겨진 요소가 원래 위치를 원하지 않으면 visible:hidden을 사용하세요.

숨겨진 요소가 원래 위치를 원하지 않으면 display:none을 사용하세요.

visibility 속성은 요소가 표시되어야 하는지 또는 표시되어야 하는지를 지정하는 데 사용됩니다. 숨겨진.

• visibility: 표시됨, 요소가 표시됨

• visibility: 숨김, 요소가 숨겨짐

visibility 요소를 숨긴 후에도 계속 원래 위치를 차지함

3.overflow Overflow

오버플로 속성은 콘텐츠가 요소의 경계 상자(지정된 높이와 너비를 넘어)에서 오버플로되는 경우 어떻게 되는지 지정합니다.

• overflow: visible; 내용을 자르거나 스크롤 막대를 추가하지 않습니다.

• overflow: hided;

• overflow: 스크롤; 콘텐츠 초과 여부에 관계없이 스크롤 막대가 항상 표시됩니다.

• overflow: auto; 지정된 제한을 초과하면 스크롤 막대가 표시되고, 지정된 제한을 초과하지 않으면 스크롤 막대가 표시되지 않습니다.

정상적인 상황에서는 나가는 부분이 레이아웃에 영향을 미치기 때문에 넘치는 콘텐츠를 표시하는 것이 허용되지 않습니다.

배치된 상자가 있는 경우 중복된 부분을 숨길 수 있으므로 Overflow:hidden을 주의해서 사용하세요.

는 다음과 같이 요약됩니다.

속성 값	Description
visible	콘텐츠를 자르거나 스크롤 막대를 추가하지 않습니다
숨김	표시하지 않음 개체 이상 크기의 내용에 대해 초과 부분은 숨겨집니다
scroll	내용의 초과 여부에 관계없이 항상 스크롤 막대가 표시됩니다
auto	The 내용 초과시 스크롤바가 자동으로 표시되고, 내용 초과시 스크롤바가 표시되지 않습니다

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用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. 保证盒子里面的内容不会超出该盒子范围

（学习视频分享：css视频教程、html视频教程）

위 내용은 CSS 레이아웃 속성은 요소의 숨기기 및 표시를 제어합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!