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. 最简单的基于FFmpeg的移动端例子：Android 视频转码器

    http://blog.csdn.net/leixiaohua1020/article/details/47056365

  2. 47.Android 自己定义PopupWindow技巧

    47.Android 自己定义PopupWindow技巧 Android 自己定义PopupWindow技巧 前言 PopupWindow的宽高 PopupWindow定位在下左位置 PopupWin ...

  3. WordPress出现Briefly unavailable for scheduled maintenance. Check back in a minute. 的解决方法

    WordPress出现 Briefly unavailable for scheduled maintenance. Check back in a minute. 解决方法: 登入FTP,然后把Wo ...

  4. java——简单理解线程

    一·[概念]       一般来说,我们把正在计算机中运行的程序叫做"进程"(process),而不将其称为"程序"(program). 所谓"线程& ...

  5. malloc,colloc,realloc内存分配，动态库，静态库的生成与调用

     1.在main方法里面直接定义一个很大的数组的时候.可能会出现栈溢出:错误代码演示: #include<stdio.h> #include<stdlib.h> void ...

  6. Elasticsearch入门系列~通过Java一系列操作Elasticsearch

    Elasticsearch索引的创建.数据的增删该查操作 上一章节已经在Linux系统上安装Elasticsearch并且可以外网访问,这节主要通过Java代码操作Elasticsearch 1.创建 ...

  7. HDU——T 2824 The Euler function

    http://acm.hdu.edu.cn/showproblem.php?pid=2824 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  8. [NPM] Test npm packages locally in another project using npm link

    We will import our newly published package into a new project locally to make sure everything is wor ...

  9. theme-windowAnimationStyle 动画四个方法的意义

    首先看代码 <style name="Animation.Activity"> <!--A打开B,B的出现动画--> <item name=" ...

  10. Bootstrap时间控件常用配置项

    1.给下面4个文本框初始化   $(function(){ $("#orderStartTime,#orderEndTime,#preSaleStartTime,#preSaleEndTim ...