返回顶部
首页 > 资讯 > 前端开发 > html >CSS中用于隐藏的属性是哪个
  • 766
分享到

CSS中用于隐藏的属性是哪个

2024-04-02 19:04:59 766人浏览 八月长安
摘要

这篇文章主要介绍“CSS中用于隐藏的属性是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中用于隐藏的属性是哪个”文章能帮助大家解决问题。

这篇文章主要介绍“CSS中用于隐藏的属性是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中用于隐藏的属性是哪个”文章能帮助大家解决问题。

用于隐藏的3个属性:1、visibility,当属性值为“hidden”时,可占位置的隐藏元素本身;2、display,当值为“none”,可不占位置的隐藏元素本身;3、overflow,当值为“hidden”时,可隐藏超出盒子的内容部分。

教程操作环境:windows7系统、css3&&HTML5版、Dell G3电脑。

CSS中用于隐藏的属性和值

  • visibility:hidden 隐藏元素本身,并且在网页中 占位置

  • display:none 隐藏元素本身,并且在网页中 不占位置 (常用)

  • overflow:hidden 隐藏超出盒子的内容部分(超出的内容隐藏但不占位)

示例1:display:none 不占位置 隐藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta Http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隐藏元素</title>
    <style>
      * {
        
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        float: left;
        background-color: orange;
        margin: 50px 50px;
        
        display: block;
      }
      
      .box1:hover {
        display: none;
      }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>box1</p>
      <p>display: none;</p>
    </div>

    <div>普通</div>
  </body>
</html>

CSS中用于隐藏的属性是哪个

示例2:visibility:hidden, 占位置 隐藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隐藏元素</title>
    <style>
      * {
        
        padding: 0;
        margin: 0;
      }

      .box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px 50px;
        
      }
   
  .box2:hover {
  visibility: hidden;
  }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
      }
    </style>
  </head>
  <body>

    <div>
      <p>box2</p>
      <p>
        visibility: hidden; <br />
      </p>
    </div>

    <div>普通</div>
  </body>
</html>

CSS中用于隐藏的属性是哪个

示例3:overflow:hidden 隐藏超出盒子的内容部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隐藏元素</title>
    <style>
      * {
        
        padding: 0;
        margin: 0;
      }
      .box3 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
 
       
      }
      .box4 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px 50px;
overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <p>box3</p>
      <p>
        内容超出了
      </p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
      <p>我敲多行~</p>
    </div>
    <div>
<p>box4</p>
<p>
  overflow: hidden;<br />内容超出,超出部分隐藏
</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
</div>
  </body>
</html>

CSS中用于隐藏的属性是哪个

关于“CSS中用于隐藏的属性是哪个”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网html频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: CSS中用于隐藏的属性是哪个

本文链接: https://lsjlt.com/news/97824.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS中用于隐藏的属性是哪个
    这篇文章主要介绍“CSS中用于隐藏的属性是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中用于隐藏的属性是哪个”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • html中隐藏属性是哪个
    这篇文章主要介绍了html中隐藏属性是哪个,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html隐藏属性是hidden,该属性是布尔属性;hidden属性可用于防止用户查看元...
    99+
    2023-06-14
  • css隐藏文字的属性是什么
    这篇文章主要介绍了css隐藏文字的属性是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css隐藏文字的属性是什么文章都会有所收获,下面我们一起来看看吧。首先创建一个html文件。在html文件中添加html...
    99+
    2023-07-04
  • html和css隐藏元素的属性是什么
    这篇文章给大家分享的是有关html和css隐藏元素的属性是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   display: none   1、DOM结构: 浏览器不会...
    99+
    2024-04-02
  • html中隐藏属性指的是什么
    这篇文章将为大家详细讲解有关html中隐藏属性指的是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html的隐藏属性是“hidden”。hidden属性规定对元素进行隐藏,设置了该属性的标签元素会被隐...
    99+
    2023-06-15
  • css中哪个属性是伪类
    这篇文章主要介绍了css中哪个属性是伪类,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css中的伪类是用来定义元素的特殊状态的,它可以用于设置鼠标悬停在元素上时的样式,设置元...
    99+
    2023-06-15
  • css中上边距的属性是哪个
    今天小编给大家分享一下css中上边距的属性是哪个的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • jsp隐藏标签的属性有哪些
    jsp隐藏标签的属性有以下几种:1. id属性:用于指定标签的唯一标识符。2. class属性:用于指定标签的类名,可以用于CSS样...
    99+
    2023-09-13
    jsp
  • css背景属性是哪个
    这篇文章给大家分享的是有关css背景属性是哪个的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   CSS多背景属性用于一次添加一个或多个图像而不使用HTML代码。我们可以根据我...
    99+
    2024-04-02
  • html隐藏属性的使用方法
    小编给大家分享一下html隐藏属性的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而...
    99+
    2023-06-14
  • css中的图片翻转属性是哪一个
    小编给大家分享一下css中的图片翻转属性是哪一个,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css中的图片翻转属性是transform。transform属性应...
    99+
    2023-06-06
  • CSS中元素的浮动用哪个属性
    这篇文章主要介绍CSS中元素的浮动用哪个属性,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!CSS中元素的浮动用float属性。float属性用于定义元素在哪个方向浮动;元素使用了float属性后,可以使该元素脱离标准...
    99+
    2023-06-14
  • css段落缩进属性是哪个
    这篇文章主要介绍了css段落缩进属性是哪个,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css段落缩进属性是“text-indent”。css text-indent属性用于...
    99+
    2023-06-06
  • css中设置段落缩进的属性是哪个
    这篇文章给大家分享的是有关css中设置段落缩进的属性是哪个的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css中设置段落缩进的属性是“text-indent”,语法格式“text-indent:length|%;...
    99+
    2023-06-14
  • css中用于清除浮动的属性是什么
    本文小编为大家详细介绍“css中用于清除浮动的属性是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“css中用于清除浮动的属性是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识...
    99+
    2024-04-02
  • css底部双描边的属性是哪个
    今天小编给大家分享一下css底部双描边的属性是哪个的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2024-04-02
  • CSS3中的隐藏特性有哪些
    这篇文章主要介绍“CSS3中的隐藏特性有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3中的隐藏特性有哪些”文章能帮助大家解决问题。 CSS3为web设...
    99+
    2024-04-02
  • css属性中float属性的作用是什么
    本教程操作环境:Windows10系统、CSS3版、DELL G3电脑css属性中float属性的作用是什么?float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元...
    99+
    2023-05-14
    float css
  • 怎么使用CSS布局属性控制元素的隐藏与显示
    今天小编给大家分享一下怎么使用CSS布局属性控制元素的隐藏与显示的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2024-04-02
  • css实现旋转45度的属性是哪个
    小编给大家分享一下css实现旋转45度的属性是哪个,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! c...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作