这是我参与「第四届青训营」笔记创作活动的的第1天

css 全称 Cascading Style Sheets

是用来定义页面的样式

css基础

css标签由选择器Selecter 选择器Property 属性值Value组成

在页面中引用css有三种方法，分别是1.外链，2.嵌入3.内联

选择器可以以组的方式给多个标签设置同一种样式，称为选择器组

常用的选择器Property有颜色-rgb，颜色-hsl,alpha透明度，字体font-family,font-size,line-Height,font,text-align,spacing,text-indent,text-decoration,white-space等。

font-famliy中有通用字体族，是所有浏览器自带的通用字体，一般设置在字体的最后，当其他字体不生效时，保证正常的字体显示。当我们希望用户能使用我们想用的字体时可以使用户下载相应的字体包。调试css有个方便的方法，使用右侧检查，点击需要修改样式的html元素，就可以进行修改了。

当给同一个HTML元素设置不同的css选择器selecter时，如果设置了同一个选择器property，不同的属性值value,发生冲突时，只有一条规则生效，根据的是选择器的特异度的对比，特异度高的选择器中的代码会覆盖特异度低的代码。

如上图应为color:blue生效，因为类选择器的特异性高于标签选择器

某些属性会自动继承其父元素的计算值，除非显式指定一个值

某些属性不会继承，可以在希望继承的属性后设置inherit属性，其后代都可以继承这条属性。

css求值过程都需要经过dom树，是一个复杂的过程。

布局(layout)是确定内容大小和位置的算法根据元素，容器，兄弟节点和内容等信息来计算

css样式的设置都是基于盒子模型，包括内容(height,width),padding,border,margin四个部分

通过设置怪异盒模型可以使盒子的总大小保持在设置的height,width内容大小，无论怎样调整padding,border,margin的值。

前三种排版都局限性较大，为了实现更好的效果，有flex排版和grid排版

flex flex具有更强的弹性

grid 相比于flex，grid具备二维排版的特点

以上是我对css部分的简单总结