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

最新推荐文章于 2024-03-27 15:43:36 发布

weixin_34216196

最新推荐文章于 2024-03-27 15:43:36 发布

阅读量445

点赞数

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9267411.html

版权

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、相关知识

语法

 
           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 
          >