div宽度设定width:100%后再设定padding或margin超过父元

序言

本文详细介绍的是运用CSS3的新特性box-sizing,处理div宽度设定width:100%后再设定padding或margin超过父元素的难题,有必须的盆友们能够参照效仿。

英语的语法

box-sizing: content-box|border-box|inherit;

值1、content-box 

这是由 CSS2.1 要求的宽度高宽比个人行为。

宽度和高宽比各自运用到元素的內容框。

在宽度和高宽比以外绘图元素的内边距和边框。

值2、border-box 

为元素设置的宽度和高宽比决策了元素的边框盒。

便是说,为元素特定的任何内边距和边框都将在已设置的宽度和高宽比内开展绘图。

根据从已设置的宽度和高宽比各自减去边框和内边距才可以获得內容的宽度和高宽比。

值3、inherit 

要求应从父元素承继 box-sizing 特性的值。

事例

<!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>

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。