重温前端基础之css盒模型

所有html元素都可以看作盒子。

css盒模型本质上是一个盒子&＃xff0c;封装周围的html元素,它包括&＃xff1a;外边距&＃xff0c;边框&＃xff0c;内边距和实际内容。

//W3C标准盒模型&＃xff08;浏览器默认&＃xff09;

box-sizing:content-box;

//IE怪异盒模型

box-sizing:border-box;

 

默认情况下&＃xff0c;一个元素的总宽度计算方式&＃xff1a;

总宽度&＃61;左外边距&＃43;左边框&＃43;左内边距&＃43;宽度&＃43;右内边距&＃43;右边框&＃43;右外边距。

div{

  width:300px;

  padding:10px;

  border:1px solid #eee;

  margin:10px;

}

该div的宽度是300px,但它在页面上所占据的总宽度是&＃xff1a;10&＃43;1&＃43;10&＃43;300&＃43;10&＃43;1&＃43;10&＃61;342px&＃xff1b;

这实际上是css中设置box-sizing:content-box的效果&＃xff0c;也就是说css盒子模型默认是box-sizing的content-box值。

 

box-sizing还有一个常用属性是border-box。其效果导致元素总宽度计算为&＃xff1a;

总宽度&＃61;左外边距&＃43;宽度&＃43;右外边距。

宽度&＃61;左边框&＃43;左内边距&＃43;实际内容宽度&＃43;右内边距&＃43;右边框。

拿上述例子&＃xff1a;div的总占宽度为10&＃43;300&＃43;10&＃61;320px;   div的实际内容宽度为:300-10-10-1-1&＃61;278px

 

box-sizing是CSS3的新属性&＃xff0c;为了避免在不同的浏览器中表现不同的情况产生&＃xff0c;我们可以这样使用

Element {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}