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,如下修改

猜你喜欢

转载自blog.csdn.net/mr_javascript/article/details/80431483