iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

那些八年級生的經典迷你遊戲,前端JS自學之路系列 第 17

CSS學習 - Positioning scheme (定位結構)

  • 分享至 

  • xImage
  •  

接下來的CSS學習,會以閱讀HTML & CSS Design and Build Websites 作為學習手冊,且著重在排版相關的內容。

所以今天會直接跳到書中的章節15 - Layout來學習。

排版中有兩類標籤

  1. Block-level box
    • 每個box內容都會從新的一行開始
    • 相關的標籤:<h1><p><ul><li><div>
  2. Inlinie box
    • box 之前不會換行
    • 相關的標籤:<img> <b> <i>
    • 因為不會換行,所以若要區分不同的inline box,可以使用 borders, margins, padding, 或背景色

定位結構 (Positoininig scheme)

分成三類

  1. normal flow,預設的定位方式,eg. <body>, <h1>...
    • position: static;
  2. relative positioning: 相對於 normal flow 地移動 element
    • position: relative;
  3. absolute positioning:指定的offset 是與containing(parent) element之間相對出來的位置
    • position: absolute;
      額外一種:fix positioninig:
      是absolute positioning的其中一種類型,要指定fixed value;其位置是相對於整個瀏覽器視窗大小,所以當使用者將頁面往下滾的時候,他仍會在原本看到的地方(固定在頁面的某個位置)

上一篇
小朋友下樓梯 事前準備 - CSS 學習計畫
下一篇
CSS 學習 - Overlapping and floating element
系列文
那些八年級生的經典迷你遊戲,前端JS自學之路20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言