理解CSS | 青训营笔记

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

css的使用

css语法

选择器{
     属性：属性值；
}

css写在哪

内联
```
<h1 style="css语句">
```

头部style标签

 <head>
  <style>
 		css语句
 	</style>
 </head>

外部css文件
```
<link rel="css文件"/>
```

css

css选择器

标签选择器
类选择器
id选择器
通配选择器

同时还可以利用伪类选择器指定选定状态的选择器，利用关系符组合不同类型的选择器达到筛选的效果，还可利用指定语法选择到拥有指定属性值的标签。

css选择器的权重

继承：0.1
标签：1
类：10
id：100
行内：1000
！important语句：无穷大

颜色

rgb（）：三个参数（0~225）
hsl（）：色相/饱和度/亮度
rgba（）/hsla（）：前三个参数同上，最后以各0~1代表透明度

字体

字体族

通过font-family来指定需要使用到的字体，可以指定多个（最好），当前一个字体浏览器无法使用的时候会尝试使用下一个，可以配置一套通用字体符

其他

可以通过font（简写属性），或对应的各各属性来指定字体的大小，粗细，修饰，等

line-height，white-space属性分别可以指定文章中行间距和空格的形式

继承与初始值

大多数属性子元素会继承父元素的相关属性值，如颜色，宽度等。可以通过inherit值来显性的指定继承

部分属性会有一个初始的值，保证每个属性都有值

计算值与使用值不同，计算出来的不一定能够被使用

布局

常规布局

盒子模型：content，padding，border，margin（margin的剪切）

box-sizing：指定盒子大小的计算方式（默认width，height为content的值）

overflow：规定溢出内容如何显示

IFC/BFC：

行级/块级：display：指定元素的形式。（特殊：inline-block 可以指定宽高的行级元素）

理解CSS | 青训营笔记

理解CSS | 青训营笔记

css的使用

css语法

css写在哪

css

css选择器

css选择器的权重

颜色

字体

字体族

其他

继承与初始值

布局

常规布局

浮动（float）

绝对定位

flex-box

grid

总结