html - 我无法在 div 中 100% 放置一个正方形 - HTML CSS
问题描述
我正在尝试将 100% 的蓝色方块放入容器中,但我在形状和边框之间的右侧和底部看到一点空白,即使我的填充和边距为零,宽度和高度为 100%。为什么会这样;
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.cont {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.cube {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.face {
position: absolute;
width: 100%;
height: 100%;
}
.face1 {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cont">
<div class="cube">
<div class="face face1"></div>
</div>
</div>
</body>
</html>
图片
解决方案
这是因为您写给名为 cont 的类的 height 命令。如果您删除它,它将完全填满
推荐阅读
- embedded-linux - ZEPHYR RTOS 配置 GPIO 引脚
- reactjs - 使用 laravel 反应基于令牌的身份验证
- java - 休息插件或 URI 显示所有休息服务或端点信息
- sql - 检查并比较两个没有关系的表的计数
- json - 带有来自查看器响应的自定义响应的 Lambda Edge 502
- javascript - 如何使用 Javascript 更改此按钮的颜色?
- osgi - 在 kura osgi 环境中部署时,Flyway 无法在默认位置找到迁移
- function - 如何将文本和日期拆分为谷歌表格中的 2 列?
- oracle - 如何使用脚本直接连接 wlst 在线模式?
- javascript - 如何在 v-model 给出的数据后插入“/km”文本?