使用 css 设置 div 外宽度

2023-11-23

请问有没有办法设置outerwidth of a div using css忽略填充和边框。

当我设置一个div to be 50%宽度、内边距和边框将添加到宽度中。如果没有的话我该如何解决这个问题javascript or jQuery.outerWidth() ?

不想使用额外的元素


我想知道是否有办法使用 css 设置 div 的外部宽度来忽略填充和边框。

您可以使用box-sizing: border-box使padding and border算在里面width:

div {
    box-sizing: border-box;
}

See: http://jsfiddle.net/thirtydot/6xx3h/

浏览器支持:http://caniuse.com/css3-boxsizing

规格:http://www.w3.org/TR/css3-ui/#box-sizing

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

使用 css 设置 div 外宽度 的相关文章

  • Bootstrap 3 按钮之间的空间

    如果我将几个 Bootstrap 3 按钮排成一行
  • iPad 上的网站纵向视图

    我的网站在 iPad 纵向模式下无法正确显示 它在横向模式下看起来不错 但当我将其转换为纵向模式时 我最终会得到一个混乱的网站 所有元素都分散在整个网站上 我怎样才能解决这个问题 请帮我 这是我网站的链接 inclouds co uk ht
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc
  • 将图像原始尺寸保留在较小的 div 内

    我有一个 600x400px 的图像 并希望将其放在尺寸为 240x200px 的较小 div 内 但图像缩小或扭曲 我希望原始尺寸的图像集中在较小的 div 中 这会隐藏一些图像 我编写了这个 CSS 规则来应用于不同的图像尺寸 theB
  • 如何左对齐 Bootstrap 3 下拉菜单?

    在上图中 MenuItems 与 MyMenu 的右侧对齐 我需要将 MyMenu 的 MenuItems 左对齐 我的意思是它必须与 MyMenu 的左边缘对齐 我尝试使用 pull left 和 pull right 类 例如 ul c
  • SASS for 循环更新 hsla 亮度返回错误 $lightness: "96.77419" 不是 `hsla' 的数字

    我试图循环一定次数 逐渐降低 hsla 的亮度值 但是当我运行循环时 出现错误 lightness 96 77419 is not a number forHSLA 谁能告诉我哪里出了问题或者如何改进 Code iterations 31
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • 页脚没有停留在底部

    这似乎是有史以来最令人困惑的问题 至少对我来说是这样 知道这个页面 除了标题之外 都已损坏 我复制了 HTML 并尝试小心地删除 WordPress 相关的爵士乐 以便您获得该页面的 html JsBin直播页面 http jsbin co
  • 为什么明确:正确的方法没有按预期工作

    我总是很困惑clear left clear right and clear both在CSS中 我知道clear both意味着它不允许在其两侧浮动元素 我做了一些测试here http jsfiddle net malaikuangre
  • 当放置在 css 中时,为什么 Firefox 无法读取带有空格的图像路径?

    例如 CSS 中类似这样的规则 div something background image url http i2 photobucket com albums y24 5609903697 Beyond Birthday BB39 jp
  • 由javascript创建的css动画[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我试图在按下按钮时创建一个带有 css3 动画计时器的 div 继承人的代码 http jsfiddle net arcco96 y5nov
  • CSS3变换:翻译最大值?

    我创建了一个实验无限滚动 Pi 的前十亿位 https daniellamb com experiments infinite pi 寻找 创建一个具有大量数据集的高性能滚动解决方案 我开始测试iScroll http iscrolljs
  • 显示地址栏时的 100vh 高度 - Chrome Mobile

    I came across this problem a few times and was wondering if there was a solution to this problem My problem occurs on th
  • 如何获取 CSS 旋转元素的实际(非原始)高度

    我需要获取几个不同元素的实际高度 为了精确的自定义工具提示定位 并且其中一些元素 不是全部 被旋转 elem outerHeight 返回原始高度 而不是实际显示的高度 这是一个非常简单的例子 http jsfiddle net NPC42
  • 无法使用“无”覆盖背景颜色,只能使用“继承”

    我试图从 Windows 8 ListView 控件中的 win container 元素 图块 中删除白色背景 以使背景显示出来 当我追踪样式时 我可以看到白色背景是按照以下规则应用的 win listview not win footp
  • CSS悬停边框而不调整图像大小

    我想问一下 在不调整图像大小的情况下 我的悬停边框下方功能做错了什么 我已按照给出的指南进行操作here https css tricks com image rollover borders that do not change layo
  • 如何选择带有空格的类

    我如何选择一个类class boolean optional 我已经尝试过这个 boolean optional CSS boolean optional CSS 正如 Zepplock 所说 这实际上是一个属性中的两个类 boolean
  • 四列布局,无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将

随机推荐

  • 将对象从 Activity 传递到 Fragment

    我有一个Activity它使用一个Fragment 我只是想从中传递一个对象Activity to the Fragment 我怎样才能做到呢 到目前为止我见过的所有教程都是从资源中检索数据 EDIT 让我们更精确一点 我的活动有一个Lis
  • Android Studio 3.0 beta2

    当我构建项目时 出现以下错误 错误 com android builder merge DuplicateRelativeFileException 在操作系统独立路径 META INF app debug kotlin module 中找
  • 如何使用 sf 按因子构建/绘制多边形的凸包?

    我有一个物种出现的数据集 我试图通过制作凸包将其转换为出现的区域 我可以手动执行此操作 即一次一个物种 但我真的很希望能够通过物种名称自动处理它 可以在此处找到精简的示例数据集 https pastebin com dWxEvyUB 这是我
  • CSS 中的文本替换属性如何工作?

    我正在参加 upwork 考试 在那里我得到了以下问题 考虑以下代码 body text replace a b b c 如果实现文本替换样式 以下字符串的输出是什么 安迪住在咖啡馆后面 ndy 住在 CBFE 后面 辛迪住在 ccfe 后
  • 使用 Ant 预编译 JSP 的最佳方法是什么

    我试图找出使用 Ant 预编译将部署到 Oracle 应用服务器的 JSP 的最佳方法 即使我正在部署到 Oracle 应用程序服务器 我也想避免使用 Oracle 版本的 Ant Oracle 的 JSP 编译器位于 ORACLE HOM
  • 如何修改android主/详细活动中的虚拟内容?

    我将修改 eclipse 在主 详细模式中生成的项目 我找不到办法做到这一点 特别是 我会从 xml res values arrays 资源文件中获取项目 这是java文件 package com ga termeapp dummy im
  • 如何将String对象转换为Date对象? [复制]

    这个问题在这里已经有答案了 如何将 String 对象转换为 Date 对象 我想我需要做这样的事情 Date d some conversion String 任何帮助将不胜感激 SimpleDateFormat dateFormat n
  • 使用 HTML / UTF-8 字符作为光标

    我希望能够在图像悬停时使用双箭头字符作为光标 我可以只添加图像作为自定义光标吗 cursor url images my cursor png auto http designerstoolbox com designresources h
  • NodeJS Einaros WS 连接超时

    我在用埃纳罗斯WS模块与Node JS在一台计算机上 server 当我使用另一个连接时它工作正常 client 电脑 如果我插入网络电缆 ws on close function 没有解雇 我正在寻求建议是否 我必须实现我自己的 ping
  • 具有释放/获取语义的易失性

    从 Java 5 开始 volatile关键字具有释放 获取语义 以使副作用对其他线程可见 包括对非易失性变量 以这两个变量为例 int i volatile int v 注意i是一个常规的 非易失性变量 想象一下线程 1 执行以下语句 i
  • HOLDLOCK 与 UPDLOCK

    它似乎使用HOLDLOCK or UPDLOCK在一个事务 例如 T1 中 不会阻止来自另一个事务 例如 T2 的读取访问 据我了解 直到T1完成 HOLDLOCK将阻止 T2 更新 删除 和一个UPDLOCK将阻止 T2 进行更新 删除
  • 如何使用 React hooks 将 props 同步到 state:setState()

    我正在尝试使用组件接收的 props 使用 React hook setState 设置状态 我尝试使用下面的代码 import React useState useEffect from react const Persons props
  • 使用比核心数量更多的工作进程

    ThisPYMOTW 的示例给出了使用的示例multiprocessing Pool 哪里的processes传递的参数 工作进程数 是机器上核心数的两倍 pool size multiprocessing cpu count 2 否则该类
  • Celery 3.1.9 Django 集成,指定设置文件,不使用 djcelery

    我今天开始将 celery 3 1 9 与 Django 一起使用 这个较新的版本与 django 具有更紧密的集成 无需使用 django celery 我使用多个设置文件 我想知道是否有一种简单的方法来指定初始化时使用哪个设置文件cel
  • 如何检查对象的所有属性是否为 null 或为空?

    我有一个对象 我们称之为ObjectA 该对象有 10 个都是字符串的属性 var myObject new Property1 Property2 Property3 Property4 是否有办法检查所有这些属性是否为 null 或为空
  • 错误:无法将“int&”类型的非常量左值引用绑定到“int”类型的右值

    我需要创建一个Bar对象 它有一个私有对象Foo f 然而 价值Foo对象参数应通过特定方法传递int genValue 如果我初始化f在构造函数范围内Bar 编译器报错 比如没有构造函数Foo 如果我这样构建Bar f genValue
  • finally 不在 .NET try-finally 块中执行时的条件

    基本上我听说某些条件会导致 NET 超越finally堵塞 有谁知道这些条件是什么 两种可能性 堆栈溢出异常 执行引擎异常 当有一个finally块时 不会执行StackOverflowException因为堆栈上没有空间来执行更多代码 当
  • 解决方案内的 Visual Studio 项目参考

    在解决方案中引用项目的最佳方式是什么 我通过添加引用 gt 项目添加了引用 然而 它链接到发布 DLL 或调试 DLL 我想在引用中包含项目本身 当我们编译项目时 必须编译所有引用项目 通过依赖项 这个怎么做 如果您想要引用项目本身 而不是
  • 使用 HTML 链接 rel 导入 HTML 文档

    我正在尝试使用以下命令将 HTML 文档导入到我的主文档中 但它似乎不起作用 我正在关注这个演示文稿 使用 Chrome 28 并且我已启用这两个标志about flags Enable experimental WebKit featur
  • 使用 css 设置 div 外宽度

    请问有没有办法设置outerwidth of a div using css忽略填充和边框 当我设置一个div to be 50 宽度 内边距和边框将添加到宽度中 如果没有的话我该如何解决这个问题javascript or jQuery o