实训中学到的HTML基础知识（3）

今天是实训的第四天，正式上课的第三天，今天学习的是HTML中的盒子模型和CSS中的position定位,因为盒子模型在上一篇文章介绍过了，今天就稍微补充一下，重点是position。

一、盒子模型（margin、padding和border）

这是上一篇文章中的盒子模型，关于盒子模型我的理解是：border是一个边框，padding（内边距）是这个边框到相片的留白，而margin则是在整个相片内容到整个相框的相对位置。这是我的理解。

二、position定位

position的四个值：static、relative、absolute、fixed，static是默认值，relative是相对定位，而absolute和fixed统称为绝对定位。

1、relative：相对于原来位置的移动，元素设置此属性后仍然处在文档流中，不影响其他元素的布局。

这是正常的文档流

而改变为相对定位的CSS则是

相对定位仅改变自身位置，相对于原来的位置进行移动，不改变其他的属性。

2、absolute：元素会脱离文档流，如果设置了偏移量，会影响其他元素的位置定位。

绝对定位正常的文档流

而改变了绝对定位的CSS

在设置了absolute属性后，当前改变的元素的位置会被后面的元素填充上位置。

 

fixed和static暂且不提。