前端盒子模型学习
2019-08-15 本文已影响0人
十二月的肖邦_
内容概要
本文主要学习盒子模型，以及两种盒子模型有什么区别，如何使用，如何变化。
盒子模型
CSS中的盒子模型就是一个盒子，如下图：
image.png
它包括了边距（margin）（它与别人之间的距离，透明的）、边框（border）、内边距（padding）（它里面的内容与边框的距离）和实际的内容（width、height）。
其中，这分为了W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
Content Box 列表W3C盒子模型(标准盒模型)
盒子中的内容空间的宽度是由width属性设置的，盒子的宽度也是由width+左右边框+左右内边距。
width指的是content，所以整个元素的宽高等于：width/height + padding + border;
有一点需要注意，元素的宽高和width/height没有必然的联系。
Border Box IE盒子模型(怪异盒模型)
这种模式下浏览器的width属性就不是内容的宽度了，而是内容、内边距、边框的总和。
width表示content+padding+border这三部分的宽度。换句话说，元素的宽高等于元素设置的width和height
margin、border、padding这些属性都有对应的left、right、top、bottom。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 100px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
盒子模型
</div>
</body>
</html>
打开网页的检查，可以看到整个盒子模型。
image.png
这里的宽度140就是width 200+20+20了。
对于简单的div的布局来说，空出来的区域就可以结合盒子模型的属性来设置了。比如div的左边要空出一些空间，就可以使用margin-left设定一个值来实现。
总结归纳
学习了解了盒子模型，以前不知道这个东西的时候，在对div进行布局的时候，总是使用top、left等属性来移动div制造出间隔，知道了盒子模型后，知道可以使用margin等的一些相关属性来布局，对布局方面来说提升挺多的。后面需要结合实践进一步理解盒子模型和两种盒子模型的区别。
