Day05- CSS 标准流、浮动、Flex布局

1.标准流

2.浮动(了解)

  • 作用:让块元素水平排列

  • 属性名:float

  • 属性值:left、right

  • 浮动后的盒子顶对齐、具备行内块特点、脱标

2.1 利用浮动实现产品布局效果

2.2 清除浮动

  • 如果粉色盒子(父级)不给height的话,红色盒子会浮动到最上面

2.2.1 解决方法


2.3 总结

3.Flex布局

3.1 认识Flex

3.2 Flex组成

3.3 Flex布局

3.3.1 主轴对齐方式

1.around:两侧间距是空白的一般

2.evenly:两边距离=box之间距离

3.3.2 侧轴对齐方式

3.3.3 修改主轴和侧轴位置

  • 只记住column就行

  • 所以使用justify-content和align-item时,不能说控制的是水平或垂直方向,而是要看主侧轴。

3.3.4 弹性伸缩比

3.3.5 弹性盒子换行

3.3.6 行对齐方式

4.案例

相关推荐
赵庆明老师15 小时前
Vben精讲:16-熟悉Vite前端工具链
前端
瑞瑞小同学17 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
HexCIer17 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
程序员黑豆18 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos
像我这样帅的人丶你还18 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
南一Nanyi18 小时前
依赖注入和控制反转
前端·设计模式·nestjs
小村儿18 小时前
连载14-实战篇--一个半月,我一个人和 Claude Code 搭出一套数字人工程
前端·后端·ai编程
愚公移码18 小时前
蓝凌EKP18产品:流程虚拟机(PVM)
java·开发语言·前端
promiseThen19 小时前
5 分钟上手 Markdown:标题到表格、代码块与简历实战
前端
web66liang19 小时前
webpack4+vue2项目使用 sass-embedded 导致的 DockerfIle 构建失败的问题
前端