重温前端基础之-css盒模型

原文链接： https://www.mk2048.com/blog/blog.php?id=h01j2hbacckj&title=%E9%87%8D%E6%B8%A9%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E4%B9%8B-css%E7%9B%92%E6%A8%A1%E5%9E%8B

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

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

//W3C标准盒模型（浏览器默认）

box-sizing:content-box;

//IE怪异盒模型

box-sizing:border-box;

默认情况下，一个元素的总宽度计算方式：

总宽度=左外边距 左边框 左内边距 宽度 右内边距 右边框 右外边距。

div{

  width:300px;

  padding:10px;

  border:1px solid #eee;

  margin:10px;

}

该div的宽度是300px,但它在页面上所占据的总宽度是：10 1 10 300 10 1 10=342px；

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

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

总宽度=左外边距 宽度 右外边距。

宽度=左边框 左内边距 实际内容宽度 右内边距 右边框。

拿上述例子：div的总占宽度为10 300 10=320px;   div的实际内容宽度为:300-10-10-1-1=278px

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

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;
}

更多专业前端知识，请上 【猿2048】www.mk2048.com