前端开发笔记

1、移动端控制台

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

2、页面布局calc()函数

合理的使用calc函数可以解决一些难缠的页面布局

比如：

自适应布局中空中的字需要超过一定宽度出点点，还不能挤掉后面的

使用固定值和百分比多不合理，这样就可以使用calc() ，max-width: calc(100% - 100px)就是当前div的宽度减去其他部分的宽度

3、禁用指定元素tab键切换失效

元素加tabindex="-1"

4、判断浏览器型号和设备类型方法（包括可以判断坑坑的360浏览器）

https://github.com/mumuy/browser

5、uuid生成器方法

function uuidGenerator() {
	var originStr = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    //var originStr = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
		originChar = '0123456789abcdef',
		len = originChar.length;
	return originStr.replace(/x/g, function(match) {
		return originChar.charAt(Math.floor(Math.random() * len))
	})
}

6、等宽布局

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

.ul {
    display: flex;
}
.li {
    flex: 1;
}

7、均匀分布并且可以自动换行

 

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
.ul {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

6、滚动条美化

/* 滚动条 */
::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
    width: 4px;
    background-color: #999999;
    -webkit-border-radius: 6px;
}
::-webkit-scrollbar-track-piece {
    background-color: #fff; /*滚动条的背景颜色*/
    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
}
::-webkit-scrollbar {
    width: 10px; /*滚动条的宽度*/
    height: 8px; /*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
    margin-top: 10px;
    height: 50px;
    background-color: #999999;
    -webkit-border-radius: 4px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
    height: 50px;
    background-color: #333333;
    -webkit-border-radius: 4px;
}