div宽度设置width-100%后再设置padding或margin超出父元

CSS3新属性box-sizing：解决div元素宽度设置的难题

你是否曾在设置div元素的宽度为width:100%后，因为添加了padding或margin而使其超出了父元素的边界？这是一个常见的问题，但CSS3的一个新属性box-sizing可以完美解决这一问题。今天，让我们一起这个神奇的属性。

在CSS中，box-sizing属性决定了元素的总宽度和高度如何计算。这是一个强大的属性，拥有三个可能的值：content-box、border-box和inherit。

content-box是CSS2.1规定的默认宽度和高度行为。在这种模式下，元素的宽度和高度仅适用于内容框，边框和填充是在内容框之外绘制的。这意味着如果你设置了一个元素的宽度为100%，然后添加了填充或边距，元素可能会超出其父元素的边界。

border-box模式则完全不同。在这种模式下，元素的宽度和高度决定了元素的边框盒大小。这意味着你添加的任何填充或边框都会在已设定的宽度和高度内进行绘制。这使得元素不会超出其父元素的边界，无论你是否添加了填充或边距。

那么，如何使用这个神奇的属性呢？以下是一个简单的例子：

```html

``` 以上的代码片段中创建了一个父容器和两个子元素。由于使用了border-box模式，子元素不会超出父元素的边界，即使添加了填充或边距。这对于创建响应式布局非常有用。以上就是关于CSS3的box-sizing属性的介绍和使用方法。希望这篇文章能帮助你解决在使用div元素时遇到的宽度问题。如果你有任何疑问或需要进一步的讨论，欢迎留言交流。