盒模型 – 初始化

更新於 發佈於 閱讀時間約 2 分鐘

※ 網頁開發前必做的初始化:

目的:

  • 統一不同瀏覽器的預設樣式。
  • 建立一致的視覺基底。
  • 減少意外排版問題

※ 初始化有兩種:

raw-image

※ reset.css操作:

網址:https://meyerweb.com/eric/tools/css/reset/

複製內容:

raw-image

專案內容開啟新的檔案:

raw-image

將內容複製貼到reset.css檔案中:

raw-image

index.html:載入連結

<link rel="stylesheet" href="./css/reset.css">
raw-image

畫面顯示:

raw-image

※ normalize.css操作:

網址:https://necolas.github.io/normalize.css/

下載檔案:

raw-image


將內容複製或另存貼到normalize.css檔案中:

raw-image

index.html:載入連結

<link rel="stylesheet" href="./css/normalize.css">

畫面顯示:

raw-image





留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
2025/07/22
※ Display介紹: 說明:展示的屬性的意思,就是來決定元素在瀏覽器中如何呈現的方式。 ※ Display展示屬性: 有以下幾種設定: block:在預設的情況下,div和paragraph的標籤預設的display都是block。 inline-block:讓元素可以排在同一個行內的
Thumbnail
2025/07/22
※ Display介紹: 說明:展示的屬性的意思,就是來決定元素在瀏覽器中如何呈現的方式。 ※ Display展示屬性: 有以下幾種設定: block:在預設的情況下,div和paragraph的標籤預設的display都是block。 inline-block:讓元素可以排在同一個行內的
Thumbnail
2025/07/22
※ 樣式規則: 規則一: 名稱一樣,後寫的樣式會寫掉前面的樣式。 範例一: 前面的樣式: .color5 { background-color: #F3D4D4; height: 300px; } 顯示畫面: 後面的樣式: .color5 { background-col
Thumbnail
2025/07/22
※ 樣式規則: 規則一: 名稱一樣,後寫的樣式會寫掉前面的樣式。 範例一: 前面的樣式: .color5 { background-color: #F3D4D4; height: 300px; } 顯示畫面: 後面的樣式: .color5 { background-col
Thumbnail
2025/07/19
※ 盒模型介紹: 什麼是盒模型? 說明:在CSS定義底下的模型結構,此結構有助於建構網頁介面。 盒模型的四大內容: 說明: margin:指的是元素外部的空間。用途是常被用來做元件跟元件之間上下和左右的推擠,也就是調整與其他元素之間的距離。常被用來做排版布局,讓元素之間不會互相「打架」。
Thumbnail
2025/07/19
※ 盒模型介紹: 什麼是盒模型? 說明:在CSS定義底下的模型結構,此結構有助於建構網頁介面。 盒模型的四大內容: 說明: margin:指的是元素外部的空間。用途是常被用來做元件跟元件之間上下和左右的推擠,也就是調整與其他元素之間的距離。常被用來做排版布局,讓元素之間不會互相「打架」。
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面
Thumbnail
建構Anytype之前..... 1.清晰劃分工作區 2.選擇模板套用 3.改變外觀界面
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
網站建置後,為了確保優秀的使用者體驗和網站的功能性,進行徹底的後續優化和測試是不可或缺的。以下是建議的重點測試項目: 響應式網頁設計(RWD)測試: 確保網站在各種設備(如桌面電腦、平板和手機)上均展示良好。這包括在不同的屏幕尺寸和解析度上測試,確保網站能夠自如適應不同的顯示需求。
Thumbnail
網站建置後,為了確保優秀的使用者體驗和網站的功能性,進行徹底的後續優化和測試是不可或缺的。以下是建議的重點測試項目: 響應式網頁設計(RWD)測試: 確保網站在各種設備(如桌面電腦、平板和手機)上均展示良好。這包括在不同的屏幕尺寸和解析度上測試,確保網站能夠自如適應不同的顯示需求。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News