解决width: 100%;再设置margin问题
最近在做前端,遇到了这么个小问题,就是当我们把一个 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;
效果如下:
解决width: 100%;再设置margin问题相关推荐
- 多方法解决设置width:100%再设置margin或padding溢出的问题
2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...
- 解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
- 行内元素设置margin:0 auto无效的问题
行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...
- width:100%和 max-width:100%的区别
width:100% 和 max-width:100%的区别: width: 100%(不包括margin和padding和border)是将所有指定元素的宽度拉伸或收缩到和父元素的宽度一致, 而ma ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
- 块状元素的居中,首先设置宽度,再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
- div 设置相对比例 即div width 100 无效
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
- html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...
- html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
css宽度百分之百设置与不设置 css width可以设置具体固定数值比如10px.500px.980px.1200px等,以达到网页固定宽度显示.css 宽度 width也可以设置百分比值,比如80 ...
最新文章
- 承受海量访问建站方案
- WEB服务器和HTTP服务器和应用服务器的区别?(web服务器就是HTTP服务器)为什么要把Web服务器独立配置,和应用程序服务器一前一后?
- leetcode 394. Decode String | 394. 字符串解码(用栈做表达式转换)
- 第三篇 12306自动刷票下单-下单
- 关于 Docker ,你必须了解的核心都在这里了!
- 2020年10月抖音小红书美妆营销报告
- 使用mybaits遇见有大写的sql语句错误的bug分析
- Twitter数据非API采集方法
- 大牛的十多年技术人生的经验与心得
- php函数收集参数,now-go时间百宝箱
- 计算机网络协议有那些,计算机网络协议有哪些
- java求因子_一个数恰好等于它的因子之和java
- 常用Java数据库连接池性能测试
- HCIP课程笔记-06-DR/BDR、OSPF各网络环境下的工作方式、OSPF的hello包、DBD包、LSR包、LSU包、LSAck;
- ubuntu20.04开机后出现 /dev/sdb3 xxx files xxxx/xxxxx blocked,无法进入桌面问题
- 借助大数据培育健康医疗产业群
- Zuul(一)网关和路由
- 废旧计算机主板,废旧笔记本, 千万别扔掉, 教你变废为宝
- 如何开展微博营销--开展微博营销的步骤
- 蒟蒻のpython(做个飞船大战小游戏)