我有两个宽度声明。哪一个会被应用?

发布于 2024-12-04 04:38:42 字数 468 浏览 1 评论 0原文

假设我们有一个 HTML 页面,其结构如下:

<html>
<body>
    <table id="myTable">
    </table>
</body>
</html>

现在我有一个 CSS 定义为:

#myTable {width:100%;width:900px;}

现在我的问题是这个表也间接受到视口(或可用浏览器空间)的影响 那么这两个值(px 或 %)中哪个会获胜呢?也就是说,表格在布局中实际占用了多少空间?如果当前浏览器空间为 1000px,它会采用该值吗(这意味着 100% 覆盖 900px 值) 在更广泛的层面上,我们可以概括这种工作方式:% 或 px 值总是获胜吗? 这取决于设置的 DOCTYPE 吗?

Let's say we have a HTML page which has the structure as

<html>
<body>
    <table id="myTable">
    </table>
</body>
</html>

Now I have a CSS defined as;

#myTable {width:100%;width:900px;}

Now my question is this table is indirectly also affected by the viewport (or available browser space)
So what out of the 2 values (px or %) would win ? That is how much space would the table actually take in the layout ? If current browser space is, say 1000px, would it take that value (which means 100% overriding 900 px value)
At a broader level, can we generalize this working that % or px value always wins ?
Would this depend on the DOCTYPE that is set ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

栀梦 2024-12-11 04:38:42

那么这 2 个值(px 或 %)中哪个会获胜呢?

像素宽度会获胜,但这并不是因为它是用像素单位定义的。

由于这两个规则出现在同一规则集中,因此它们的选择器具有相同的特异性(因为它们是相同的),因此最后一个获胜。

单位的选择无关紧要。

So what out of the 2 values (px or %) would win ?

The pixel width would win, but not because it is defined with a pixel unit.

Since the two rules appear in the same ruleset, their selectors have equal specificity (because they are identical), so the last one wins.

The choice of units is irrelevant.

晨敛清荷 2024-12-11 04:38:42

px 将获胜,它将使用 900px 而不是宽度的 100% 我不知道原因,但我已经测试过

px will win it will go with 900px instead of 100% of width i dont know the reason but i have test it

傾旎 2024-12-11 04:38:42

px 将获胜,其背后的原因是最后一个值以 px 为单位。每当检测到 css 文件时,都会从上到下检查并应用最后找到的任何内容。例如

我们有

#home {width:100%;color:#fffccc;}

然后在底部我们再次定义

#home {width:100%;color:red;}

id 为 home 的元素将使用红色作为其字体颜色。

px will win the reason behind that is the last value is in px. Whenever a css file is detected it is checked from top to bottom and whatever it found in the last is applied. for example

we have

#home {width:100%;color:#fffccc;}

Then again at the bottom we define

#home {width:100%;color:red;}

The element with id home will have red as color for their font.

我爱人 2024-12-11 04:38:42

在 CSS 中,总是最后定义的样式获胜,除非前面的样式具有 !important。

例如,

.myClass{
    width: 200px;
    width: 400px;
}

在本例中,宽度将为 400px,因为它是解析 CSS 时最后出现的规则。

.myClass{
    width: 200px !important;
    width: 400px;
}

在这种情况下,宽度将为 200px,因为规则重要

In CSS, always the last defined style wins unless the before one has !important.

For example

.myClass{
    width: 200px;
    width: 400px;
}

In this case the width would be 400px as it the rule that appears last when the CSS is parsed.

.myClass{
    width: 200px !important;
    width: 400px;
}

In this case the width would be 200px as it the rule is made important

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文