HTML、CSS常用知识点

前端

HTML和CSS

1. 隐藏进度条

1.火狐隐藏滚动条
ul{
scrollbar-width: none;
}

2. 谷歌隐藏滚动条，这里最好写在ul样式的下面，我试了写在上面不生效
   ul::-webkit-scrollbar {
   width: 0;
   <!-- display:none; -->
   };

2.隐藏元素

1. opacity：设置一个元素的透明度
   .hide

2. visibility：设置一个元素可见/不可见
   .hide

3. display：设置显示与隐藏（隐藏的元素不占位置）
   .hide

4. position：设置元素位置
   .hide {
   　　position: absolute;
   　　top: -9999px;
   　　left: -9999px;
   }

5. clip-path:
   .hide {
   　　clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
   }

3. 背景充满屏幕 background-size

1. background-size：100% 100%; ---按容器比例撑满，图片变形；

2. background-size：cover; ---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

注意： background-size:这个属性有两个值，第一个值为x轴方向的
缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)

4. 背景透明

1. opacity: x; x的取值为0到1，如opacity: 0.5表示不透明度为50%。
   opacity兼容性：IE6、7、8都不支持，IE9及以上和其他标准的浏览器都支持。但是使用opacity设置元素的不透明度会使其所有后代元素都会随着一起具有透明度，一般都用于调整图片或者模块的整体不透明度。

2. rgba(red,green,blue,alpha); alpha的取值为0到1。
   rgba设置颜色的不透明度，一般都用于调整background-color、color、box-shadow等的不透明度。

3. IE专属滤镜filter:Alpha(opacity=x)，x的取值为0到100，如filter:Alpha(opacity=50)表示不透明度为50%。