解决width: 100%;再设置margin问题

2023-11-16

最近在做前端,遇到了这么个小问题,就是当我们把一个 div 的 width 设置为 100% 之后,再设置 margin 的时候 这个div 莫名其妙的超出了屏幕。情景如下图:

这就很难受了啊!!! 不过办法总比困难多,下面,我将讲两种解决方法:

方法一:计算宽度法 

从上图中我们可以看到 我这里左右边距都设置的是 30px,所以总边距为 60px,知道总边距之后就好办了,我们可以将 width 设置为 width: calc(100% - 60px)

width: calc(100% - 60px); //这个 60px 是根据 你自己的 margin 来的
margin: 15px 30px;

完美解决

方法二:padding + box-sizing: border-box;

这个属性我就不过多解释了,网上一大堆讲解的,我们直接上代码

width: 100%;
padding: 15px 30px;
box-sizing: border-box;

效果如下:

 

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

解决width: 100%;再设置margin问题 的相关文章

  • 用 Beautiful Soup 进行抓取:为什么 get_text 方法不返回该元素的文本?

    最近我一直在用 python 开发一个项目 其中涉及抓取一些网站的一些代理 我遇到的问题是 当我尝试抓取某个知名代理站点时 当我要求 Beautiful Soup 查找 IP 在代理表中的位置时 它并没有按照我的预期执行操作 我将尝试查找每
  • 绝对定位的表头 (th) - 哪个浏览器是错误的?

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • Img srcset 和尺寸属性

    我正在尝试制作一个简单的网站img标签 将使用新的srcset属性 主要思想是根据屏幕分辨率更改图像 src 工作示例 http pixelteam pl surprise some files index html 问题在于sizes 正
  • 横向旋转到纵向时的字体大小怪异 - CSS 媒体查询 - iPhone5 Safari

    我已经用谷歌搜索了这个 但无法弄清楚 谢谢你的帮助 Studiolynch com 响应式和流体布局 在 iphone 5 Safari 中完美运行 除了从横向模式旋转到纵向模式会使字体大小小于应有的大小 但是 如果您最初以纵向模式加载页面
  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s
  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • HTML代码可以像CSS文件一样附加到HTML页面吗?

    HTML 代码可以像 CSS 文件一样附加到 HTML 页面吗 这样 如果所有页面中都复制了部分 HTML 代码 我可以将其放在一个文件中 然后轻松修改它 谢谢 Ahmed 是的 可以 使用框架 但不推荐 Example 此代码将允许您重用
  • 使用画布元素作为文本区域

    我正在寻找有关如何使用类似于文本区域的画布元素的直接描述 我见过这样的项目Ace http ace ajax org 只是想知道如何像文本区域一样写入该区域 只是纯文本 没有什么花哨的 提前致谢 Ace 曾经是 Mozilla Skywri
  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相
  • 模板中的 bson.ObjectId

    我有一个具有 bson ObjectId 类型的结构 例如如下所示 type Test struct Id bson ObjectId Name string Foo string 我想在 html 模板中呈现它 Name Food a h
  • 当表格在 IE 中获得焦点时,表格滚动条会向上跳跃

    问题 我有一个table有包装的div with overflow y auto 一旦table获得焦点 滚动条向上跳 我怎样才能防止这种情况发生 我经历过这种行为IE9 不在 Chrome 中 请注意 我已添加tabindex到桌子上 以
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • div 之间的额外空间从何而来?

    http www lethalmonk6 byethost24 com index html http www lethalmonk6 byethost24 com index html 如果您使用 firebug 检查 项目链接 div
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是

