css问题汇总

这是遇到问题就记录的css问题，欢迎大家一起收集哦~

1、外层盒子背景色为灰色，内层盒子背景色为白色，要求：使白色盒子外边露出点灰色。
margin失效: 在内层盒子加个margin，来显示出白边，但是失效了。在外层盒子中使用 overflow:hidden 显示出来。

<template>
	<view>
		<view class="bg">
			<view class="bg2">背景色为白色</view>
		</view>
		
	</view>
</template>
<style lang="scss">
	.bg{
		background-color: #eee;
		line-height: 60px;
		text-align: center;
		letter-spacing: 10rpx;
		overflow: hidden;
		.bg2{
			background-color: #fff;
			margin: 20rpx 0;
		}
	}

</style>

2、设置panddin或者margin的时候，盒子会自动变大，那么如何使盒子不变形呢?
增加上这个 box-sizing:border-box; 。

3、当很多相同标签的时候，比如很多text，那么可以使用 nth-child(number) 这种形式来改变样式，写法 如：text:nth-child(2){ font-size:32rpx; }

4、背景颜色设置： background: rgba(240, 240, 240, 0.8);

5、设置滚动条(H5 IOS）

   .all::-webkit-scrollbar {
        display: none !important;
        width: 0px;
        height: 0px;
      }