CSS學習 - Positioning scheme (定位結構) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 16

0

自我挑戰組

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

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

14th鐵人賽

2022-10-03 20:38:39

380 瀏覽

分享至

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

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

排版中有兩類標籤

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

定位結構 (Positoininig scheme)

分成三類

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

小朋友下樓梯事前準備 - CSS 學習計畫

CSS 學習 - Overlapping and floating element

系列文

那些八年級生的經典迷你遊戲，前端JS自學之路共 20 篇

目錄

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