web前端开发工作和学习笔记
1、div多层嵌套的高度自适应问题
方法一：给最外层的div设置overflow：auto，则最外层的div高度就会自适应高度了。
2、父级宽度不定的水平居中
方法一：父级text-align:center，子级display:inline-block。
方法二：父级relative，子级absolute，left:50%，transform:translateX(-50%)。垂直居中同理
方法三：父级display:flex; justify-content:center;
3、父级高度不定的垂直居中
方法一：父级display:table; 子级display:table-cell; vertical-align:middle;
方法二：父级relative； 子级absolute; top:50%; transform:translate(-50%);
方法三：父级display:flex; align-items:center;
4、行内元素水平居中
方法一：没有宽度的行内元素（如a），把行内元素变成块级元素再添加外边距：display:block; margin npx auto;
方法二：自带宽度的行内元素（如span, input, button, img, select, label, textarrea），在其父级设置text-align:center;
5、行内元素垂直居中
方法一：父级设置line-height: height;
6、行内元素独占一行显示（换行）
把他设置成块级：display:block;
7、vue项目里eslint严格模式报错的解决办法：取消严格模式
vue项目---->build文件---->webpack.base.config.js---->(找到如下代码把其注释掉就行了)
8、修改vue项目的端口号
vue项目里的config文件，找到index.js配置文件里的port，默认是8080。
9、vue项目去掉严格模式
build文件里找到webpack.base.config.js，如下修改
10、vue项目修改默认URL地址
config --> index.js -->
11、强制换行，超出部分用省略号替代
white-space:nowrap; //内容不换行（中英文都起作用）
white-space:pre-wrap; //只对中文起作用，强制换行
word-break:break-all; // 只对英文起作用，以字母作为换行依据，强制换行
word-break:break-word; //只对英文起作用，以单词作为换行依据，强制换行
overflow:hidden; //超出的内容隐藏
text-overflow:ellipsis; //超出的内容为省略号
12、去掉表格内边距
border-collapse:collapse;