了解不同浏览器下拾色器的差别
本周阅读了一篇文章是关于拾色器类型的input的，作者在其中深入挖掘了这一类型的input的样式控制问题以及跨浏览器的兼容问题。总结内容如下几点：
拾色器input在不同浏览器上的外观表现
自上而下， 依次是Mac系统下的FireFox/Chrome/Safari浏览器上拾色器input的外观。很明显，Safari浏览器并不支持拾色器。
聚焦唤起
在Firefox以及Chrome上，使用Tab键可以获取到拾色器的焦点，然后Enter唤起拾色对话框。但是此后的操作就只能借助鼠标完成，方向键等无法实现取色。
作者在文章中提及，如果真的要在网站上使用拾色器，那么需要让浏览器知道这是亟待解决的问题。
如何查看拾色器内部构造
在Firefox上，可以新开一个Tab页面，在搜索栏输入about:config，在配置页面中搜索devtools.inspector.showAllAnonymousContent，将其置为true后返回拾色器页面打开控制台即可查看shadowDOM。
此外很可惜的是，在Chromium Edge之前的浏览器是没有该选项的。
但是我在Chrome上看到的结构和FireFox上看到的是不一样的，DOM结构如下：
浏览器差异
-
box-sizing
FireFox:
image.png
Chrome:
image.png
2.margin值
FireFox:
Chrome:
3.border值
FireFox:
Chrome:
除了Chrome的border色值为rgb(169, 169, 169)，FireFox的border色值为rgb(218, 218,218)以外，还看到一个不太一样的值 threedlightshadow，虽然不熟悉，但是没关系，这个系统值已经被弃用了，如果真的要深究，可以在CSS2 system value中可以找到。
-
padding值
FireFox:
image.png
Chrome:
image.png
5.width/height
FireFox:
Chrome:
以上是两个浏览器显著不同的属性，如果需要在这两个浏览器上满足统一的UI表现，那么首先需要从盒模型本身出发，样式覆盖为统一的border-box，其次将宽高以及margin、padding等统一。
如何将（伪）元素限制在其父级边框内
作者为了演示什么叫做将伪元素限制在父元素的边框内，做了一个demo，接下来的内容就是跟着demo一步一步解析。
创建菜单
step01代码
