CSS笔记基础篇02——浮动、标准流、定位、CSS精灵、字体图标
黑马程序员视频地址：
前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70
https://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图标
