这是我参与「第五届青训营 」伴学笔记创作活动的第2天
css是什么？
- CSS（Cascading Style Sheets）:用来定义页面元素的样式。
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
css选择器
- 通配选择器
<stlye>
*{ 属性值； }
</stlye>`
通配符选择器会给所有的标签添加样式
- 标签选择器
<stlye>
标签名{ 属性值； }
</stlye>
给某一类标签统一添加样式
- 属性选择器
<style>
.color(属性名){
color="red"；
}
<li class="color">红色<li>
</style>
1.口诀：样式点定义，结构类使用，开发最常用。 2.可以多类名使用，在class属性中写多个类名，多个类名之间用空格隔开。
- id选择器
<style>
#id名称{
属性值;
}
</style>
<div id="id名称"></div>
口诀：样式#定义；结构id调用，只能调一次，别人勿使用。
- 伪类选择器
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。 :link 访问前的样式（只能给a标签） :visited 访问后的样式（只能给a标签） :hover 鼠标移入时的样式（可以给所有标签） :active 鼠标按下时的样式（可以给所有标签） 如果四个伪类都生效，顺序为：L V H A
- 伪元素选择器
div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素
- 子元素选择器
元素1>元素2{
样式
}
只选择作为某元素最近的一级子元素，则改变元素1中最近元素2的样式
- 并集选择器
元素1，元素2{
样式；
}
选择元素1和元素2（中间用，隔开）改变样式。
- 后代选择器
<style>
元素1 元素2
{
样式
}
</style>
最终改变的父元素1中子元素2的样式,元素1和元素2用空格隔开。
css三大特性
1.层叠性
所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠 简述就是"后来者居上" 2.继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。 3.优先级 选择器相同，优先级相同 如果选择器不同，则出现优先级的问题，考虑权重
选择器权重
| 选择器 | 选择器权重 |
|---|---|
| 继承或者通配 | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| id选则器 | 0，0，1，0 |
| 行内样式最高 | 1，0，0，0 |
权重特性：
- 1.!important 在指定的选择器后加 !important 则此时权重最高。
- 2.继承的权重是0，如果该元素没有直接选中，不管父选择器权重多高，子元素的权重都是0。
- 3.选择器由四位组成，不会进位。
- 4.等级判断从左向右，如果某一位数值相同，则判断下一位。
- 5.如果权重相同，则根据层叠性 就近原则。
块状元素，行内元素，行内块元素
常见的行内元素
<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>块级元素<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>行内块元素<a> ,<abbr>表示一个缩写形式,<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本<label> ,<q>,<samp>定义样本文本<select>,<small>,<span>组合文档中的行内元素<strong>,<textarea>多行的文本输入控件<tt>打字机或者等宽的文本效果<var>定义变量`
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
浮动
普通流（标准流）
块级元素会独占一行，从上向下顺序排列 行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行 浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示，让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段 浮动最早是用来控制图片，实现文字环绕图片的效果 可以实现盒子的左右对齐等等。
语法：
选择器 { float: 属性值（right/left/none）; }
定位
它有两部分组成：
定位 = 定位模式 + 边偏移量
偏移
简单说， 我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词top/bottom/left/right） 偏移量是相对父级元素方向边线的偏移量。
定位模式 (position)
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值|语义 |是否脱标占有位置|移动位置基准|模式转换（行内块）|使用情况|
|--|--|--|--|--|--|--|--|
| static | 静态定位 |不脱标，正常模式|正常模式|不能|几乎不用|
|relative|相对定位|不脱标，占有位置|相对自身位置移动|不能|基本单独使用|
|absolute|绝对定位|完全脱标，不占有位置|相对于定位父级移动位置|能|要和定位父级元素搭配使用|
|fixed|固定定位|完全脱标，不占有位置|相对于浏览器移动位置|能|单独使用，不需要父级|
静态定位(static)
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。 静态定位 按照标准流特性摆放位置，它没有边偏移。
相对定位(relative)
相对定位是元素相对于它 原来在标准流中的位置 来说的。 相对定位的特点： 相对于 自己原来在标准流中位置来移动的 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 绝对定位(absolute)
绝对定位
是元素以父级元素来移动位置 完全脱标 —— 完全不占位置； 父元素没有定位，则以浏览器为准定位（Document 文档）。 父元素要有定位 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位的特点：
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置 不保留原来的位置，完全是脱标的。
定位口诀 —— 子绝父相 子绝父相 —— 子级是绝对定位，父级要用相对定位。
绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？ 分析：
方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
固定定位(fixed)
固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
完全脱标 —— 完全不占位置； 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置； 跟父元素没有任何关系；单独使用的， 不随滚动条滚动。 对
网格布局
grid是一个 CSS 所有网格容器的简写属性
- 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas
- 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow
- 间距属性： grid-column-gap 和 grid-row-gap
