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=70

目录

标准流

浮动(不推荐)

清除浮动

Flex布局(推荐)

初识

总结

[创建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)

高级技巧

CSS精灵

字体图标

下载字体

使用字体

上传矢量图

CSS修饰属性

[垂直对齐方式 vertical-align](#垂直对齐方式 vertical-align)

[过渡 transition](#过渡 transition)

[透明度 opacity](#透明度 opacity)

[光标类型 cursor](#光标类型 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图标

相关推荐
xxwl58512 分钟前
区域赛算法模版第五章---数学与数论
c++·笔记·算法
David猪大卫1 小时前
【C++修炼】string类:string类的模拟实现
c语言·开发语言·数据结构·c++·经验分享·笔记·学习
lisw051 小时前
计算生物学学习笔记:NHGRI基因组数据科学分析、可视化和信息学实验室空间(AnVIL)
笔记·计算生物学
骑士雄师3 小时前
结构化思维》第一、二章 → prompt review skill 优化启发清单
笔记
David猪大卫3 小时前
【C++修炼】STL容器—模板进阶:非类型模板参数、模板特化、模板分离编译
c语言·开发语言·c++·经验分享·笔记·学习·面试
qq_284274053 小时前
液压泵工作原理与性能参数笔记:能量转换与吸压油三必要条件、压力分级、排量流量与三种效率特性曲线、径向轴向柱塞泵变量原理及配流配油盘(含考点)
笔记·学习·自动化·制造
ljt27249606613 小时前
Python笔记(四)--模式匹配与正则
笔记·python
冰暮流星4 小时前
mysql索引失效的情形
数据库·笔记·sql·mysql
白杨尚青5 小时前
C++入门篇(十八):模板进阶——非类型参数、特化全家桶与分离编译(收官篇)
开发语言·c++·笔记·模板·偏特化·分离编译
qq_284274055 小时前
液压泵类型结构与液压马达笔记:柱塞泵奇数柱塞减震槽通轴斜轴、单双作用叶片泵八段曲线限压变量、齿轮泵排量困油径向力端面补偿、内啮合螺杆泵与高低速马达(含考点)
笔记·学习·自动化·制造