javascript - 给js写的盒子添加css样式，css样式没起作用。
问题描述
js中写了些盒子，在css中给它添加些样式。但是没起到作用。代码;<!DOCTYPE html><html lang='en'><head>
<meta charset='UTF-8'><title>Title</title><style> *{margin: 0;padding:0;} .box{width:500px;height:800px;position: relative;display: block;overflow: hidden;} img{width: 500px;height:900px;} #cover{position: absolute;height:800px;width:505px;top:0;left:0;display:block;background: transparent;} p{display: inline;height:50px;width:50px;border:1px solid #eee;background: #eee;margin: 0;}</style><script> window.onload=function () {var cover=document.getElementById('cover');str='';op=document.getElementsByTagName('p');for(var i=0;i<200;i++){ str+='<p></p>'}cover.innerHTML=str;for(vari=0;i<199;i++){ op[i].onmouseover=function () {this.style.background='transparent'; }} }</script>
</head><body><section id='box'>
<img src='https://www.haobala.com/wenda/images/zhuyin.jpg'><section id='cover'></section>
</section></body></html>
如图添加的盒子p，在<style><style>写了没效果
问题解答
回答1：原因在于：display: inline;
inline的含义就是，把元素当成行内元素，比如span标签，这样的元素是不可以设置宽高的，因为设置了也不会生效。我猜你是想设置成inline-block的。
网公网安备