盒子模型——浮动、定位

盒子模型——浮动、定位

对页面结构进行修改和控制的方法

浮动

浮动是多个块标签处于同一行的位置处理方法。
浮动一共有两种，左浮动和右浮动；当盒子向左或向右进行浮动时，后面的元素会挤上来。

内边距、外边距和横向居中

1.增大内边距时，内边距不会向内部占用空间，而是将块标签放大来保证块标签内部容量不变。例如一个div的宽和高都为20px，又为其添加5px的内边距，那么这个div的宽高会变为25px，容量为20*20px。
2.外边距：当前块标签外部和父级块标签的距离。
3.如果要盒子居中，可以通过==margin:0 auto;==来实现，但是只能达到横向居中，因为一个网页的纵向是可以无线延申的。

定位

定位分为绝对定位、相对定位和相对浏览器定位。
原版图片：

绝对定位：
通过网页页面进行定位，释放本身原点位置。

				position: absolute;
				top: 200px;
				left: 500px;

相对定位：
相对于原版位置进行定位，不释放原点位置。

				position: relative;
				top: 20px;
				left: 200px;

3.相对浏览器定位
通过浏览器位置进行定位，不随页面的下拉等移动而移动；例如网页内的广告或者跳转界面。