填充会增加 div 宽度/高度吗? [复制]

2023-12-21

<html>
<head>
<style>
    * { margin:0; border:0; padding:0; }
    div { height:500px; }
    #container { width:1000px; background-color:#000; }
    #column-one { float:left; padding:10px; width:500px; background-color:#234; }
    #column-two { float:left; padding:10px; width:500px; background-color:#345; }
</style>
</head>
<body>
<div id="container">
    <div id="column-one">
    </div>
    <div id="column-two">
    </div>
</div>
</body>
</html>

确实违反直觉。


The 内容盒模型 http://www.w3.org/TR/CSS21/box.html声明内边距和边框不计算在内width您为盒子设置的。所以他们添加了width.

现代浏览器支持 CSS3box-sizing: border-box http://www.w3.org/TR/css3-ui/#box-sizing引起width表示内容、内边距和边框的总宽度(当然,默认值是content-box,触发上述行为)。

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

填充会增加 div 宽度/高度吗? [复制] 的相关文章

  • 范围输入拇指随着时间的推移而偏移

    我查遍了 Stackoverflow 似乎所有带有拇指标签的范围滑块都有这个问题 例如 这个答案 https stackoverflow com a 35419875几乎没有 但仍然有 基本上你可以计算value max得到left范围值标
  • 我应该使用 CSS3 媒体查询为视网膜显示设备提供不同的图像尺寸吗?

    之前已经在这里问过许多类似的问题 我相信我的有点独特 我用 JQM Cordova PhoneGap 开发了一个移动应用程序 最初我使用大图像 针对视网膜显示设备 并使用响应式 CSS 根据需要缩小图像 这种方法的问题在于 较旧的设备最终必
  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗?

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display
  • 如何在 Selenium 中使用 CSS 选择器查找非根元素的直接后代?

    我正在尝试重用找到的 WebElement table 下面来搜索它的后代和直系后代 table tbody tr td div foo div td tr tr td td tr tbody table table
  • 仅使用 CSS 更改颜色几秒钟

    是否可以在悬停 X 秒时更改 div 的颜色 然后仅使用 CSS 返回其原始颜色 我不希望颜色之间有任何淡入或淡出 例如 如果我想在悬停时将 div 的颜色更改为黄色 1 秒 则它必须保持黄色 1 秒 然后立即返回到原始颜色 This ht
  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch
  • 父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

    我在 mousedown 上获取 offsetX 时遇到问题 下面是我的代码 div Click the text The mouseDown function is triggered when the mouse button is p
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 如何在CSS中嵌套多个计数器?

    我想用 CSS 嵌套两个不同的编号 以获得如下所示的自动编号 1 第 1 节 1 1 小节1 1 2 小节1 2 第 2 节 2 1 小节2 2 2 小节2 这是我实现这一目标的尝试
  • 为什么这个div的计算高度比它的内容高?

    我是一名 CSS 新手 正在使用 WordPress 网站菜单栏插件 http wordpress org extend plugins menubar 用于导航 我已经能够对 CSS 的配色方案 居中和字体内容进行更改 但我无法弄清楚为什
  • 是否可以使用 Chrome 开发者工具审核多个页面?

    我试图找出我的网站中未使用的 CSS 类 然后我发现 Chrome 开发者工具中有一个审核功能 可以标记未使用的 CSS 类 但是 它一次只能执行一页 有没有办法让它审核多个页面 以便我可以找出所有页面中未使用的 CSS 类 我知道有一个
  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei
  • 如何以“打印”模式查看 Google 地图?

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • 自定义字体有时在 IE8 / IE7 中以斜体呈现

    在 IE7 和 IE8 中 当使用自定义 Web 字体时 文本有时会以斜体呈现 即使我明确设置font style normal 这个问题是偶发的 它会渲染几次 然后我刷新 一切都是斜体 然后我刷新 它恢复正常 我正在用这个 font fa
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 如何使网站适应用户的屏幕分辨率?

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能
  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我
  • HTML 布局:向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers

