css需要特别注意点

最新推荐文章于 2026-07-07 17:43:22 发布

原创最新推荐文章于 2026-07-07 17:43:22 发布 · 258 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习记录

当前文章被收录于：

前端学习记录

75 篇文章 0 人学习

前端学习记录

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了CSS中display和visibility属性的区别，display:none会完全隐藏元素且不占空间，而visibility:hidden则保持元素占据的空间但不可见。此外，还探讨了position属性，包括static、relative、fixed、absolute和sticky等定位方式的用法。通过实例展示了如何使用CSS实现动态背景颜色变化的动画效果。

（1）CSS Display/Visibility 属性

属性	描述
display	display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中
visibility	可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

属性

描述

display

display 属性设置为 none 可以隐藏元素。该元素将被隐藏，

并且页面将显示为好像该元素不在其中

visibility

可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

（2）position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。

序号	属性	描述
1	static	默认，不会以任何特殊方式定位；它始终根据页面的正常流进行定位，所以left right bottom top都不生效
2	sticky	元素根据用户的滚动位置进行定位

（3）动画效果展示

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
      width: 200px;
      height: 200px;
      background: red;
      animation: mymove 3s infinite;
}

@keyframes mymove {
     0% {background-color: red;border-radius:10px;}
     25% {background-color: green;border-radius:20px;}
     50% {background-color: blue;border-radius:60px;}
     100% {background-color:orange; border-radius:150px; }
}
</style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

标签

#css