CSS学习记录与知识梳理

由于现在工作中前后端都要自己写，用Springboot+React进行前后端分离的项目开发，在react学习和使用中，不免与css样式更多的打交道，所以重新系统再学习一下CSS的知识，记录一些忘了或者以前不知道的东西

1.多重样式优先级
一般情况下:

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.链接（link）状态与样式设置

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
//顺序规则：a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

3.隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

4.CSS Position(定位)
position 属性的五个值：static 、relative、fixed、absolute、sticky
position: sticky; 基于用户的滚动位置来定位。指定 top, right, bottom 或 left 四个阈值其中之一，表现为在跨越特定阈值前为相对定位，之后为固定定位。
①
5.CSS Overflow
注意:overflow 属性只工作于指定高度的块元素上。

6.响应式web设计
①viewpoint
②响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
③媒体查询

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}