这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

CSS是什么？

层叠样式表

是网页的外表，我记得一句话，HTML是网页的骨架，CSS是外表，JS就是网页的灵魂

CSS的写法

就是通过选择器（例如是h1），选择属性(例如color),给个值（例如pink）

    color:white;是条声明
    
    h1{
        color:white; 规则
    }

有三种用法

外链
嵌入
内联

CSS是如何工作的

CSS选择器

1.     标签选择器
2.     类选择器
3.     ID选择器
4.     属性选择器
5.     伪类选择器
   ...

选择器的组合

选择器组

    
//同时选中同时修改


    body,h1,h2,h3{
        margin:0;
        padding:0
    }
    [type="checkbox"],[type="radio"]{
        padding:0
    }

关于选择器的特异度

CSS中的颜色

常用的两个模式 RGB与HSL

CSS 字体的选择

   font-family

使用建议

字体列表最后写上通用字体族
英文字体放在中文字体前面

CSS 字体的大小

     关键字
         small medium large
     长度
         px em
     百分数
         相对于父元素字体大小

了解px、rpx、em、rem、%、vw、vh、vm的区别

    (https://www.cnblogs.com/sumlen/p/12091119.html)

1、px

1）px就是pixel的缩写，意为像素。
2）px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
3）px是我们网页设计常用的单位，也是基本单位。
4）通过px可以设置固定的布局或者元素大小。
5）缺点：没有弹性。

2、rpx

1）rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
2）rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
3）微信小程序规定屏幕的宽度为750rpx。
4）解释：例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx。高度类似

3、em

1）参考物是父元素的font-size，具有继承的特点。
2）如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3）特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
4）1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……

4、rem

1）rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
2）优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

5、%

一般来说就是相对于父元素的：
1）对于普通定位元素就是我们理解的父元素
2）对于position: absolute;的元素是相对于已定位的父元素
3）对于position: fixed;的元素是相对于ViewPort（可视窗口），

6、vw

1）css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px,10vm就是120px，以此类推……
2）举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

7、vh

和vw相似
1）css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那100vh就是1200px，10vh就是120px，以此类推……
2）举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

8、vm

1）css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度2）2）900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
2）兼容性太差 ,不建议使用

继承

某些属性会自动继承其父元素的计算值，一般与字体相关的属性都是可以继承的，一般和盒模型相关的属性都难以继承，比如width和height

初始值

CSS中，每个属性都有一个初始值

background-color 的初始值为transparent

```
margin-left 的初始值为0
```

可以使用initial关键字显式重置为初始值
- ```
  background-color:initial
```

flex布局和grid布局

这两种就都是常规流布局方式，需自行花一定时间查阅文档，不过我感觉还是熟能生巧

浮动与position

CSS学习

在MDN上可以更好的系统的学习CSS [ ](MDN Web Docs (mozilla.org))

理解CSS | 青训营笔记