CSS攻略

前言

学习游戏网站：

flex学习：

Flexbox Froggy - A game for learning CSS flexbox (codepip.com)

Grid Garden - 一个用来学CSS grid的游戏 (codepip.com)

---

50 days 50projects

Day1

1.CSS中class的“.“连着写的含义 

CSS中class的“.“连着写的含义_css标签和类名同时写-CSDN博客

2.@media

//当屏幕小于480px时就执行
@media screen and (max-width: 480px) {
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

带你彻底弄懂nth-of-type与nth-child的区别 - 知乎 (zhihu.com)（child管你啥类型，只要是兄弟孩子我都数）

 Day2

1.css变量

:root css变量教程 - 简书 (jianshu.com)

Day3

1.css里的符号

CSS 中 >、~、+ 、空格、逗号的用法 - 知乎 (zhihu.com)

CSS特性

特性一：继承性

子标签可以继承父标签的样式

拓展：哪些属性可以被继承？

特性二：层叠式

比如一个标签有多个样式，而这些样式若冲突了话，此时应该选择哪一个呢？

根据选择器的优先级，但是若优先级相等的情况下，后面的会覆盖前面的样式。

所谓层叠性是指多种CSS样式的叠加，也就是说后面设置的样式会层叠（覆盖）之前的样式， 层叠性的前提是CSS的选择器的优先级相同

特性三：优先级

!important > 行内样式 >id选择器 > 属性/伪类/类选择器 > 标签 > 全局选择器

---

隐藏元素的方法

法一：display:none;    设置为不展示，不占据原位置

法二：opacity:0%;       设置不透明度为0，占据原位置

法三：visibility:hidden;   设置为隐藏，一种不可见的状态，占据原位置

法四：clip-path:           裁剪

---

px和rem的区别

px是绝对单位，是多少就是多少。

rem是相对单位，是相对于html的根结点的font-size的值而言的，响应式布局。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

---

重绘与重排

重排(回流)就是布局引擎根据所有样式计算盒模型在页面上的大小和位置。

重绘就是在计算完成后，浏览器根据每个盒模型的特性进行重新绘制。

浏览器的渲染机制：

若只修改了dom元素的样式，例如color，就只涉及到重绘。

插件

内置实时查看

ctrl+shift+V打开

遇到preview on web server Access Error: 404，就把上面的端口改为其他的（原来是8080）

配置clg

vscode 如何快速敲出 console.log()_如何在vscode直接打印consol-CSDN博客