这是我参与【第五届青训营】伴学笔记创作活动的第二天。今天我们了解到的是CSS（Cascading Style Sheets）的相关知识。
在页面中使用CSS的方式
1.外部链入
link rel="stylesheet" href="style.css"
2.嵌入
使用<style>标签
3.内联
直接写入style属性到标签中，一般不推荐
CSS选择器
标签选择器：标签选择器会选择页面上所有的这个标签的元素，选择同类标签
类选择器：可以多个标签归类，使用同一个class，可以复用。 格式：.class的名称{}
ID选择器：id必须保证全局唯一，同类选择器类似。 格式：#id名称{}
通配选择器：适应于全局。格式：*{}
属性选择器：格式：[属性名]{}
伪类：不基于标签和属性定位元素
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul < li）
5.后代选择器（li a）
6.伪类选择（a:hover,li:nth-child）
注意：!important的优先级是最高的，但出现冲突时则需比较"四位数"; 优先级相同时，则采用就近原则，选择最后出现的样式; 继承得来的属性，其优先级最低。
调试CSS
- 右击点击页面，选择【检查】
- 使用快捷键
CTRL+shift+I（Windows）
cmd+opt+I（Mac）
布局（layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算。
布局的相关技术
- 常规流：行级、块级、表格布局、Flexbox、Grid布局
块级元素：不和其他盒子并列摆放，适用于所有的盒模型属性
行级元素：和其他行级盒子一起放在一行或者拆开成多行，盒模型中的width、height不适用 - 浮动:float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
- 绝对定位:设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
