css宽度和高度不起作用
我正在尝试制作一个在线游戏。我试图在Paper.io之后对登录屏幕建模。我做了用户名输入和播放按钮,但在用户名输入的css文件中指定的宽度和高度不起作用。它被指定为216 x 30,但是当我打开网站时,它不起作用。奇怪的是,当我将所有的代码放到这个论坛的代码片段中时,它运行良好,但是当我在自己的计算机上运行它时,它不起作用。这是我的第一个在线HTML5游戏,所以请不要吼我! :(css宽度和高度不起作用
html,
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
overflow: hidden;
padding: 0;
font-family: 'Luckiest Guy';
font-size: 22px;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#game .ctx,
#ctx {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
}
#pre_game {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #dff3f7;
}
#pre_game .dark,
#dark {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
}
#pre_game .logo {
position: absolute;
top: 15px;
left: 50%;
width: 500px;
height: 160px;
margin-left: -250px;
background: url('/img/logo.png') center center no-repeat;
background-size: contain;
}
#pre_game .grow {
position: absolute;
left: 50%;
margin-left: -168px;
width: 336px;
top: 250px;
}
#pre_game .grow {
animation: leaves 2s ease-in-out infinite alternate;
-webkit-animation: leaves 2s ease-in-out infinite alternate;
}
#pre_game input,
#contact .button {
position: absolute;
left: 0px;
top: 0px;
padding: 15px 5px;
text-indent: 10px;
border: 0;
height: 30px;
width: 216px;
line-height: 30px;
font-size: 25px;
background: #ededd1;
border-bottom: 6px solid #a1a18d;
outline: none;
}
#contact .button {
text-indent: 0;
}
#pre_game .button,
#contact .button {
position: absolute;
right: 0px;
top: 2px;
padding: 15px 5px;
text-align: center;
cursor: pointer;
height: 30px;
width: 90px;
}
#pre_game .button,
#contact .button {
background: #eaec4b;
border-bottom: 6px solid #a1a130;
margin-top: -2px;
color: #888a34;
line-height: 32px;
font-size: 34px;
}
#pre_game .button:hover,
#contact .button:hover {
background: #fafc5b;
}
#pre_game .button:active,
#contact .button:active {
border: none;
border-bottom: 2px solid #a1a130;
border-top: 4px solid #333;
}
@keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
@-webkit-keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
#pre_game:before {
content: '';
box-shadow: inset 0 0 320px #80969e;
-webkit-box-shadow: inset 0 0 320px #80969e;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
input:not([type]),
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="tel" i],
input[type="url" i],
input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb;
}
<link href='//fonts.googleapis.com/css?family=Luckiest Guy' rel='stylesheet'>
<div id="pre_game" style="display: block;">
<div class="dark"></div>
<div class="logo"></div>
<div class="grow">
<div class="username">
<input type="text" placeholder="Your Name" style="left: 0px;">
</div>
<div class="button play" style="right: 0px;" onclick="game_start()">PLAY</div>
</div>
</div>
更新:我不认为我是在我上面的解释不够清晰的代码片段张贴是我希望它是,但是当我运行。在我自己的计算机上的EXACT相同的代码,并打开网站,它是不一样的。下面是一些屏幕截图显示我看到的内容: what I see in the website 下面的图片中的尺寸是错误的,他们应该是216 x 30而不是206 x 0. Wrong dimensions
答:老实说,我不知道为什么这个工作,但它做到了。我尝试了normalize.css,甚至添加了包含CSS Timber Hjellum的行,这只会让事情变得更糟。我意识到,我把两边填充的数字从原来的宽度和高度中减去,这些数字就成了元素的实际宽度和高度。我所做的只是添加10的宽度(5px填充左边和右边的总数为10),并添加了36到高度(15px填充顶部和底部是30,但是当我添加30时,它结束了说高度24,所以我再加6个)。反正谢谢你的帮助!
有一件事你应该考虑是增加一个CSS复位或normalize.css到您的项目(不能同时)。你可以谷歌并从github中获取最新信息,好处是它使浏览器更加一致地呈现所有元素,并符合现代标准。这将让你的生活更加快乐,不必处理不同浏览器和媒体设备上的所有像素不一致问题。
然后考虑这个盒子的大小CSS SNIPPIT:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
这将使填充和宽度的工作更直观,或者你的方式所期望的。我的建议是添加标准化并确保它具有框尺寸:边框重置,然后查看您的宽度/高度是如何为您制定的。这可能会彻底解决您的问题。
但具体回答你的问题,最有可能的原因是,如果你想要一个元素是216px有5像素的填充,您将设置宽度
element {
width: 206px; /* 216 - (5px padding + 5px padding) = 206px */
padding: 5px /* top: 5px, right: 5px, bottom: 5px, left: 5px; */
}
总之,你需要添加填充(左侧为5px,右侧为5px)为整体宽度。
如果通过“不工作”,你的意思是它没有设置为216x30,这是因为你没有考虑填充和边框的宽度和高度。它工作得很好。
设置元素的高度和宽度时,将其设置为内容,不包括边距,填充或边框。
所有这些属性会惹的高度,所以你可能要打出按钮,输入风格,并与他们进行试验,直到你获得完美的高度:
padding: 15px 5px;
height: 30px; <-- not needed for the input
line-height: 30px;
font-size: 25px;
这里有一个小提琴REF:https://jsfiddle.net/timhjellum/8mytme49/10/如果你仍然有问题。在小提琴看起来不错:-)
你为什么要定义两次#contact .button的高度和宽度?' –
花了10分钟玩paper.io :) –
@Andrei哈哈哈:) –