首页 前端知识 在HTML和CSS当中运用显示隐藏

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:54 前端知识 前端哥 895 1000 我要收藏

1.显示与隐藏

  1. 盒子显示:display:block;
  2. 盒子隐藏:

    display:none:隐藏该元素并且该元素所占的空间也不存在了。

    visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。

2.圆角边框

在CSS2中添加圆角,我们不得不使用背景图像,在 CSS3中使用border-radius属性将很容易创建圆角。 border-radius属性是一个简写属性,用于设置四个border-radius属性。

语法:

border-radius:top-left top-right bottom-left bottom-right;

可能的值:

  1. 一个值:设置四个角的圆角大小;
  2. 两个值:设置左上和右下 右上和左下的圆角大小;
  3. 三个值:设置左上、右上和左下、右下的圆角大小;
  4. 四个值:设置左上、右上、右下、左下的圆角大小。

 border-radius的值可以是具体的数值也可以是百分比。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            border-radius: 50px ;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: rgb(57, 203, 214);
            border-radius: 50% ;
        }
    </style>
</head>
<body>
     <div class="box1"></div>
     <div class="box2"></div>
</body>
</html>

 

3.Overflow属性

overflow属性规定当内容溢出标签框时的显示方式,包括水平方向和垂直方向。

 overflow-x只包括水平方向。

 overflow-y只包括垂直方向。

可能的值:

  1. visible 默认值。内容不会被修剪,会呈现在标签框之外。
  2. hidden 内容会被修剪,并且其余内容是不可见的。
  3. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  4. auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

注意:overflow属性仅适用于具有指定高度的块元素。

4.透明度属性(opacity,rgba()),透明度兼容

实现透明的CSS方法通常有以下3种方式,以下是不透明度都为80%的写法。

 CSS3的opacity:x,x的取值从0到1,如opacity:0.8;

CSS3 的rgba(red, green,blue,alpha),alpha的取值从0到1,如rgba(255,255,255,0.8) ;

IE专属滤镜 filter:Alpha(opacity=x),x的取值从0到100,如 filter:Alpha(opacity=80)。

1. opacity

1、兼容性:IE6、7 8不支持,IE9及以上版本和标准浏览器都支持。

2、使用说明:设置 opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整不透明度。

2. rgba()

1、兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持。

2、使用说明:设置颜色的不透明度,一般用于调整 background-color、color等的不透明度。 IE6 和部分 IE7 内核的浏览器 ( 如 QQ 浏览器)会读懂 rgba,解析后颜色为透明,其实应该是 null那么使用opacity实现背景透明,文字不透明是可取的。

3.IE 专属滤镜filter:Alpha(opacity=x)

1、兼容性:仅支持IE6、7、8、9,在IE10 版本被废除。

2、使用说明:IE 浏览器专属,问题多,如下:

255,0.8); 在IE6、7中,需要激活IE 的 haslayout 属性(如:*zoom:1 或者 *overflow:hidden),让它读懂 filter:Al-

pha

0)。

在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位可让子元素不透明。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12443.html
标签
贴图
评论
发布的文章

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!