當前位置:編程學習大全網 - 編程軟體 - CSS布局浮動(float)和定位(position)屬性的區別和如何使用

CSS布局浮動(float)和定位(position)屬性的區別和如何使用

float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;display: inline-block 有些時候可以替代float實現相同的效果.

position: absolute|relative; 要配合top,left等定位;

position: absolute會導致元素脫離文檔流,被定位的元素等於在文檔中不占據任何位置,在另壹個層呈現,可以設置z-index。PS的圖層效果就是position: absolute。

float也會導致元素脫離文檔流,但還在文檔或容器中占據位置,把文檔流和其它float元素向左或向右擠,並可能導致換行。圖片的文字環繞布局效果就是float。

display的inline-block不脫離文檔流,將block元素當作大型字符嵌入文檔流內,類似於img或者input默認效果。

  • 上一篇:D觸發器是如何工作的?
  • 下一篇:晶振為12MHZ利用定時器T1,工作方式1,用來生產1秒鐘定時,試說明有關定時器特殊功能寄存器設置及編程思路
  • copyright 2024編程學習大全網