css3 box-sizing

设定元素 box-sizing : border-box;

.box1, .box2{
  float : left;
  margin-right : 20px;
  height : 100px;
  width : 100px;
}
.box2 {
    padding : 5px;
    border-bottom : 5px solid red;
    -moz-box-sizing : border-box;
    -webkit-box-sizing : border-box;
    -o-box-sizing : border-box;
    box-sizing : border-box;
}

 

元素的高度 ＝ content height + border + padding;

现代浏览器都支持此属性，ie8+支持

box-sizing : content-box;

.box1, .box2{
  float : left;
  margin-right : 20px;
  height : 100px;
  width : 100px;
}
.box2 {
    padding : 5px;
    border-bottom : 5px solid red;
}

元素高度 ＝ content height(包含了 padding + border);

box-sizing : inherit; 从父元素继承box-sizing的属性