这是我参与「第五届青训营 」笔记创作活动的第二天。第二节课的内容与CSS有关，写下这篇笔记算是对之前的一些知识查漏补缺。

第二课重点内容

css 选择器

• css 通配符选择器用来选中 html 中的所有元素

* {
  color: red;
}

• css 标签选择器用来选中 html 中的标签，比如 h1、p、div 等等

h1 {
  color: red;
}

• css id 选择器用来选中 html 中的 id，比如 #title、#content 等等

#title {
  color: red;
}

• css 类选择器用来选中 html 中的类，比如 .title、.content 等等

.title {
  color: red;
}

• 属性选择器通过元素的属性值来选择

[disabled]{
    background: #eee;
    color: #999;
}

input[type="password"]{
    border-color: red;
    color: red;
}

//若以“#”开头则匹配
a[href^="#"]{
    color: #f54767;
    background: 0 center/1em;
}
//若以".jpg”结尾则匹配
a[href$=".jpg"]{
    color: #f54767;
    background: 0 center/1em;
}

• 状态伪类

a:link{
    color:black;
}

a:visited{
    color:black;
}
//输入框聚焦
:fous{
    outline: 2px solid orange;
}

• 结构伪类

//所有li标签中的第一个li标签
li:first-child {
  background-color: red;
}

//所有li标签中的最后一个li标签
li:last-child {
  background-color: red;
}

//所有li标签中的第5个li标签
li:nth-child(5) {
  background-color: red;
}

• 选择器组合：直接组合（AB）、后代组合（A B）、亲子组合（A>B）、兄弟选择器（A~B）、相邻选择器（A+B）...

• css 优先级：!important > 内联样式 > id 选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 浏览器默认样式 > 继承样式。

盒子模型

• html 标签中每个标签都可以看作是一个盒子，盒子模型中包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。

• css 中的 box-sizing: border-box; 属性可以让盒子宽高包括内边距和边框。

布局

• css 块级元素会独占一行，比如 div、p、h1 等等。

• css 行内元素不会独占一行，比如 span、a、strong 等等。

• css 行内块级元素不会独占一行，但是可以设置宽高，比如 img、input 等等。

• flex box布局

• Gird 布局

• 浮动定位

• position属性