CSS layout properties control the hiding and display of elements

This article brings you relevant knowledge about css, which mainly introduces issues related to the display and hiding of elements, including display, visibility, overflow and opacity. Let’s talk about it together. Take a look, hope it helps everyone.

(Learning video sharing: css video tutorial, html video tutorial)

Provided in CSS Some properties that can make elements show and hide are display, visibility, overflow, and opacity.

1.display attribute

The display attribute is used to set how an element is displayed.

Display: none; Hidden object

Display: block; In addition to converting to block-level elements, it also means to display elements.

After display hides the element, it no longer occupies the original position

The example is as follows:

The display attribute is used to set how an element should be displayed.

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

Features: After the display element is hidden, no longer occupies its original position. (When the people are gone, the money is gone)

The latter is extremely widely used and can be used with JS to create a lot of web page special effects.

Example:

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

Features:visibility after hiding the element , continue to occupy the original position.

If the hidden element does not want its original position, use visibility: hidden

If the hidden element does not want its original position, use display:none

The visibility attribute is used to specify a Should the element be visible or hidden.

• visibility: visible; the element is visible

• visibility: hidden; the element is hidden

visibilityAfter hiding the element, continue to occupy the original position

3.overflow overflow

The overflow attribute is specified What happens if content overflows an element's bounding box (beyond its specified height and width).

• overflow: visible; does not cut content or add scroll bars

• ##overflow: hidden; Do not display content that exceeds the object size, and hide the excess part.

• overflow: scroll; regardless of whether the content is exceeded or not, the scroll bar is always displayed.

• overflow: auto; the scroll bar will be displayed beyond the specified limit, and the scroll bar will not be displayed if it does not exceed the specified limit.

Under normal circumstances, overflowing content is not allowed to be displayed, because the outgoing part will affect the layout.

If there are positioned boxes, please use overflow:hidden with caution because it will hide the redundant parts.

The summary is as follows:

Attribute valueDescriptionDoes not cut content or add scroll barsDo not display content that exceeds the object size, and hide the excess part.Always display regardless of whether the content exceeds or not Scroll barThe scroll bar will be displayed automatically if it exceeds the limit, and the scroll bar will not be displayed if it does not exceed the limit

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
• 但是如果有定位的盒子， 请慎用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. 元素的显示与隐藏小结

visible
hidden
scroll
auto

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

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

The above is the detailed content of CSS layout properties control the hiding and display of elements. For more information, please follow other related articles on the PHP Chinese website!