css - scoped

scoped属性定义

定义：当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素

作用：避免class名和样式全局污染，这里借用度娘的解释是scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。

这里记录一个日常开发中遇到的问题，我平时写页面习惯使用百分百结合flex盒模型布局，这里就会有一个高度问题，高度一般页面设置为100%，但是如果页面内容不足以撑起当前设备100%高度就会露出页面底色。

这种情况有几种解决方案：
1、在页面内容底部添加一个空白节点内容节点和空白节点按vh分比例，空白节点撑起可视高度可以实现，但是不够优雅。
2、在页面内容最后节点设置margin-bottom属性，按移动设备最大高度给值，页能遮住页面底色，但是会造成部分机型出现y轴滚动。
3、在页面组件样式中使用scoped属性，该属性有作用域，还是非常好用的，但是当我在组件页面中定义当前页面背景色时却不起作用，这里就是scoped属性导致的，所以解决的最好方案就是在需要的单独设置页面背景或者其他属性时删除scoped属性。

这是个很简单的问题，所以应该用最简单的方法去实现，这里记录一下，希望可以提醒自己，细节决定成败。