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. Myeclipse学习总结（3）——Myeclipse中的代码格式化、注释模板及保存时自动格式化

    设置Myeclipse中的代码格式化.注释模板及保存时自动格式化 1:设置注释的模板: 下载此模板:  codetemplates.xml This XML file does not appear ...

  2. 洛谷 P1852 奇怪的字符串

    P1852 奇怪的字符串 题目描述 输入两个01串,输出它们的最长公共子序列的长度 输入输出格式 输入格式: 一行,两个01串 输出格式: 最长公共子序列的长度 输入输出样例 输入样例#1: 复制 0 ...

  3. [Angular] Create a custom validator for reactive forms in Angular

    Also check: directive for form validation User input validation is a core part of creating proper HT ...

  4. Windows上安装多个MySQL实例（转）

    在学习和开发过程中有时候会用到多个MySQL数据库,比如Master-Slave集群.分库分表,开发阶段在一台机器上安装多个MySQL实例就显得方便不少. 在 MySQL教程-基础篇-1.1-Wind ...

  5. (cocos2d-js游戏)測试你的反应速度----------基本逻辑(上)

    游戏玩法:点击開始游戏.等待一个随机时间.然后背景颜色会变(在t1时刻),这时候你须要点击屏幕(在t2时刻),游戏结束.你的反应时间就是天t2-t1. 游戏逻辑: 游戏逻辑非常easy,如上图所看到的 ...

  6. 第二十八天 月出惊山鸟 —Spring的AOP

    6月13日,阴转细雨."人闲桂花落.夜静春山空. 月出惊山鸟.时鸣春涧中." 无论在面向过程还是在面向对象里,奇妙的"纯"字,似乎永远都充满了无限的可能性.除了 ...

  7. RHEL6安装调试过程中遇到的问题集

    /*** **问题集 2014/6/9 20:55:52** **Autor: Weigong Xu ** ***/ 1. Linux中开启22port: 22port是ssh服务的.你仅仅要启动ss ...

  8. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  9. Python 极简教程（十三）while 循环

    循环简单来说就是让一段代码按你想要的方式多次运行.软件拥有强大的运算能力,就是由循环提供的. 在 Python 中支持的循环由两种:while 循环 和for 循环. 现在我们先来讲while循环. ...

  10. [selenium]选取下拉框内容的方法

    说明:本文章主要是对select元素操作的讲解,非select元素的下拉框需要另外分析 1.select元素示例: 2.select下拉框选取的3种方法 WebElement selector = d ...