flex布局
小黄鸭代码调试法
在电脑旁放一只小黄鸭,遇到问题时,把问题和它说一遍.很多时候就能解决了
你遇到了个bug.去问别人,提问时,把你的目的,代码思路,流程和对方说了一遍 -- 把内容过了一遍 -- 旁观者清,换个角度阐释/思考项目
你程序出bug/功能未实现
小黄鸭,我要XXX, 但是在实现XX功能时, xxx了. 出bug了
遇到bug了:
1.检查, 是否拼写有问题,缩进有问题
2.翻译报错信息
3.百度搜索报错信息
4.整理清楚提问思路,询问他人
阿里图标
免费将图标以字体的形式加载到网页里
使用步骤:
1.进入阿里图标官网 https://www.iconfont.cn/
2.注册/登录
3.选择图标 加入到购物车
4.下载代码
5.写代码
flex布局(弹性盒模型)
http://c.biancheng.net/css3/flex.html
flex是当前比较主流的布局方式 -- 它布局很方便.可以取代float(float不是为了做布局而生)
flex布局原理:
通过两条轴,把网页分割为一行行/一列列
flex主轴是从左往右,副轴是从上往下. 默认为左右水平布局
flex的使用三要素:
1.主轴的方向 (是要左右水平布局 / 上下垂直布局)
2.主轴元素对齐方式
3.副轴元素对齐方式
flex的使用:
display: flex;
主轴方向(决定左右/上下布局) flex-direction
row; 行,默认, 从左往右
column; 列,从上往下
row-reverse; 行反转,从右往左
column-reverse; 列反转,从下往上
主轴对齐方式: justify-content
flex-start; 靠起点
flex-end; 靠终点
center; 居中
space-around; 均分
space-between; 两端
副轴对齐方式: align-items
flex-start; 靠起点
flex-end; 靠终点
center; 居中
内容换行: flex-wrap
no-wrap; 缩放不换行
wrap; 换行
内容顺序: order
调整flex里元素的顺序,值越小越靠前