草庐IT

html - 简单(宽度和高度)和最大/最小(宽度和高度)之间的区别？

coder 2023-08-08 原文

1-简单(宽度和高度)和最大/最小(宽度和高度)有什么区别？解释如果元素的内容、宽度和高度(宽度和高度)或最大/最小(宽度和高度)已经在内部样式中指定，增长超过指定的内容，会发生什么情况？

2-其次，我们如何知道何时使用哪一个？(简单或最大/最小)

3-在下面的例子中:

  <html>
  <head>
       <style type="text/css">
       p
       {
        max-height:50px;
        background-color:yellow;
       }
       </style>
  </head>

  <body>
       <p>The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
       </p>
  </body>
  </html>

这里，max-height 似乎对

元素的内容没有影响，因为它的高度随着其中的内容而增长和缩小？我目前正在使用 IE8。

最佳答案

答案:

1:simple和max的区别见下图:

#element {
    width: 100px;
    height: 100px;
    background-color: red;
}

<div id="element">
    I'm a 100px wide, 100px high block!
</div>

上面的 div 将是页面上一个 100px 高和 100px 宽的红色 block ，其中包含文本“我是一个 100px 宽，100px 高的 block ”。如果该 block 的文本太长，它就会泄漏，或者如果您将 overflow: hidden 放在元素的 css 中，多余的内容将被隐藏。

如果你这样做:

#element {
    max-width: 100px;
    max-height: 100px;
    background-color: red;
}

<div id="element">
    I'm a flexible block!
</div>

该元素将与您的内容一样大，但如果您的内容达到 100 像素高或超过该元素，该元素将停止，并且它会执行与上述示例相同的操作(如果您有溢出，则将内容切断: 隐藏在您的 css 中，否则内容会从该元素泄漏到页面中)。

2:如果你想在页面上有一个大的红色 block 或者。使用宽度/高度，如果您希望页面上的一个小红色 block 需要增长但只能增长到一定大小，请使用最大值。

3:元素有inline和block两种类型，设置height和width(max或simple)对inline元素(p,in你的例子，不是)。您可以通过将 display: block 添加到 p css 或使用 div(默认情况下为 block )来将其设置为在您的 css 中阻塞。

关于html - 简单(宽度和高度)和最大/最小(宽度和高度)之间的区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6646200/

html和heightparagraphstrongcss

有关html - 简单(宽度和高度)和最大/最小(宽度和高度)之间的区别？的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  6. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  7. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  8. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

随机推荐