(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>