在HTML和CSS当中运用显示隐藏
1.显示与隐藏
- 盒子显示:display:block;
- 盒子隐藏:
display:none:隐藏该元素并且该元素所占的空间也不存在了。
visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。
2.圆角边框
在CSS2中添加圆角，我们不得不使用背景图像，在 CSS3中使用border-radius属性将很容易创建圆角。 border-radius属性是一个简写属性，用于设置四个border-radius属性。
语法:
border-radius:top-left top-right bottom-left bottom-right;
可能的值:
- 一个值:设置四个角的圆角大小;
- 两个值:设置左上和右下 右上和左下的圆角大小;
- 三个值:设置左上、右上和左下、右下的圆角大小;
- 四个值:设置左上、右上、右下、左下的圆角大小。
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只包括垂直方向。
可能的值:
- visible 默认值。内容不会被修剪，会呈现在标签框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- 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(默认属性)，其子元素为相对定位可让子元素不透明。