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. 一个简易版的Angular js 三层 示例

    var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...

  2. ZOJ 3524 Crazy Shopping

    Crazy Shopping Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...

  3. 怎样在nat方式的虚拟机下做ssh连接

    很多人在本机做測试都是用桥接的方式让虚拟机上网. 假设ip地址紧张或者根本就不同意我们拥有一个局域网的ip.这时候便能够使用NAT方式+putty来远程操作. 第一步,打开设备-Network-更改网 ...

  4. OSI模型与TCP/IP协议族

    OSI模型与TCP/IP协议族 年之后,TCP/IP协议族逐渐成为占主导的商用体系结构,广泛应用于Internet中,并通过广泛的測试.而OSI模型从来没有被全然实现过. 一．OSI模型: OSI与I ...

  5. node----ajax请求太大报错------解决方法

    //----分析主体程序var bodyParser = require(‘body-parser‘); app.use(bodyParser.json({limit: ‘50mb‘})); app. ...

  6. Ubuntu系统简介

    1.ubuntu 远程连接 需要开启ssh 服务 sudo apt-get install openssh-server service ssh start|stop|restart 2.查看Linu ...

  7. Linux中iptables学习

    防火墙:是一种位于内部网络与外部网络之间安全的防护系统,依照特定的规则,允许或是限制传输的数据通过.iptables通常被用作类UNIX系统中的防火墙,更准确的说,可以称为iptables/netfi ...

  8. 【Codeforces Round #429 (Div. 2) A】Generous Kefa

    [Link]:http://codeforces.com/contest/841/problem/A [Description] [Solution] 模拟,贪心,每个朋友尽量地多给气球. [Numb ...

  9. Solr 读数据流程

    Solr 读数据流程: 1.用户提供搜索关键词,也就是搜索语句,需要经过分词器处理以及语言处理. 2.对处理之后的关键词,搜索索引找出对应Document 即记录. 3.用户根据需要从找到的Docum ...

  10. Writing Images to the Excel Sheet using PHPExcel--转载

    原文地址:http://www.walkswithme.net/writing-images-to-the-excel-sheet-using-phpexcel Writing images to t ...