当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。举个例子:

<!-- 示例 -->

<!-- html -->
<div class="parent">
<div class="child"></div>
</div> <!-- css -->
.parent {
width: 500px;
height: 50px;
background-color: green;
border: 1px solid #E74D4D;
}
.child {
width: 100%;
height: 30px;
margin: 20px;
background-color: pink;
}

示例

这是因为设置了width: 100%;后已经将父元素占满,再添加margin值就会溢出(默认溢出值为左侧的margin值)

解决方法:

  1. 父元素设置padding
<!-- 弊端是增加了parent占用的宽度 -->
.parent {
width: 500px;
height: 50px;
padding: 20px;
background-color: green;
border: 1px solid #E74D4D;
}
.child {
width: 100%;
height: 30px;
background-color: pink;
}
  1. [ 推荐 ]利用css3中的box-sizing: border-box; 属性解释链接
    设置他以后,相当于以怪异模式解析,borderpadding全会在你设置的宽度内部。
.parent {
width: 500px;
height: 50px;
padding:20px;
background-color: green;
border: 1px solid #E74D4D;
box-sizing: border-box;
}
.child {
width: 100%;
height: 30px;
background-color: pink;
}
  1. 子元素外添加一个div
<div class="parent">
<div class="child2"> <!-- 设置margin: 20px; -->
<div class="child"></div>
</div>
</div>

** end **


下面是彩蛋。。。

我在举这个例子的时候发现了一个css hack(针对不同的浏览器/不同版本写相应的CSS code的过程):父元素与子元素之间的margin-top问题
html代码

<div class="box1">
<div class="box2"></div>
</div>

css样式

.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}

结果

示例

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

解决方法:

  1. 修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
  2. 为父元素添加overflow:hidden;样式即可(完美)
  3. 为父元素或者子元素声明浮动(float:left;可用)
  4. 为父元素添加border(border:1px solid transparent可用)
  5. 为父元素或者子元素声明绝对定位

ps:

子元素设置margin-top后,父元素跟随下移的问题

https://www.cnblogs.com/bluey/p/6417922.html

css中hack是什么

https://www.cnblogs.com/Renyi-Fan/p/9006084.html

转载于:https://my.oschina.net/jack088/blog/3042690

多方法解决设置width:100%再设置margin或padding溢出的问题的更多相关文章

  1. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  2. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  3. 前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题

    前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题 div格式如下 <div class="a"> < ...

  4. css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  5. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  6. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  7. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  8. hibernate中保存一个对象后再设置此对象的属性为什么不需要调用update方法了

    hibernate中保存一个对象后再设置此对象的属性为什么不需要调用update方法了 例如session.save(user);user.setAge(20); 原因: hibernate对象的三种 ...

  9. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

随机推荐

  1. STM32F103ZET6时钟

    1.STM32F103ZET6时钟说明 STM32F103ZET6的时钟树图如下所示: STM32F103ZET6有很多个时钟源,分别有: HSE:高速外部时钟信号. HSI:高速内部部时钟信号. L ...

  2. VUE一款适用于pc平台的简单toast

    新项目要求用typescript+vue+elementui的模式来搭建pc项目,最初踩了好多坑.产品说提示不想用element-ui的提示. 打算用toast的形式.所以就自己写了一个pc的toas ...

  3. Kylin 新定位:分析型数据仓库

    亲爱的各位社区朋友: Apache Kylin 在 2014 年 10 月开源并加入 Apache 软件基金会的孵化器,一年后从孵化器毕业成为 Apache 顶级项目.从第一天起,Kylin 的标语是 ...

  4. 标准与扩展ACL

    标准与扩展ACL 案例1:配置标准ACL 案例2:配置扩展ACL 案例3:配置标准命名ACL 配置扩展命名ACL 1 案例1:配置标准ACL 1.1 问题 络调通后,保证网络是通畅的.同时也很可能出现 ...

  5. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之八(四十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  6. mpvue的toast弹窗组件-mptosat

    几乎每个小程序都会用到的弹窗功能,弹窗是为了友好的提示用户目前小程序的状态.这样以来toast弹窗就成了小程序不可或缺的组件.mptosat用过,不赖的一款.下面记录以下使用方法: 介绍 mptoas ...

  7. Android 圆形图片库 CircleImageView

    高仿微信朋友圈 10s 视频裁剪 引语 晚上好,我是猫咪,我的公众号「程序媛猫咪」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. <Android 图片裁剪库 uCrop> ...

  8. coding++:漫画版-了解什么是分布式事务?

    —————  第二天  ————— ———————————— 假如没有分布式事务: 在一系列微服务系统当中,假如不存在分布式事务,会发生什么呢?让我们以互联网中常用的交易业务为例子: 上图中包含了库存 ...

  9. AJ学IOS 之微博项目实战(9)微博模型之时间相关重要操作,判断刚刚,昨天,今年等等

    AJ分享,必须精品 一:效果 二:实现代码 /** 1.今年 1> 今天 * 1分内: 刚刚 * 1分~59分内:xx分钟前 * 大于60分钟:xx小时前 2> 昨天 * 昨天 xx:xx ...

  10. [总结]最小生成树之Kruskal算法

    目录 一.最小生成树的相关知识 1. 树的性质 2. 生成树 3. 最小生成树 4. 最小生成树的性质 二.Kruskal算法求最小生成树 1. 核心思想 2. 具体流程 3. 图示 4. 代码实施 ...