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. 查看oracle数据库的启动时间

    Oracle的sys用户下有个视图v_$instance,该视图只有一行数据.通过SQL语名可查询其内容: select * from sys.v_$instance 此视图可查看很多东西,如实例名, ...

  2. Spring有用功能--Profile、WebService、缓存、消息、ORM

    本篇介绍一些Spring与其它框架结合的有用功能,包含:Apache CXF WebService框架.Redis缓存.RabbitMQ消息.MyBatis框架. 另外对于Profile,也是Spri ...

  3. thinkphp最简单路由

    thinkphp最简单路由 一.总结 1.路由应用场景(前台要,后台不要):前台所有人都可以看,所以前台的话设置路由,后台的话并不是所有人都进去,所以不需要设置路由 2.模块分离来实现路由场景应用:前 ...

  4. mysql 造1亿条记录的单表--大数据表

    读写文件 背景及木:现有数据1000w单表,为压力测试准备1亿条数据. 步骤: 1.将1000w条记录,除id外都导入到多个文件中: //DELIMITER DROP PROCEDURE if EXI ...

  5. 使用缓存Memcache存储更新微信access token

    关键字:Memcache access_token 更新 存储 7200 本文介绍如何使用缓存Memcache存储及更新 access token的方法. 一.Access Token access_ ...

  6. MySQL乱码问题以及utf8mb4字符集---utf8mb4和utf8有什么区别？ emoji表情与utf8mb4

    utf8mb4兼容utf8,且比utf8能表示更多的字符. 关于emoji表情的话mysql的utf8是不支持,需要修改设置为utf8mb4,才能支持, 因为utf8mb4是utf8的超集

  7. 解决XCODE配置LLVM环境出现的问题

    问题描写叙述:在LLVM整合进XCODE的过程中出现符号没有定义导致出现未决函数或方法.但使用终端编译链接生成程序没有问题. 问题产生原因:未引用响应的LLVM库与系统库,以及编译器设置.连接器设置不 ...

  8. nuxt按需引入 element-UI、自定义主题色（终极按需引入）

    首先你要知道 nuxt.js怎么引入第三方插件 : 不多BB. 一.按需引入element-UI 第一步:安装 babel-plugin-component: npm install babel-pl ...

  9. Redis的高级应用-安全性和主从复制

    Redis的服务器命令和键值命令(String,Hash,List,Set,Zset)相对简单,只需查看文档即可. 文档地址: http://www.runoob.com/redis/redis-tu ...

  10. hibernate 注解配置<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/X

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...