黑马程序员视频地址:
目录
[创建flex容器 display:flex](#创建flex容器 display:flex)
[主轴对齐方式 justify-content](#主轴对齐方式 justify-content)
[侧轴对齐方式 align-items](#侧轴对齐方式 align-items)
[修改主轴方向 flex-direction](#修改主轴方向 flex-direction)
[弹性伸缩比 flex](#弹性伸缩比 flex)
[弹性盒子换行 flex-wrap](#弹性盒子换行 flex-wrap)
[行对齐方式 align-content](#行对齐方式 align-content)
[相对定位 relative](#相对定位 relative)
[绝对定位 absolute](#绝对定位 absolute)
[固定定位 fixed](#固定定位 fixed)
[堆叠层级 z-index](#堆叠层级 z-index)
[垂直对齐方式 vertical-align](#垂直对齐方式 vertical-align)
[过渡 transition](#过渡 transition)
[透明度 opacity](#透明度 opacity)
[光标类型 cursor](#光标类型 cursor)
标准流

浮动(不推荐)

清除浮动

方法三中的before伪元素是为了解决外边距塌陷问题
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图标
