文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >菜鸟CSS格式问题

问菜鸟CSS格式问题
EN

Stack Overflow用户
提问于 2022-10-10 14:41:49
回答 4查看 44关注 0票数 0

第一个问题在这里。希望我把它贴对了。

按照DOM操作YouTube过程，这里可以制作Javascript秒表。

出于某种原因，我似乎无法集中我的起点零。

根本找不到真相。

任何帮助都很感激。

导师长得怎样？ 我的长相如何？

代码语言：javascript
复制
//My Mark Up//




<body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>

//他们的标记://

代码语言：javascript
复制
<div class="container">
        <div id="timer">
            00:00:00
        </div>
        <div class="buttons">
            <button id="startStopBtn">
                <i class="fa-solid fa-play" id="play"></i>
            </button>
            <button id="resetBtn">
                <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
            </button>
        </div>

//我的CSS://

代码语言：javascript
复制
body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-  empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}

button i {
  font-size: 2rem;
  padding: 10px;
  color: #fff;
  width: 50px;
}

#play {
  background-color: green;
}
#pause {
  background-color: orange;
}
#reset {
  background-color: red;
}

//他们的CSS//

代码语言：javascript
复制
body {
    height: 100vh;
    background: url(img/project-4.jpg) no-repeat center top / cover;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow:  0 0 3px;
   }
   #timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
   }
   .buttons {
    text-align: center;
   }
   button {
    margin: 0 10px;
    border: none;
   }
   button i {
    font-size: 2rem;
    padding: 10px;
    color: #fff;
    width: 50px;
   }
   #play {
    background-color: green;
   }
   #pause {
    background-color: orange;
   }
   #reset {
    background-color: red;
   }
javascript
html
css
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2022-10-10 18:09:34

问题是，您给计时器的宽度为100%，边垫为35 of。

假设您没有更改框大小的默认设置，默认情况下它的值为content，因此总的宽度将为100% (父级.container的宽度)，加上2x35px。

如果在timer元素上放置背景颜色，您可以看到这一点。

您可以删除边填充的文本-对齐:中心将确保您得到尽可能多的填充(即空白处两侧的文本)。

然而，您的导师的代码中有填充，所以我怀疑他们有一个毯子设置的盒子大小。您经常在样式表中看到这一点：

代码语言：javascript
复制
* {
  box-sizing: border-box;
}

这些设置通常还包括页边距: 0；以摆脱浏览器设置的默认边距。

值得一问。

这里是“您的代码”与框大小集，顺便说一句，从样式表中的按钮设置前面删除了点。

​

代码语言：javascript
复制
<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      height: 100vh;
      background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-empty-pool.jpg) no-repeat center top / cover;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container {
      width: 60%;
      height: 250px;
      background-color: #fff;
      border-radius: 30px;
      box-shadow: 0 0 3px;
    }
    
    #timer {
      width: 100%;
      font-size: 72px;
      text-align: center;
      margin: 0px auto;
      padding: 35px;
      background: cyan;
    }
    
    .buttons {
      text-align: center;
      background: pink;
    }
    
    button {
      margin: 0 10px;
      border: none;
    }
    
    button i {
      font-size: 2rem;
      padding: 10px;
      color: #fff;
      width: 50px;
    }
    
    #play {
      background-color: green;
    }
    
    #pause {
      background-color: orange;
    }
    
    #reset {
      background-color: red;
    }
  </style>

  <body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>
  </body>

​

注意:有了这么大的字体大小，可能会有时间仍在容器外流动的情况下--试着把视口的宽度往下压。如果您支持非常窄的设备，并引入一些响应性大小的大小-例如，使字体大小依赖于大众单元，您可能会考虑这一点。

还要注意的是，背景中的图像没有显示，因为url中有虚假的空格，所以我删除了它们。

票数 0
EN

Stack Overflow用户

发布于 2022-10-10 14:53:51

您只需将width从#timer中删除，或者给它一个max-width: 100%;而不是width: 100%;。

看下面的片段。

​

代码语言：javascript
复制
body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  max-width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}
代码语言：javascript
复制
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>
  </body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2022-10-10 14:57:20

我假设在浏览器的默认样式表与导师的样式表之间可能有一些不同。

我解决这个问题的方法是将box-sizing of #timer改为border-box。您可以找到关于该属性这里的更多细节。您可以看到，在使用content-box时，它的行为就像您的示例一样，因为它不将填充作为元素宽度的一部分，因此当您将元素宽度设置为100%时，它会溢出。

​

代码语言：javascript
复制
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 0 3px;
}

#timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
    box-sizing: border-box; /* This is what you need if you use padding otherwise the padding won't get considered */
}
代码语言：javascript
复制
<body>
    <div class="container">
        <div id="timer">00:00:00</div>
    </div>
</body>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/74016658

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档