css的定位机制

       牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计。一个不小心就很头疼,为此还是很有必要了解一下元素的定位机制。那么在介绍定位机制之前呢,还是有必要先了解一些和位置有关的基本内容。

       第一个需要了解的是盒子模型,在网页中所有的元素都是以盒子模型的方式存在的,即所有元素都可以看成是大小不一样的矩形“砖头”。在IE和Firefox中的开发人员工具中可以很直观的看到每个元素的盒子模型。ok了,有了以上的基本理解那么可以开始了。

       在css中定位机制包括:标准流,定位和浮动

       标准流:除非专门指定,否则所有元素都在标准流中定位。也就是说,标准流中的元素的位置由元素在HTML中的位置决定。块级元素从上到下一个接一个地排,列行内框在一行中水平布置。很明显这样生硬的规定是不灵活的,好比你玩俄罗斯方块不让你变换元素的方向直接堆放一样。所以,也就有了定位。

       定位:又分为相对定位和绝对定位。

       相对定位是指将元素从标准流中移动出来,即相对于它原来的位置进行偏移。但是它依然在标准流中占据着它原来的位置,因此相对其他元素而言它还是在原来的位置上。因此,偏移后的元素也就会覆盖在其他的元素上!那么实例代码如下,其效果如图:

#box_relative {
  position: relative;    /*relative是相对定位的关键字*/
  left: 30px;
  top: 20px;
}

        绝对定位的思想是和相对定位是一样的,即移动某个元素使其出现在独立于标准流之外的地方。而区别则在于,绝对定位不再在标准流中保存元素原来的位置。也就是说,在其他元素来看它是不存在的,它移动之后原来的位置将被别的元素取代。其代码如下,效果如图:

#box_relative {
  position: absolute;/*absolute为绝对定位关键字*/
  left: 30px;
  top: 20px;
}


 

       这里因为定位的原因出现的元素覆盖的问题,Css还提供了一个属性Z-index来调整元素的叠放次序。

       浮动:浮动是指把元素从表准流中独立出来,向左或者向右移动直到碰到另一个元素的边框。因为其脱离了标准流,那么在其他元素看来它就不存在了,于是它的位置会被顶替。如图所示:

 

 

    本篇博客到此结束,关于CSS的东西估计还需要再写一篇博客!

原文地址:https://www.cnblogs.com/james1207/p/3341943.html