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

相关推荐
前端无涯2 小时前
React中setState后获取更新后值的完整解决方案
前端·react.js
西愚wo2 小时前
前端开发者必备:在浏览器控制台批量提取HTML表单字段名(Label)
前端
小鸡吃米…2 小时前
Python - 类属性
java·前端·python
前端不太难2 小时前
Navigation State 驱动的页面调试方法论
开发语言·前端·react.js
用户47949283569153 小时前
你每天都在用的 JSON.stringify ,V8 给它开了“加速通道”
前端·chrome·后端
JIngJaneIL3 小时前
基于java+ vue办公管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
静待雨落3 小时前
Electron无边框窗口如何拖拽以及最大化和还原窗口
前端·electron
沐泽__4 小时前
iframe内嵌页面双向通信
前端·javascript·chrome
小北方城市网4 小时前
第4 课:Vue 3 路由与状态管理实战 —— 从单页面到多页面应用
前端·javascript·vue.js