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

一、总结

一句话总结：直接加上box-sizing:border-box;即可解决上述问题。

1、box-sizing的三个属性分别是什么？

根据意思来记很好记的

值一、content-box （向外边框）

值二、border-box （向内边框）

值三、inherit （继承爸爸）

2、设置边框的样式用什么属性？

box-sizing

box-sizing:border-box;

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

1、相关知识

语法

1
box-sizing: content-box|border-box|inherit;

值一、content-box （向外边框）

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

值二、border-box （向内边框）

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

值三、inherit （继承爸爸）

规定应从父元素继承 box-sizing 属性的值。

2、代码

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
  
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
</div>
  
</body>
</html>
 

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法的更多相关文章

  1. 使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法

    问题: 项目中有一个需求,当点击P1时,两个页面进行轮播.当点击P2时,页面不轮播. 设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发. 解决: 在轮播器配置里,配置observe ...

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

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

  3. 多方法解决设置width:100%再设置margin或padding溢出的问题

    2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...

  4. 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  6. Word 为标题设置段前段后间距设置与异常

    一.概述 在进行Word文档写作时,常常要求我们对(节)标题设置段前段后间距.例如: (2)按照标题的不同,分别采用不同的段前段后间距: 标题级别 段前段后间距 章标题 30磅 一级节标题 18磅 二 ...

  7. input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素

    http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...

  8. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  9. ASP.Net WebAPI HttpDelete/PUT方法运行或发布到生产服务器上后出现405（Method Not Allowed）错误的解决办法

    原文:ASP.Net WebAPI HttpDelete/PUT方法运行或发布到生产服务器上后出现405(Method Not Allowed)错误的解决办法 本文只是个人的理解和学习记录,如果觉得本 ...

随机推荐

  1. 微信小程序从零开始开发步骤（五）轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

  2. 各种join一目了然： join 、inner join、left join 、right join、full join

    各种join一幅图一目了然 一下每幅图都是指: A * join B on A.id = B.in 这个帖子也非常形象.比較好:http://www.phpddt.com/db/inner_join- ...

  3. intent- 启动其他应用

    今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...

  4. http 协议上传文件multipart form-data boundary 说明--转载

    原文地址:http://xixinfei.iteye.com/blog/2002017 含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协 ...

  5. Java学习笔记七 常用API对象三

    一.泛型:简单说就是对对象类型进行限定的技术 public class GenericDemo { public static void main(String[] args){ /*泛型作为1.5版 ...

  6. python使用大漠插件进行脚本开发的尝试(一)

    关于游戏脚本是纯然的小白,记一下学习过程遇到的问题.是在win10系统下对PC端的游戏进行脚本编辑,不知道会不会半途放弃. 一.大漠插件 大漠插件在游戏脚本编辑过程中是比较常见的工具,按我理解大致做的 ...

  7. 【Codeforces Round #453 (Div. 2) B】Coloring a Tree

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从根节点开始. 显然它是什么颜色.就要改成对应的颜色.(如果上面已经有某个点传了值就不用改 然后往下传值. [代码] #includ ...

  8. HttpClient的基本使用

    HttpClient的基本使用 前言 HttpClient是Apache提供的一个用于在Java中处理HTTP请求.响应操作的工具,由于JDK自带的API对HTTP协议的支持不是很友好,使用起来也不是 ...

  9. Leetcode:populating_next_right_pointers_in_each_node题解

    一.     题目 对于结构体:struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...

  10. 学习活动管理系统：LAMS

    学习活动管理系统:LAMS 一.总结 基于java的cms 二.LAMS Learning Activity Management System,学习活动管理系统. 数字化学习已经具有完整的发展方法来 ...