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 行对齐方式
3.4 弹性盒子项目属性
1. 可以用来实现放大或缩小浏览器时,盒子会跟着变化
2. flex=1是flex-grow、flex-shrink和flex-basis三个属性的缩写
3.gap属性很智能,不用再处理首位的盒子了