css布局模型和定位机制

CSS是网页设计中不可或缺的一部分，负责网页的美化和布局。其中布局模型和定位机制是CSS的核心内容。

CSS的布局模型是指网页中元素的排列方式，分为两种：流动模型和定位模型。

流动模型：
div{
  width:200px;
  height:200px;
}

流动模型就是指元素按照其在文档流中的位置自然排列，不进行任何额外的定位。用div的宽度和高度作为例子，它们不会影响其他元素的排列，而是会撑开其内容所包含的区域。

定位模型：
div{
  position:absolute;
  top:50px;
  left:50px;
}

而定位模型则是指元素在网页中的位置不是由文档流控制的，可能会被遮挡或者遮挡其他元素。在上述例子中，div元素会被定位到文档流的(50px,50px)位置。

定位机制是指CSS规定的元素用来定位的方式，分为四种：相对定位、绝对定位、固定定位、粘性定位。

相对定位：
div{
  position:relative;
  left:50px;
  top:50px;
}

相对定位是指元素相对于其原来的位置进行偏移，而不改变其他元素的布局方式。在相对定位中，会优先使用原本的布局方式，再进行偏移。

绝对定位：
div{
  position:absolute;
  top:50px;
  left:50px;
}

绝对定位是指元素脱离文档流，相对于其最近的定位祖先元素进行定位。如果没有定位祖先元素，则相对于浏览器窗口进行定位。

固定定位：
div{
  position:fixed;
  top:50px;
  left:50px;
}

固定定位与绝对定位类似，但是相对于浏览器窗口进行定位，不受滚动条的影响。

粘性定位：
div{
  position:sticky;
  top:50px;
}

粘性定位相当于相对定位和固定定位的结合体，当元素即将移出浏览器窗口时，元素会固定在屏幕上方，直到用户向下滚动。

CSS的布局模型和定位机制，为开发者提供了更多的选择，可以根据需要来决定如何排列和定位元素，从而实现期望的布局效果。