区别div和span、relative和absolute、display和visibility

一、div与span的奥秘

二、relative与absolute的定位之旅

在CSS中，relative和absolute是两种常见的定位方式。Relative，即相对定位，它的定位是相对于父级元素的原始点，若无父级则相对于body的原始点。它配合TRBL（即上、右、下、左）进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点。而absolute，即绝对定位，它的定位是相对于浏览器窗口的左上角。它同样配合TRBL进行定位，若未设定TRBL则默认依据父级的坐标原始点为原始点。若设定了TRBL且父级没有设定position属性，那么当前的absolute元素将以浏览器左上角为原始点。

三、理解display与visibility的差别

在CSS中，display和visibility属性都与元素的显示有关，但它们有着明显的区别。当我们将一个元素的display属性设置为none时，这个元素就好像从页面中完全消失，它的位置也会被其他元素占据。而当我们设置元素的visibility为hidden时，元素的内容虽然被隐藏了，但它的位置空间仍然保留在页面中。这种差异使得我们在设计网页时可以根据需要灵活运用这两个属性。

div与span、relative与absolute、display与visibility这些CSS中的概念都有其独特的用途和差异。理解并熟练运用它们，将有助于我们更好地设计和开发网页。在这些概念的道路上，我们不断学习和成长，为网页设计注入更多的创意和活力。