(1)使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
(2)使类为"btn"的div元素中内容"X"垂直水平居中
要满足这两点,只需要修改CSS格式便好:
.box { width: 100px; height: 100px; border: solid 1px black; /*补全代码*/ position:relative; } .btn{ width: 20px; height: 20px; background-color: red; /*补全代码*/ position:absolute; top:-10px; right:-10px; text-align:center; /*line-height:20px;*/ }
其中,行高并不是必要要素。
我看很多题解写了行高为20px,但实际上没写也能AC本题。
要注意相对位置和绝对位置。如果.box没有设置成相对位置的话,则默认为static,则btn出现的位置会相当于在整个页面而不是相当于box。
接下来是第三个要求:
点击"X"按钮可以使类为"box"的div元素隐藏
代码实现需要用display:none
、、法一 document.getElementsByClassName('box')[0].style.display='none' //法二 .hidden { display: none; } btn.onclick = function () { // 补全代码 box.className = "hidden" }
综上:
代码为:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <style type="text/css"> .box { width: 100px; height: 100px; border: solid 1px black; /*补全代码*/ position:relative; } .btn{ width: 20px; height: 20px; background-color: red; /*补全代码*/ position:absolute; top:-10px; right:-10px; text-align:center; /*line-height:20px;*/ } </style> </head> <body> <div class='box'> <div class='btn'>X</div> </div> <script type="text/javascript"> var btn = document.querySelector('.btn'); var box = document.querySelector('.box'); btn.onclick = function(){ // 补全代码 document.getElementsByClassName('box')[0].style.display='none' } </script> </body> </html>