为啥在html页面设置的高度和宽度没有效果呢

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥在html页面设置的高度和宽度没有效果呢相关的知识，希望对你有一定的参考价值。

标签属于行内元素（inline），所以无法设置高度和宽度；如果需要改变其宽高，就需要将其转变为块体元素（block）或行内块体元素（inle-block）：

spandisplay:inlie-block;

实例演示：下面给出了两种样式，class1设置span 的宽高，class2改变span为行内块体元素，然后给其中一个span添加class1样式，另一个同时添加class1和class2样式，观察效果

创建html元素

设置css样式

观察效果：

第一个span因为默认为行内元素，所以宽度和高度的设置不起作用；第二个span已经改为inline-block方式，所以可以设置宽度和高度

参考技术A span是针对行元素的标签，与div这样的块元素不同，所以你设置span，仅对其中的文字元素有效，比如设置颜色、字符大小等，其他的就没用了。追问

我给span定义样式也不可以固定他的宽度和高度吗

追答

不可以的，定义也是没有效果。

本回答被提问者采纳参考技术B 设置它的display属性为block，块级的就行了!

为啥我不能在 div 中覆盖 img？

【中文标题】为啥我不能在 div 中覆盖 img？【英文标题】：Why can't I override an img inside a div?为什么我不能在 div 中覆盖 img？ 【发布时间】：2012-11-19 23:24:33 【问题描述】：

我已经花了几个小时，似乎无法弄清楚这一点。我有一个类似这样的 html 树：

<div class="region">
  <div class="area" id="one">
    <img src="..." />
    <span>...</span>
...

然后我的 css 有：

.region 
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 80%;


.area 
  display: inline-block;
  text-align: center;
  width: 25%;


.area img 
  border: 1px solid green;
  margin: 0;

问题在于，由于某种原因，我似乎无法在区域类中覆盖 img。当我查看萤火虫时，我只看到一个全局 img 被应用（显示：内联块），没有别的。

有趣的是，在 css 中将“img”替换为“span”确实会覆盖它！这怎么可能发生？测试了拼写错误等，但我似乎无法弄清楚。

非常感谢任何提示！

【问题讨论】：

奇怪。您有我们可以查看的公共 URL 吗？是否还有其他 css 选择器比 .area img 具有更高的优先级？对我来说很好：jsfiddle.net/UxLuJ 我们可能需要更完整的资源才能提供帮助。不幸的是，我在本地主机中有这个。我将开始禁用其他 div 以查看是否有变化。也许我在这里省略的东西是问题所在。如果在 CSS 中将“.area img”更改为“#one img”会发生什么？ 【参考方案1】：

我在 Firefox 16.02 以及最新的 Safari 和 Chrome 中看到了同样的问题。但是，向图像添加一个类可以修复它：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .region 
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      width: 80%;
    
    .area 
      display: inline-block;
      text-align: center;
      width: 25%;
    
    .area img 
      border: 1px solid green;
      margin: 0;
        
    .area .place 
        border: 1px solid purple;
    
    </style>
    <title>Hello Dolly!</title>
</head>
<body>
    <div class="region">
        <div class="area" id="one">
            <img src="../Pictures/TheBridge.jpg" class="place">
            <span>Span This</span>
        </div>
    </div>
</body>
</html>

【讨论】：

谢谢卡尔，很高兴看到我并不孤单。不幸的是，您的修复在我的情况下不起作用（在 Ubuntu 上使用 Chrome 版本 23.0.1271.64），但这足以开始怀疑可能有一些错误导致这种情况发生。会继续寻找。【参考方案2】：

我发现了导致它的问题，但我不明白为什么会这样。我原来的 css 选择器是这样的：

.area 
  display: inline-block;
  text-align: center;
  width: 25%;


.area img 
  border: 1px solid green;
  margin: 0;


.area span 
  vertical-align: middle !important;

使用这个顺序，代码不起作用，img 被完全忽略，但 span 不是。

现在，如果我将 img 与 span 交换，保留 .area、.area span、.area img 的顺序，那么 span 会被忽略，但 img 不会！

有人知道是什么原因造成的吗？我从来没有遇到过这种问题。

【讨论】：

你能展示一下你在 span 里面有什么吗... span 里面有没有另一个 .. 将整个 HTML 复制到 region 类中 Span 包含一些固定文本：France @Dan.. 你能用小提琴重现这个问题吗？问题是它在小提琴中可以正常工作：请参阅jsfiddle.net/UxLuJ/1 以获取最新版本。但由于某种原因，在我的浏览器上它不会覆盖 img。【参考方案3】：

有人可以在真正的浏览器上试试这个http://jsfiddle.net/UxLuJ/1/，看看是否可以重现问题？

在我的情况下，使用 Chrome 版本 23.0.1271.64 和 Firefox 16.0.2 无法正确解析 img 标签。解决此问题的一种方法是执行以下操作：在 .country 和 .country img 之间添加一个虚拟选择器，如下所示：