前端 所遇问题

css

文字居中 text-align: center;
盒子居中 margin：auto；
方框弧度 border-radius: 40rpx;
在图片上 position: relative;

宽度 vw
高度 vh
第几个标签 nth-child()

加边框线 border: 1px solid red
solid 直线
dotted 圆点虚线
dashed 直线虚线

这种被挡住的，在导航栏最外层加上
/* position:relative;
z-index:9999; */
可以有效解决

导航栏跟随
position: fixed;
z-index: 999;

a标签去除下划线
text-decoration:none;

盒子里显示符合大小的背景图
background-repeat: no-repeat;
background-size: contain;

盒子里显示符合盒子大小的背景图
background-size:cover;

两个盒子重叠
父元素 position: relative;绝对
子元素 position:absolute;相对
（top、left、bottom、right可以设置位置）

超出盒子部分隐藏
overflow: hidden;

动画
transition: 0.6s;

.choice img{ pointer-events: none; }
加上pointer-events：none不再是鼠标可点击的对象

pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。