css中div中height和weight可以同时没有吗

Posted 2023-04-23

css中div中height和weight可以不设置。

默认宽度是外层元素的宽度减去水平方向的内边距

默认高度没有，可以由内容来撑开

内容如果不脱离文档流（浮动或者定位情况）的情况下不设置高度是不会撑开div的。

浮动的div和定位的div（脱离文档流）宽度默认是0

一般情况下，都是设置宽度，高度自适应。

参考技术A height可以不明确设置，本身有默认值为auto。div的css中没有weight。应该是font-weight，表示的是字体粗细，可设置为blod,normal等,或者数值100-900的数值。这个值也是可选的，默认为normal追问

不好意思，刚才是我写错了，不是weight,应该是width

追答

div 本身会display属性为block，也就是块级元素。有默认的Height和width。默认值都是auto。就是自动。

width:auto的结果就是display为block的元素的width会是父元素width的100%。父元素也未定义width则向上类推。如果display:为Inline等等，则width会根据内容宽度自动缩放。
height:auto的结果就是高度会根据内容多少自动缩放。

所以，总的来说：都可以不设置，不设置都会取默认值。

是否可以使用 CSS 将字体大小调整为 div 宽度？

【中文标题】是否可以使用 CSS 将字体大小调整为 div 宽度？

【英文标题】：Is it possible to adapt font size to div width with CSS?

【发布时间】：2016-10-31 13:46:58

【问题描述】：

我有一个宽度为70% 的 div，这就是我想要做的：

在该 div 中添加一些单词 调整字体大小，以便这些词 占据所有div宽度

---

这可能只使用 css 吗？这是我的代码：

.parent 
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;

Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
  This Text
</div>

注意：div 大小是响应式的，这很重要。谢谢在 前进！

【问题讨论】：

你想根据div中的内容改变字体大小对吧？

是的，我想用我的文本填充 div

你想要 div 的高度是固定的还是变化的？？

***.com/questions/10292001/…

很好的问题，如果有人找到答案，或者在未来的浏览器中，calc 函数具有更好的功能，它有很大的潜力它非常有用

【参考方案1】：

也许不是你要找的东西，但有些东西 - 你可以使字体和元素都相对于视图宽度。

p 
  font-size: 5vw;
  background-color: red;
  width: 50vw;

<p>
  I'm a P!
</p>

【参考方案2】：

是的，但我认为你需要使用 JS(jQuery)。

JS：

$(function()

var box = $('.box');
var boxWith = box.width();

$('.box h1').css('font-size',boxWith);

);

https://jsfiddle.net/moongod101/sdfaatp8/

【讨论】：

我想用我的文本填充 div，不改变字体大小与 div 宽度相同，但它的有用代码，谢谢。

你想让文本填满位置 X 的 div 吗？如果可以的话，请制作一张图片告诉我你想要什么，谢谢。

见上图

我不是 JS 专业人士，但我感谢 *** 将为您提供帮助 ***.com/questions/687998/… 抱歉，我无法帮助您。

【参考方案3】：

**You can change font-size:10vh;**
        .parent 
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      color:white;
      font-size:10vh;
    
    Please help me to change the font-size dynamically to the parent class
    <hr>
    <div class="parent">
      Text
    </div>

【参考方案4】：

这里，我更新了....JS Fiddel

尝试使用

css

.parent 
 
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      font-size:10vw;          
  



span
      display:inline-block;
      transform:scale(1.8,1);
      -webkit-transform:scale(3,1);
 

HTML

<div class="parent">
  <span>This Text</span>
 </div>

【讨论】：

这行不通，因为 display: inline 的元素无法设置其宽度或高度 - 它总是从它们的内容派生而来。

我的 div 有一个宽度

如果你改变了 div 的宽度，那么你也必须改变 Scale 的 span

你没有回答这个问题，你给出了一个更糟糕的规模属性解决方案。

【参考方案5】：

您只需在代码中添加display: inline;

.parent 
  width: 70%;
  height: auto;
  min-height: 100px;
  background: red;
  font-size: 10vw;
  display: inline;

<div class="parent">
  This Text
</div>

【讨论】：

它运行良好，但可能需要改进才能充分发挥作用。