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.案例

相关推荐
吃杠碰小鸡20 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone20 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_090121 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农21 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king21 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵1 天前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_1 天前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝1 天前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions1 天前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发1 天前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法