1. 程式人生 > 其它 >02-CSS中級學習筆記

02-CSS中級學習筆記

一.CSS佈局

  1.Display屬性

    規定是否/如何顯示元素。

    每個 HTML 元素都有一個預設的 display 值,具體取決於它的元素型別。(none,block,inline)

      block 塊級元素總是從新行開始,並佔據可用的全部寬度。(儘可能向左或向右伸展)

      inline 行內元素不從新行開始,僅佔據所需的寬度。

      none 通常和JavaScript一起使用,以隱藏和顯示元素,而無需刪除和重新建立他們。

    (注:display:none和visibility:hidden的區別,兩者都可以做到隱藏元素的效果,但前者隱藏後會刪除其佔據的空間,影響整體佈局,而後者不會刪除空間)

  2.Position 定位

    規定應用於元素的定位方法的型別(static、relative、fixed、absolute 或 sticky)。

      static靜態定位的元素不受 top、bottom、left 和 right 屬性的影響。

      relative元素相對於其正常位置進行定位。

      fixed元素是相對於視口定位的,這意味著即使滾動頁面,它也始終位於同一位置。

      absolute元素相對於最近的祖先元素進行定位。

      sticky元素根據使用者的滾動位置進行定位。

      z-index 重疊元素,指定元素的堆疊順序(哪個元素應放置在其他元素的前面或後面)

  3.Overflow 溢位

    指定在元素的內容太大而無法放入指定區域時是剪裁內容還是新增滾動條。

      visible預設。溢位沒有被剪裁。內容在元素框外渲染.

      hidden溢位被剪裁,其餘內容將不可見.

      scroll溢位被剪裁,同時新增滾動條以檢視其餘內容.

      auto與scroll類似,但僅在必要時新增滾動條.

    overflow-x:指定如何處理內容的左/右邊緣。

    overflow-y:指定如何處理內容的上/下邊緣。

  4.float 浮動

    用於定位和格式化內容,例如讓影象向左浮動到容器中的文字那裡。

      left元素浮動到其容器的左側.

      right元素浮動在其容器的右側.

      none元素不會浮動(將顯示在文字中剛出現的位置).預設值。

      inherit元素繼承其父級的 float 值.

    注:使用clear屬性可以清除浮動。

昨夜雨疏風驟,濃睡不消殘酒。試問卷簾人,卻道海棠依舊。知否知否,應是綠肥紅瘦!