盒子模型——浮动、定位
对页面结构进行修改和控制的方法
浮动
浮动是多个块标签处于同一行的位置处理方法。
浮动一共有两种,左浮动和右浮动;当盒子向左或向右进行浮动时,后面的元素会挤上来。
内边距、外边距和横向居中
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.相对浏览器定位
通过浏览器位置进行定位,不随页面的下拉等移动而移动;例如网页内的广告或者跳转界面。