随机推荐

  • PHP有peek数组操作吗?

    我想查看数组的第一个元素 此操作等效于以下代码 function peek list item array shift list array unshift list item return item 这段代码对我来说似乎真的很重 并且 p
  • 当我绘图时如何消除线条之间的这些“点”?

    is there an easy way to not draw this points in my lines I don t know why this points are there because i never release
  • 如何永久运行 Ionic 服务?

    我正在为一个应用程序使用 Ionic 框架 代码位于Linux服务器上 我正在使用运行应用程序ionic serve通过腻子命令 但是 问题是如果我关闭腻子 应用程序就会停止 有没有办法让离子服务作为守护进程永久运行 我怀疑您尝试这样做是因
  • IIS发布后如何修复CSS中的图像路径?

    我是 MVC V4 新手 在将网站发布到 IIS 后遇到问题 通过 Web 浏览器 和页面检查器 在 IIS Express 中查看时 我的网站运行良好 然而 当我将我的网站 通过 VS2012 发布到 IIS 时 我的 CSS 引用的所有
  • 无法显示png

    我正在虚拟机 Red Hat Enterprise Linux Server 版本 6 4 上运行 R shiny R 版本 3 0 1 2013 05 16 一切正常 即服务器启动 应用程序运行等 只要我不尝试绘制图表 renderPlo
  • 如何在 C++ 中使用复数“i”

    我现在正在编写一个简单的 DFT 算法 我想在复指数中使用复数 i 我看到有人用 include
  • 自定义 UIView 类 - Swift

    我已经构建了一个从底部出现并在一段时间后隐藏的视图 它运行良好 但我想将其放入UIView类作为模态 我浏览了互联网 但我无法理解或理解如何做到这一点 snake UIView frame CGRect x 0 y self view fr
  • driver.Context.synchronize()- 还有什么要考虑的 -- - 清理操作失败

    I have this https stackoverflow com questions 12159709 cuda out of memory threads and blocks issue address is out of bou
  • 在字符串中使用 switch

    尝试通过首先将字符串转换为字符然后应用开关来在字符串中使用开关 但仍然没有完成 这是我的代码 import java io BufferedReader import java io IOException import java io I
  • 如何从需要 return 语句的 GraphQL 解析器中调用异步 node.js 函数?

    上提供的 Hello World 示例graphql org graphql js http graphql org graphql js创建一个简单的 GraphQL 实现如下 var graphql buildSchema requir
  • JavaScript Async=true 属性

    我在某个未命名供应商的文档中看到了此代码示例 它似乎异步加载脚本 然后从中调用函数 我意识到 if undefined 检查将防止出现明显的错误 但这不是完全错误的吗 我相信在 IE8 9 中它会正常工作 但会阻止执行 直到 LOADER
  • 如何使用 Provider 将 ChangeNotifier 的范围限定到某些路由?

    我有一个 ChangeNotifier 我想在多个路由之间共享它 但不all routes Page1 是我的第一页 我只需要与 Page2 Page3 和 Page 共享 ChangeNotifierProvider 的数据 并在进入 P
  • 计算罗盘的航向到特定坐标而不是向北

    我无法正确理解这个算法 我正在尝试制作一个指向某个位置的指南针 而不仅仅是指向北方 有问题 我花了很多时间试图弄清楚这一点 但我就是找不到它 有任何想法吗 void locationManager CLLocationManager man
  • 使用 json4s 在 Scala 应用程序中生成 json

    我正在尝试使用 json4s 在 Scala 应用程序中生成 JSON 相当简单 下面是我在 Scalatra 应用程序中整理的一些示例值 import org json4s import org json4s JsonDSL object
  • “不支持的主次版本 52.0”是什么意思,如何解决? [复制]

    这个问题在这里已经有答案了 好的 所以我粗略地理解 52 0 是 Java 8 异常意味着某些代码是用一个版本的 java 编译的 而另一些代码是用另一个版本编译的 我无法理解的是它是哪条路 这是我得到的堆栈跟踪 Exception in
  • 如何在 Linux 中签署 Mac OS X 应用程序?

    对于 OS X 我在 DMG 内分发 Java 应用程序 自 Mountain Lion 发布以来 打开应用程序会出现以下错误消息 应用程序名称 已损坏且无法打开 您应该弹出 磁盘映像 显然解决方法是签署 app 文件 https blog
  • 使用来自外部文件的数据进行 xUnit 测试

    这些天我试图了解 xUnit 测试的工作原理 特别是 我发现有 3 种方法将数据作为参数传递以测试类方法 InlineData ClassData 和 MemberData 但这是我的问题 是否有机会从外部文件获取这些数据 例如 Json
  • 在我的代码执行中添加延迟的正确方法

    我正在尝试制作一个非常简单的逻辑游戏 这个想法是看到一个带有一定数量的彩色方块 按钮 的矩阵 然后隐藏它们 玩家必须单击彩色方块 所以我需要在绘制方块 按钮和返回原始颜色之间有 2 秒的延迟 所有代码都在一个中实现button click
  • java SDK 中 AmazonDynamoDBClient 和 DynamoDB 类之间的区别?

    我正在使用 Amazon 的 DynamoDB java SDK 想了解两者之间的区别AmazonDynamoDB客户端 https github com aws aws sdk java blob master aws java sdk
  • 填充会增加 div 宽度/高度吗? [复制]

    这个问题在这里已经有答案了 b b