这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

20230204 outline会在focus时由浏览器控制自动出现

发现这个坑，如下图，图中的outline:none 被挡住了

问题描述：我明明把border设置成了red，为什么focus的主要按钮还是有蓝色边框？

后经将border 的宽度调为5px看到了红色的边框，发现该蓝色框实为outline

outline 不改变元素的尺寸大小和位置

而border则会占据元素的尺寸

outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

而如果希望达到:focus 没有outline的效果，只需要加一句

outline: none;

即可。

20230210 点击切换loading后按钮位置会改变

这个问题出现在开发button组件loading属性时，点击后会与非loading状态的其他按钮（同一行）的上下位置不统一

解决方法：在父级元素div 添加 style="display: flex;"

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

解决方法：将容器内元素放到容器外，或使用rgba()函数

rgba()函数可以设置颜色透明度，语法如下：

RGBA(R,G,B,A)

取值：