随机推荐

  • 安卓Kotlin 使用ViewPager2实现简易左右滑动翻页效果

    布局很简单 R layout onepage仅有一个占满全屏幕的ImageView名为onei R layout activity view仅有一个占满全屏幕的ViewPager2名为vp 以下为Activity的全部代码 class Vi
  • 读完 DALL-E 论文,我们发现大型数据集也有平替版

    内容提要 OpenAI 团队的新模型 DALL E 刷屏 这一新型神经网络 使用 120 亿参数 经过 特训 任意描述性文字输入后 都可以生成相应图像 如今 团队将这一项目的论文和部分模块代码开源 让我们得以了解这一神器背后的原理 原创 H
  • 做BI领域的ChatGPT,思迈特升级一站式ABI平台

    8月8日 以 指标驱动 智能决策 为主题 2023 Smartbi V11系列新品发布会在广州丽思卡尔顿酒店开幕 后疫情时代 BI发展趋势的观察与应对 在发布会上 思迈特CEO吴华夫在开场致辞中表示 当前大环境背景下 数字化转型是企业高质量
  • 网站服务器记录攻击日志ctf,通过网站日志分析sql注入攻击的痕迹

    一次偶然的机会 我的朋友给我发了一个日志文件 让我看一下服务器access log文件 说是CTF的题目 给了它这样一个access文件 随后要了flag 因为我是专业划水的 CTF基本上不碰它 我也不知道怎么做 所以我试着分析了一下下 打
  • 用c++制作c++

    用c 制作c 我想了半年了 终于成功了 那么接下来我给大家分享一下我用c 制作c 的代码吧 include
  • 免费获取知网文献----浙江图书馆+支付宝

    使用支付宝办理浙江图书馆读者证 在支付宝搜索 浙江图书馆 并进入其生活号 开通借阅服务 办理读者证 使用读者证号登录浙江图书馆官网 通过以上步骤成功办理读者证后 会获取一个读者证号 在支付宝 浙江图书馆 生活号的首页或个人中心可以看到 使用
  • matlab 日期加小时数_matlab建立连续时间的时间函数

    满意答案 dashengjia 推荐于 2016 05 22 采纳率 55 等级 12 已帮助 7603人 这个是内建函数 源码不公开 CUMSUM Cumulative sum of elements For vectors CUMSUM
  • JSON 数据类型转换工具

    简介 本文介绍一款数据类型转换工具 可以将JSON格式数据转换成YAML MYSQL XML TOML JavaScript等数据类型 背景 在日常的开发工程中 我们经常使用JSON表达数据 但有些时候我们需要使用YAML JavaScri
  • Cannot make a static reference to the non-static method getLocalActivityManager()

    Cannot make a static reference to the non static method getLocalActivityManager from the type ActivityGroup 想调用getLocalA
  • Python 异常捕获与处理

    文章目录 一 基础知识 1 1 什么是异常 1 2 异常分类 1 3 异常的结构 二 异常类型 三 异常处理语法结构 3 1 语法结构 3 2 万能异常 3 3 try语法结构结合else和finally 四 异常处理补充 4 1 断言 4
  • Java swing + socket 写的一个五子棋网络对战游戏

    自从开始接触Swing以来 就喜欢写写各种管理系统 写多了就萌生了一种类似于实时在线对战的游戏 经过一番构思后就开始着手设计这个网络对战版本的五子棋了 游戏代码包含两部分 常规的C S模式 C代表客户端 S代表服务端 下载代码后先启动服务器
  • css3颜色渐变:css3如何实现背景颜色渐变?

    为了开发网页的美观 css3背景颜色渐变是经常会用到的 那么 css3背景颜色渐变如何设置呢 本篇文章我们就来介绍关于css颜色渐变背景的设置方法 我们要知道的是css3渐变有两种类型 css3线性渐变和css3径向渐变 下面我们就来看一下
  • C语言基础知识梳理<1>

    1 前言 各位小伙伴现在还在为学习C语言而苦恼吗 接下来我将更新一系列与C语言相关的文章与干货 希望各位小伙伴可以留下自己宝贵的 并持续关注我 真诚点赞 手留余香 2 网站推荐 软件推荐 用gitee 码云 保存自己的代码 自己写完的代码总
  • Visual Studio 2005 安装经验谈

    看到这题目 我都有点不自信 你用了Visual Studio 2005才几天啊 的确 关于编程我还是新手 不过这几天重复进行的Visual Studio 2005安装 到安装失败 再到解决问题 再安装 往返3次 下载Visual Studi
  • JDK 21探秘:引领Java开发新潮流的强大功能

    JDK 21是Java开发工具包的最新版本 它引入了许多令人振奋的新特性 旨在提高开发人员的生产力和代码质量 在本文中 我们将介绍一些JDK 21的新特性 并提供使用示例 以帮助您更好地理解和应用这些功能 一 字符串模板 String Te
  • 当SSC遇见RPA:最大化发挥共享服务模式效用

    作为一种创新的管理模式或战略 共享服务中心 SSC 如今正越来越受到企业的青睐 很多中大型集团 跨国公司都有某种类型的SSC存在 SSC可为企业带来哪些好处 RPA在这其中又是如何发挥作用 共享服务中心 Shared Service Cen
  • MAC版本Mysql数据库忘记密码解决教程

    MAC初始化安装获取密码 删除Data文件夹内容 并重新生成 rm rf usr local mysql data 初始化再次生成Data文件夹中的内容 初始化完成之后再代码最后生成随机密码需要保存 mysqld initialize us
  • 解决win 10操作系统中图片查看方式没有window7中的照片查看器问题

    1 在桌面新建一个记事本文件 保存为 reg 不能保存为 reg 代表任意 如下图 为我自建的 1 reg 2 保存后 双击打开该文件 并将如下代码拷入 并保存 如下图 2 1 右键该文件用记事本或者notepad 打开 我这里是用note
  • 【C++】C/C++内存管理(new和delete详解)

    目录 1 C C 内存分布 2 C语言中动态内存管理方式 3 C 内存管理方式 3 1 new delete操作内置类型 3 2 new delete操作自定义类型 4 operator new与operator delete函数 4 1
  • 解决width: 100%;再设置margin问题

    最近在做前端 遇到了这么个小问题 就是当我们把一个 div 的 width 设置为 100 之后 再设置 margin 的时候 这个div 莫名其妙的超出了屏幕 情景如下图 这就很难受了啊 不过办法总比困难多 下面 我将讲两种解决方法 方法