Home >Web Front-end >CSS Tutorial >What is the hidden code in css3
What is the hidden code in css3
- WBOYOriginal
- 2021-12-16 11:44:592408browse
Code: 1. "display:none", which can hide the element without occupying the original position; 2. "visibility:hidden", which can hide the element by occupying the original position; 3. "overflow:hidden", which exceeds The element is hidden when the element is framed; 4. "opacity:0" can make the element transparently hidden.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the css3 show-hide special effect code
In css, there are four methods to set the element hiding effect.
1. The display attribute can be set to hide the element without occupying its original position.
The display attribute specifies the type of box that the element should generate. This element will not be displayed when the attribute value is none.
The example is as follows:
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>Output result:
##2. The visibility attribute can set the element to occupy the original position and hide it
The visibility attribute specifies whether the element is visible. This property specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible. The value collapse is used in tables to remove columns or rows from the table layout. The example is as follows:<html>
<head>
<style type="text/css">
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}
</style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>
</html>Output result:
The overflow attribute specifies what happens when content overflows the element box. When the attribute value is hidden, the content is trimmed and the remaining content is invisible.
The example is as follows:
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>Output result:
##4. The opacity can be set to transparently hide the element
The opacity attribute sets the opacity level of an element.
The example is as follows:<html>
<head>
<style>
.div1{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
.div2{
opacity:0;
}
</style>
</head>
<body>
<div class="div1">本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
<div class="div2">本元素的不透明度是 0。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>Output result:
(Learning video sharing: 
css video tutorial
The above is the detailed content of What is the hidden code in css3. For more information, please follow other related articles on the PHP Chinese website!