程序员经验分享-hwhale

自动宽度和 100% 宽度之间的差异

2023-12-31

之前我的假设是width: auto宽度设置为内容的宽度。现在我看到它占据了父级的整个宽度。

谁能描述一下它们之间的区别吗？


宽度自动

像 div 或 p 这样的块级元素的初始宽度是 auto。这使得它扩展以占据其包含块内的所有可用水平空间。如果它有任何水平填充或边框，它们的宽度不会添加到元素的总宽度中。

宽度100%

另一方面，如果指定 width:100%，则元素的总宽度将是其包含块的 100% 加上任何水平边距、内边距和边框（除非您使用了 box-sizing:border-box，在这种情况下仅将边距添加到 100% 以更改其总宽度的计算方式）。这可能是您想要的，但很可能不是。

要直观地看到差异，请看这张图：

Source http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

自动宽度和 100% 宽度之间的差异 的相关文章

  • 这个 CSS 选择器是什么？ [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height

  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday

  • 当 MediaElementAudioSource 输出为零但 CORS 不再是问题时，如何才能播放音频？

    我正在尝试实施

  • 是否可以在没有 Javascript（仅 CSS）的情况下执行相同的操作（悬停效果）？

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px

  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer

  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh

  • 光滑的旋转木马不工作

    我一直在尝试简单地实现 Slick Carousel 的工作 我已按照 Git 页面上的说明进行操作 https github com kenwheeler slick https github com kenwheeler slick 这

  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口

  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个

  • 从网站存储数据的最简单方法（在服务器端）

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在

  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio

  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么

  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • iOS Safari Mobile 禁用上一个和下一个选择输入

    上周五我发现了关于此问题的类似问题 但似乎无法再次找到它 如果有人能指出我正确的方向 那就太好了 本质上我在一个页面上有多个选择菜单 第一个在加载时填充 第二个在第一个选择时填充 够简单的 但是 在 iOS 设备中 当您点击选择元素时 它会

  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l

  • 如何设置旋转元素背面的样式？

    我有一个figure它是可旋转的 通过用户输入任意角度 该旋转明显地使用transition财产 当该元件旋转超过 90 度 90 度时 元件的背面可见 我想对元素的通常隐藏的一面进行与正面不同的设计 但我不确定如何实现这一点 figure

  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小

  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许

  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • 如何使用注释指定列的组合应该是唯一约束？

    我想确保表中的所有行都具有两个字段的唯一组合 并且我想在实体类中使用注释来指定这一点 我尝试过使用 Table 和 UniqueConstraint 的组合 但显然我做错了 因为我似乎只能指定单独的列应该是唯一的 我已经可以指定使用 Col

  • 延迟应用程序DidEnter后台屏幕截图

    当应用程序进入后台时 有没有办法延迟 iOS 进行的屏幕捕获 原因是 当用户进入主屏幕时 我有时会显示一个视图 我希望删除此视图 这样当应用程序恢复时它就不会显示 有问题的视图是SSHUDView 源代码here https github

  • Sphinx、literalinclude、linenos：如何在文档的代码片段上显示源代码文件中的实际行号？

    我正在使用 Sphinx 来记录网页上的部分 Javascript 代码 I use literalinclude examples mapviz step1 simple html language javascript lines 47

  • Python 中的 Unicode 标识符？

    我想构建一个Python函数来计算 并想将我的求和函数命名为 以类似的方式 想使用 表示乘积 等等 我想知道是否有办法以这种方式命名 python 函数 def 也就是说 Python 是否支持 unicode 标识符 如果支持 有人可以提

  • 如何避免使用 Django、nginx 和 uWSGI 将环境变量放入多个位置？

    我正在尝试配置 nginx uWSGI 来为我的 Django 应用程序提供服务 当我将环境变量放入myapp uwsgi ini uid username gid username env DJANGO SITE KEY 它按预期工作 但

  • Jetpack Compose 测试：断言特定图像已设置

    我有一个Image编写如下 Image bitmap ImageBitmap imageResource id R drawable testimage contentDescription null Only decorative ima

  • 打印 pid_t 的正确 printf 说明符是什么

    我目前正在使用显式转换为 long 并使用 ld用于印刷pid t 是否有一个说明符 例如 z for size t for pid t 如果不是最好的打印方式是什么pid t 没有这样的说明符 我认为你在做什么 铸造pid t to lo

  • docker 运行启动容器，但 localhost 未加载（Windows 10）

    我正在关注本教程 https blog scrapinghub com 2015 03 02 handling javascript in scrapy with splash 使用splash来帮助抓取网页 我安装了Docker工具箱并执

  • 无法从其他设备远程连接 + Vorlon

    Vorlon 仪表板未显示所有连接的设备 我有桌面并安装了 Vorlon 我从笔记本电脑或 ipad 使用此桌面的本地主机 它显示网页 但它没有显示 vorlon 中的设备 但它会显示我是否从同一个桌面打开 我是我的坏人 我正在使用 loc

  • 当对象完成时取消任务

    我有一个启动任务的类 并希望确保该任务在对象被垃圾收集时停止 我已经实现了 IDisposable 模式 以确保如果手动处理对象或在 using 块中使用对象 则任务会正确停止 However 我不能保证最终用户会调用 Dispose 或在

  • 在私有版本的 python 中安装 setuptools

    新手问题 但是 我在系统版本为2 3的主机上安装了python2 7 2 7位于 python2 7 bin python 我想添加一些软件包 例如 MySQLdb 但需要安装工具 说明表明您可以使用 prefix 作为参数 但是 如果我执

  • br 标签在 Haml on Rails 3 中未关闭

    我在让 Haml 关闭 br 标签时遇到问题 我尝试了以下方法但没有成功 br br 我预计这会导致 br 但它总是输出为 br 即使末尾有斜线字符 我还尝试将以下选项添加到 application rb 并且我尝试了environment

  • 用于检查 4 个不同字符组中至少存在 3 个的正则表达式

    我正在尝试编写一个密码验证器 如何查看我提供的字符串是否包含至少 3 个不同的字符组 检查它们是否存在很容易 但至少有 3 个 至少八 8 个字符 至少三个不同的角色组 大写字母 小写字母 numeric 特殊字符 我正在使用 javasc

  • 在 jquery post 中发送长字符串

    我无法在 jquery post 方法中发送长字符串 超过 96 个字符 在 FF12 和 Chrome 18 中测试 我的 servlet 是 public class TestServletAsh extends HttpServlet

  • SoftLayer API 用于了解 VLAN 中的总 IP 和可用 IP

    SoftLayer API 用于了解 VLAN 中的总 IP 和可用 IP Hello 如果我知道某个 VLAN 的总 IP 数和已用 可用 IP 可以使用哪个 APIVLAN ID 我能想到的一种方法是我可以获得 VLAN 的子网 然后在

  • (Python) ValueError：在路径中找不到程序点

    我有以下问题 我在 xUbuntu 操作系统上 我尝试在 Flask 应用程序中使用 networkx 并且我有以下代码 import networkx as nx Creating and initializing graph objec

  • ASP.NET MVC C#：查看记录详细信息时出现对象引用错误

    我是一个 NET 和 MVC 新手 在经历了 ASP 的长时间使用之后 我第一次学习它 现在是时候进行转换 让我构建 Web 应用程序的工作变得更加容易 我一直在浏览 Stephen Walther 的有用视频教程来了解大多数事情 到目前为

  • ICC 汇编输出中的所有这些数字意味着什么？

    使用 ICC 编译时 每条指令后面都是 2 个点分隔的数字 并以哈希符号为前缀 这意味着什么 例如 https gcc godbolt org g g g h codeEditor i j 1 source int testFunction

  • :nth-child(n+4):nth-child(-n+8) 如何选择一系列元素？

    根据http nthmaster com http nthmaster com 当通过 nth child 设置一系列元素的样式时 我们必须这样做 nth child n 4 nth child n 8 如果我们只使用一个 nth chil

  • 自动宽度和 100% 宽度之间的差异

    之前我的假设是width auto宽度设置为内容的宽度 现在我看到它占据了父级的整个宽度 谁能描述一下它们之间的区别吗 宽度自动 像 div 或 p 这样的块级元素的初始宽度是 auto 这使得它扩展以占据其包含块内的所有可用水平空间 如果

热门标签