这是我参与「第四届青训营 」笔记创作活动的第1天
前言
看完韩志军老师的css课后，发现对其中的一些知识点开始感到模糊。所以在此记下笔记来复习巩固之前的内容。
一、选择器
1.标签选择器
标签选择器很好理解，直接通过标签修改对应html标签的样式。
例如：这样可以直接修改div标签的样式
div {
width: 200px;
height: 200px;
background-color: gray;
}
2.ID选择器
ID选择器，修改的目标则是我们的标签对应的属性。每个id具有唯一性，所以适合修改单个目标的样式。
例如：选择id为rect-1的标签(注意前面需要加#）：
#rect-1 {
width: 200px;
height: 200px;
background-color: gray;
}
3.类选择器
类选择器，顾名思义就是修改一类样式。只要标签带上对应的类名，都可以修改样式，比起id选择器具有更广的适应性。
例如：选择所有rectangle类的标签：
.rectangle {
width: 200px;
height: 200px;
background-color: gray;
}
4.伪类选择器
CSS伪类是用来添加一些选择器的特殊效果，例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
链接伪类选择器
:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式
位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。
目标伪类选择器：
:target：当url指向该元素时生效。
5.复合选择器
由两个及以上基础选择器组合而成的选择器。（缝合怪了属于是）
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。
6.通配符选择器
*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签
7.伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容
8.样式渲染优先级
权重大小，越具体的选择器权重越大：
!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式
继承自父元素的权重最低
二、布局模式
块布局
块布局：用来布置文件。块布局包含以文档为中心的功能。
主要实现方式是用浮动来完成。
float
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
由于float意味着使用块布局，它在某些情况下修改display值的计算值：
display为inline或inline-block时，使用float后会统一变成block。
取值：
left：清除左侧浮动。
right：清除右侧浮动。
both：清除左右两侧浮动
定位布局
定位布局：用来对那些与其他元素无交互的定位元素进行布置。
position
CSS position属性用于指定一个元素在文档中的定位方式。
定位类型：
取值：
static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。
absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
弹性盒子布局
弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。
flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
flex-direction
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
取值：
row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。
column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse：表现和column相同，但是置换了主轴起点和主轴终点
flex-wrap
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
取值：
nowrap：默认值。不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow
CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。
justify-content
CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
网格布局
网格布局：用来布置那些与一个固定网格相关的元素。
CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。
举例：
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
.wrapper {
width: 1000px;
height: 1000px;
background-color: goldenrod;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
border:1px solid black;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
border: 1px, solid;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
border:1px solid black;
}
.four {
grid-column: 3;
grid-row: 3;
border:1px solid black;
}
.five {
grid-column: 2;
grid-row: 4;
border:1px solid black;
}
.six {
grid-column: 3;
grid-row: 4;
border:1px solid black;
}
