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

40 阅读1分钟

1.标准流

image.png

2.浮动(了解)

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

  • 属性名:float

  • 属性值:left、right

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

image.png

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

image.png

2.2 清除浮动

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

image.png

2.2.1 解决方法

image.png

image.png image.png image.png

2.3 总结

image.png

3.Flex布局

3.1 认识Flex

image.png

3.2 Flex组成

image.png

3.3 Flex布局

image.png

3.3.1 主轴对齐方式

image.png

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

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

image.png

3.3.2 侧轴对齐方式

image.png

image.png

image.png

3.3.3 修改主轴和侧轴位置

  • 只记住column就行

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

image.png

image.png

3.3.4 弹性伸缩比

image.png

image.png

3.3.5 弹性盒子换行

image.png

image.png

3.3.6 行对齐方式

image.png

image.png

3.4 弹性盒子项目属性

1. 可以用来实现放大或缩小浏览器时,盒子会跟着变化
2. flex=1是flex-grow、flex-shrink和flex-basis三个属性的缩写
3.gap属性很智能,不用再处理首位的盒子了

image.png

image.png