div{ width: 600px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-whidth: 8px; border-style: solid dashed; border-color: #ccc #444; }为什么有警告

这段代码中的 "border-whidth" 应该改为 "border-width"，因为单词拼写错误导致了警告。正确的代码应该是：

div {
    width: 600px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-width: 8px;
    border-style: solid dashed;
    border-color: #ccc #444;
}

相关问题

如何实现底部对齐，目前CSS代码父类：/*设置容器位置,margin上右下左*/ #container{ width:500px; background-color: #fff; height:550px; border-radius: 10px; box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); }，子类：/*设置div中的文字样式*/ .last{ text-align: center; font-size:15px; margin-top:18%; position:absolute; left:28%; }

要实现底部对齐，可以将父类的position属性改为fixed，并将bottom属性设置为0。修改后的代码如下：

#container{
width:500px;
background-color: #fff;
height:550px;
border-radius: 10px;
box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue;
position: fixed;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}

子类的样式可以不变。这样就可以实现底部对齐了。

实现宽300px，高300px， 容器内元素height:30px;width:30px; 可拖拽

可以使用 HTML5 的 `draggable` 属性和 JavaScript 来实现拖拽效果。

HTML代码：

<div class="container">
  <div class="box" draggable="true"></div>
</div>

CSS代码：

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}

.box {
  width: 30px;
  height: 30px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box:active {
  cursor: move;
}

JavaScript代码：

var box = document.querySelector(".box");
var container = document.querySelector(".container");
var isDragging = false;
var boxLeft, boxTop, mouseX, mouseY;

box.addEventListener("dragstart", function(event) {
  event.preventDefault();
  isDragging = true;
  boxLeft = event.clientX - box.offsetLeft;
  boxTop = event.clientY - box.offsetTop;
});

container.addEventListener("dragover", function(event) {
  event.preventDefault();
  mouseX = event.clientX;
  mouseY = event.clientY;
});

container.addEventListener("drop", function(event) {
  event.preventDefault();
  isDragging = false;
});

container.addEventListener("mousemove", function() {
  if (isDragging) {
    box.style.left = mouseX - boxLeft + "px";
    box.style.top = mouseY - boxTop + "px";
  }
});

解释说明：

1. 使用 `width: 300px` 和 `height: 300px` 设置容器的宽度和高度。

2. 使用 `border: 1px solid #ccc` 设置容器的边框。

3. 使用 `position: relative` 为容器添加相对定位。

4. 使用 `width: 30px` 和 `height: 30px` 设置元素的宽度和高度。

5. 使用 `background-color: #f00` 设置元素的背景颜色为红色。

6. 使用 `position: absolute` 为元素添加绝对定位。

7. 使用 `top: 50%` 和 `left: 50%` 以及 `transform: translate(-50%, -50%)` 将元素居中定位在容器内部。

8. 使用 `draggable="true"` 为元素添加可拖拽属性。

9. 使用 `:active` 伪类为元素添加拖拽效果。

10. 在 JavaScript 中，使用 `event.preventDefault()` 阻止元素默认的拖拽行为。

11. 监听元素的 `dragstart` 事件，在事件处理程序中设置 `isDragging` 为 `true`，并记录鼠标指针与元素左上角之间的距离。

12. 监听容器的 `dragover` 事件，在事件处理程序中阻止默认行为，并记录鼠标指针的位置。

13. 监听容器的 `drop` 事件，在事件处理程序中阻止默认行为，并将 `isDragging` 设置为 `false`。

14. 监听容器的 `mousemove` 事件，在事件处理程序中判断 `isDragging` 是否为 `true`，如果是，则更新元素的位置。