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

本节课的知识要点

掌握CSS各种样式的基础知识
选择器如何使用
如何进行一个布局

CSS是什么

层叠样式表，用来设置结构的样式

如何设置一个CSS样式

Selector{
    Property：Value；
    Property：Value；
    Property：Value；
}

CSS是如何应用到样式中

在浏览器解析HTML文件的时候会将CSS加载到HTML文件中，解析CSS，然后渲染到页面中

在页面中如何使用CSS

主要有三种方式：外链、嵌入还有内联

如何调试CSS

通过浏览器的检查功能进行调试

选择器Selector如何使用

按照标签名（例如span）、类名（.class）或者id(#id)
按照属性Selector[属性名 = '属性值']
按照DOM树中的位置
通配选择器（*）

伪类和伪元素

伪类：不基于标签和属性定位元素（状态性伪类和结构性伪类）
伪元素：用于设置元素指定部分的样式

选择器组合

直接组合 AB
后代组合 A B
父子组合 A>B
兄弟选择器 A~B
相邻选择器 A+B

RGB和HSL

RGB是光学三原色（Red、Green和Blue）
HSL是H（色相）、S（饱和度）和L（亮度）

RGB有三种设置方式

#ffffff （f表示的是每一个色值的十六进制的一个数值）
rgb(red,green,blue)
rgba(red,green,blue,alpha)

HSL设置方式

hsl(hue,saturation,lightness)
hsla(hue,saturation,lightness,alpha)

字体

font-family：f1,f2,f3 （根据先后排序来确定先用什么来展示字体）
如果要使用web字体组，需要使用 @font-face 需要写入font-family和src
font-size 表示的是字体大小
font-weight 表示的是字体粗细
可以通过设置line-height和height对应解决字体不在行内垂直居中的话

选择器的优先级和继承

通过特异度来确定优先级
子元素会继承父元素的样式
注意:一般来说是文字类的会继承，盒模型的一般不会继承

布局

布局是确定内容大小和位置的算法
根据元素、容器、兄弟节点和内容信息来进行计算
相关技术：文档流、浮动（float）和定位（position ）

box model

overflow

可选值：

visible 可见的
hidden 隐藏
scroll 滚动条

块级行级规则

块元素自己独占一行，行内元素和其他行内元素可以放在同一行或者拆开多行
块元素可以调节width和height，行内元素无法调节，行内元素内容多大元素就有多大
块元素：body、article、div、main、section、h1-6、p、ul、li等
行内元素：span、em、strong、cite、code等
可以通过调整样式display来实现块级和行级的转换
- display:block; 以块元素显示
- display:inline; 以行内元素显示
- display:none; 不显示
- display:inline-block; 以行内块元素显示（1、可以调节宽高 2、可以和别的元素并列一行）

flex容器

通过display:flex生成弹性盒子

可以通过flex-direction来控制内容元素的排版方向
justify-content是用来控制盒内元素在弹性盒子内的摆放位置
flex属性flex-grow、flex-shrink和flex-basis

grid布局

通过display:grid生成一个grid容器划分网格

/*通过像素对列和行进行划分*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
/*通过百分比对列和行进行划分*/
grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto;
/*通过自适应设置对列和行进行划分*/
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr;

网格线（grid line）：可以通过浏览器的开发者工具来查看

float浮动

一开始是用来实现文字围绕图片的效果，后面被程序员们用来进行排版，但是由于现在有flex布局，可以使用更加新的技术来实现排版

position定位

static 默认值，不是定位定位、
relative 相对自身原本位置进行偏移，不会脱离文档流
absolute 绝对定位，相对非static祖先元素来进行定位，会脱离文档流且提升一个层级
fixed 固定定位，相对于视口进行一个绝对定位
sticky 粘滞定位当元素到达某一位置时会变成固定定位

通过本次课，我认为CSS需要一个扎实的基础，对各种样式设置要有自己的认识，尤其是对后面布局还有过渡变形动画等，要能够知道在设置样式的过程中怎么样操作才是规范可靠的。要善于使用各种布局来把一般网页中的各种结构实现，给用户带来一个美好的视觉体验。

理解CSS | 青训营笔记