【CSS】基础篇02——浮动、标准流、定位、CSS精灵、字体图标

黑马程序员视频地址：

前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70

目录

标准流

浮动（不推荐）

清除浮动

Flex布局（推荐）

初识

总结

创建flex容器 display:flex

主轴对齐方式 justify-content

侧轴对齐方式 align-items

修改主轴方向 flex-direction

弹性伸缩比 flex

弹性盒子换行 flex-wrap

行对齐方式 align-content

定位

分类 

相对定位 relative

绝对定位 absolute

固定定位 fixed

堆叠层级 z-index

高级技巧

CSS精灵

字体图标

下载字体

使用字体

上传矢量图

CSS修饰属性

垂直对齐方式 vertical-align

过渡 transition

透明度 opacity

光标类型 cursor

网站搭建

项目目录

准备工作

SEO

favicon图标

---

标准流

---

浮动（不推荐）

---

清除浮动

方法三中的before伪元素是为了解决外边距塌陷问题

---

Flex布局（推荐）

初识

---

总结

---

 创建flex容器 display:flex

---

主轴对齐方式 justify-content

---

侧轴对齐方式 align-items

---

修改主轴方向 flex-direction

---

弹性伸缩比 flex

---

弹性盒子换行 flex-wrap

---

行对齐方式 align-content

---

定位

---

分类 

相对定位 relative

---

绝对定位 absolute

父相的原因：特点第三条，因为绝对定位会找最近的已经定位的父级

---

固定定位 fixed

---

堆叠层级 z-index

---

高级技巧

CSS精灵

---

字体图标

下载字体

iconfont-阿里巴巴矢量图标库

---

使用字体

---

上传矢量图

---

CSS修饰属性

垂直对齐方式 vertical-align

图片与文字不对齐原因：浏览器会把行内块、行内标签当成文字处理，统一按照基线对齐 

---

过渡 transition

---

透明度 opacity

---

光标类型 cursor

---

网站搭建

项目目录

---

准备工作

SEO

---

favicon图标