CSS3學習教程，從入門到精通， CSS3 盒子模型的詳細語法知識點及案例代碼（23）

CSS3 盒子模型的詳細語法知識點及案例代碼

CSS3 盒子模型完整指南

一、盒子模型基礎

每個 HTML 元素都被視為一個矩形盒子，由以下部分組成：

  • 內容區 (Content)
  • 內邊距 (Padding)
  • 邊框 (Border)
  • 外邊距 (Margin)

二、語法知識點詳解

1. 盒子的寬和高
selector {width: 200px;       /* 內容區寬度 */height: 150px;      /* 內容區高度 */min-width: 100px;   /* 最小寬度 */max-height: 300px;  /* 最大高度 */
}
2. 盒子的邊框 (border)
selector {/* 完整寫法 */border-width: 2px;       /* 邊框寬度 */border-style: solid;     /* 樣式：solid/dashed/dotted/double等 */border-color: #ff0000;   /* 邊框顏色 *//* 簡寫形式 */border: 2px solid red;   /* 順序：width style color *//* 單邊設置 */border-top: 3px dashed blue;border-right: none;      /* 取消右邊框 */
}
3. 外邊距 (margin)
selector {margin: 10px;            /* 四邊相同 */margin: 10px 20px;       /* 上下 | 左右 */margin: 5px 10px 15px;   /* 上 | 左右 | 下 */margin: 5px 10px 15px 20px; /* 上 右 下 左 *//* 單邊設置 */margin-top: 20px;margin-left: auto;       /* 水平居中常用 */
}
4. 內邊距 (padding)
selector {padding: 15px;           /* 四邊相同 */padding: 10px 5%;        /* 上下 | 左右 */padding: 0;              /* 清除內邊距 *//* 單邊設置 */padding-bottom: 30px;
}
5. 背景 (background)
selector {background-color: #f0f0f0;  /* 背景色 */background-image: url("image.jpg"); /* 背景圖片 */background-repeat: no-repeat; /* 重復方式 */background-position: center;  /* 定位 */background-size: cover;       /* 尺寸控制 *//* 簡寫形式 */background: #fff url("bg.png") no-repeat center/cover;
}
6. 盒子尺寸計算 (box-sizing)
selector {box-sizing: content-box; /* 默認值：width/height只包含內容區 */box-sizing: border-box;  /* width/height包含內容+padding+border */
}
7. 盒子陰影 (box-shadow)
selector {box-shadow: h-shadow v-shadow blur spread color inset;/* 參數說明 *//* h-shadow: 水平陰影位置（必需） *//* v-shadow: 垂直陰影位置（必需） *//* blur: 模糊距離 *//* spread: 陰影尺寸 *//* color: 顏色 *//* inset: 內部陰影 *//* 示例 */box-shadow: 5px 5px 15px 2px rgba(0,0,0,0.3);
}
8. 圓角 (border-radius)
selector {border-radius: 10px;           /* 四角相同 */border-radius: 10px 20px;      /* 左上右下 | 右上左下 */border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 *//* 橢圓半徑 */border-radius: 50% 30% 20% 40%;/* 單邊設置 */border-top-left-radius: 8px;
}

三、案例代碼

案例1：基礎盒子模型
<div class="basic-box">Hello Box Model!</div><style>
.basic-box {width: 300px;height: 200px;padding: 20px;border: 3px solid #3498db;margin: 30px auto; /* 水平居中 */background-color: #f8f9fa;box-sizing: content-box; /* 默認 */
}
/* 總寬度 = width + padding*2 + border*2 = 300 + 40 + 6 = 346px */
</style>
案例2：border-box 對比
<div class="box-content">Content Box</div>
<div class="box-border">Border Box</div><style>
.box-content {width: 200px;padding: 20px;border: 5px solid red;background: #ffe6e6;margin: 10px;
}.box-border {width: 200px;padding: 20px;border: 5px solid blue;background: #e6f3ff;margin: 10px;box-sizing: border-box; /* 總寬度保持200px */
}
</style>
案例3：陰影與圓角應用
<div class="card">Hover Me</div><style>
.card {width: 250px;height: 150px;background: white;margin: 20px;padding: 20px;border-radius: 15px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);transition: all 0.3s;
}.card:hover {transform: translateY(-5px);box-shadow: 0 8px 16px rgba(0,0,0,0.2);border-radius: 25px 5px;
}
</style>
案例4：復雜邊框與背景
<div class="fancy-border">Special Box</div><style>
.fancy-border {width: 200px;height: 100px;padding: 20px;margin: 30px auto;background: linear-gradient(45deg, #ff6b6b, #4ecdc4),url("pattern.png");background-blend-mode: overlay;border: 3px double #2ecc71;border-radius: 15px 0 15px 0;box-shadow: inset 0 0 10px #2ecc71,5px 5px 15px rgba(0,0,0,0.3);
}
</style>
案例5：margin 合并現象
<div class="margin-box">Box 1</div>
<div class="margin-box">Box 2</div><style>
.margin-box {width: 200px;height: 50px;background: #3498db;margin: 20px 0;/* 實際垂直間距為20px（合并后），不是40px */
}
</style>

四、關鍵總結

  1. 尺寸計算：

    • content-box：總寬度 = width + padding + border
    • border-box：總寬度 = width (包含padding和border)

  2. 邊距合并：

    • 垂直相鄰塊級元素的margin會發生合并
    • 解決方法：使用padding代替或創建BFC

  3. 陰影技巧：

    • 多層陰影用逗號分隔：box-shadow: 陰影1, 陰影2;
    • 內陰影使用inset關鍵字

  4. 背景疊加：

    • 使用多背景時，先定義的圖片層級最高
    • background-blend-mode控制混合模式

  5. 開發建議：

    • 全局設置 box-sizing: border-box 更易控制布局
    * { box-sizing: border-box; }

通過調整案例中的數值，可以直觀觀察不同屬性的效果差異。建議使用瀏覽器開發者工具實時調試盒子模型參數！

五、案例代碼

以下是一些開發中常用的 實際案例，涵蓋盒子模型的各個核心屬性，每個案例都附帶詳細注釋和應用場景說明：

案例 1：響應式卡片布局（綜合應用）

場景：商品卡片展示，包含內邊距、陰影、圓角和背景控制。

<div class="product-card"><img src="product.jpg" class="card-image"><div class="card-content"><h3 class="title">商品名稱</h3><p class="price">￥199.00</p></div>
</div><style>
.product-card {width: 300px;background: white;border-radius: 12px;          /* 圓角 */box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 陰影 */margin: 20px;                 /* 外邊距 */overflow: hidden;             /* 隱藏圖片溢出部分 */box-sizing: border-box;       /* 確保尺寸計算包含padding */
}.card-image {width: 100%;height: 200px;object-fit: cover;border-bottom: 2px solid #eee; /* 底部邊框 */
}.card-content {padding: 20px;               /* 內邊距 */
}.title {margin: 0 0 10px 0;          /* 下外邊距 */color: #333;
}.price {color: #e74c3c;margin: 0;                   /* 清除默認外邊距 */
}
</style>

關鍵點：

  • 使用 box-sizing: border-box 確保布局穩定
  • overflow: hidden 處理圖片超出容器的情況
  • 陰影和邊框組合提升視覺層次
案例 2：靈活按鈕組件（邊距與圓角）

場景：可復用按鈕組件，支持不同尺寸和狀態。

<button class="btn primary">主要按鈕</button>
<button class="btn secondary">次要按鈕</button><style>
.btn {/* 基礎樣式 */padding: 12px 24px;          /* 內邊距 */border: none;border-radius: 25px;         /* 膠囊圓角 */margin: 10px;cursor: pointer;transition: all 0.3s ease;box-sizing: border-box;font-size: 16px;
}/* 不同變體 */
.primary {background: #3498db;color: white;box-shadow: 0 4px 6px rgba(52,152,219,0.2);
}.secondary {background: #f1f1f1;color: #333;border: 1px solid #ddd;      /* 邊框替代背景色 */
}/* 懸停狀態 */
.btn:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}/* 禁用狀態 */
.btn:disabled {opacity: 0.6;cursor: not-allowed;
}
</style>

關鍵點：

  • 使用 padding 控制按鈕點擊區域
  • border-radius 創建不同形狀（圓形/膠囊形）
  • 陰影實現懸浮效果
案例 3：高級邊框效果（偽元素實現）

場景：實現漸變邊框和裝飾性角標。

<div class="fancy-box"><div class="content">特殊邊框效果</div>
</div><style>
.fancy-box {position: relative;width: 300px;padding: 2px;                /* 為偽元素留出空間 */background: linear-gradient(45deg, #ff6b6b, #4ecdc4);border-radius: 12px;margin: 30px auto;
}/* 通過偽元素實現內層背景 */
.fancy-box::after {content: "";position: absolute;top: 2px;left: 2px;right: 2px;bottom: 2px;background: white;border-radius: 10px;         /* 比外層小2px */z-index: 1;
}.content {position: relative;padding: 20px;z-index: 2;                  /* 確保內容在偽元素上方 */
}/* 添加裝飾角標 */
.fancy-box::before {content: "HOT";position: absolute;top: -10px;right: -10px;background: #e74c3c;color: white;padding: 5px 15px;border-radius: 20px;z-index: 3;font-size: 12px;
}
</style>

關鍵點：

  • 使用偽元素實現復雜邊框效果
  • z-index 控制圖層疊加順序
  • 絕對定位實現裝飾性元素
案例 4：間距系統實用類（Margin/Padding）

場景：快速構建布局的間距工具類。

<div class="mt-20 mb-40 pl-15">內容區塊</div><style>
/* Margin 工具類 */
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-40 { margin-bottom: 40px !important; }/* Padding 工具類 */
.pl-15 { padding-left: 15px !important; }
.pr-30 { padding-right: 30px !important; }/* 響應式示例 */
@media (max-width: 768px) {.md-mt-0 { margin-top: 0 !important; }
}
</style>

關鍵點：

  • 使用 !important 確保優先級
  • 數字后綴表示像素值（實際項目建議使用rem）
  • 響應式前綴處理不同屏幕尺寸
案例 5：動態輸入框（Focus狀態增強）

場景：帶交互效果的輸入框，聚焦時改變邊框和陰影。

<div class="input-group"><input type="text" placeholder="請輸入內容">
</div><style>
.input-group {margin: 15px 0;
}input {width: 100%;padding: 12px 20px;border: 2px solid #ddd;border-radius: 8px;box-sizing: border-box;transition: all 0.3s ease;
}input:focus {outline: none;border-color: #3498db;box-shadow: 0 0 8px rgba(52,152,219,0.3);
}
</style>

關鍵點：

  • outline: none 去除默認聚焦樣式
  • 使用過渡動畫平滑狀態變化
  • 陰影實現柔和的高光效果
案例 6：等高列布局（Padding補償法）

場景：實現兩側有邊距的等高列布局。

<div class="column-container"><div class="column">左側內容</div><div class="column">右側內容</div>
</div><style>
.column-container {margin: 0 -15px; /* 抵消列的邊距 */display: flex;
}.column {flex: 1;background: #f8f9fa;margin: 0 15px;  /* 列間距 */padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
</style>

關鍵點：

  • 使用負margin解決flex布局的間距問題
  • 內外邊距組合控制元素間隔
  • 陰影增加視覺分隔

開發技巧總結

  1. 調試工具：使用瀏覽器開發者工具的 盒模型檢查器（Elements → Computed）

  2. 重置默認樣式：

    * { margin: 0; padding: 0; box-sizing: border-box; }

  3. 間距系統：建議使用 rem 單位 + CSS變量 定義間距尺度

  4. 邊框技巧：

    • 使用 transparent 占位隱藏邊框
    • 通過 border-image 實現漸變邊框

  5. 性能優化：避免過度使用陰影和復雜背景（特別是移動端）

這些案例涵蓋了常見的布局需求和視覺效果，通過調整數值和組合屬性，可以快速構建出專業級的界面組件！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/73909.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/73909.shtml
英文地址，請注明出處：http://en.pswp.cn/web/73909.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

《Linux運維實戰：Ubuntu 22.04修改root用戶默認名并禁止登錄》

《Linux運維實戰：Ubuntu 22.04修改root用戶默認名并禁止登錄》

總結&#xff1a;整理不易&#xff0c;如果對你有幫助&#xff0c;可否點贊關注一下&#xff1f; 更多詳細內容請參考&#xff1a;Linux運維實戰總結 一、背景信息 由于安全方面的考慮&#xff0c;先要求Ubuntu 22.04系統重的root用戶禁止登錄&#xff0c;并修改用戶名root為ad…
閱讀更多...
docker-compose自定義網絡，解決docker-compose網段路由沖突

docker-compose自定義網絡，解決docker-compose網段路由沖突

問題排查 先route一波查看一下路由表 容器路由19和堡壘機路由沖突 解決方案 更改docker網段更改docker生成容器的網段 > 基本操作 docker network ls &#xff1a;查看docker網絡列表 docker network inspect <network id/name>&#xff1a;查看某個docker網絡詳情…
閱讀更多...
前端 - ts - - declare聲明類型

前端 - ts - - declare聲明類型

在使用typeScript的項目中 需要聲明屬性類型 單獨的局部屬性 可以直接在當前文件中聲明 全局屬性需要在項目根目錄下新建.d.ts文件 vite會自動識別.d.ts類型文件 在該文件中使用declare聲明類型有三種寫法 1、在某種類型的文件中聲明 2、聲明window上的屬性類型 3、全局聲明…
閱讀更多...
[Mac]利用Hexo+Github Pages搭建個人博客

[Mac]利用Hexo+Github Pages搭建個人博客

由于我這臺Mac基本沒啥環境&#xff0c;因此需要從零開始配置&#xff0c;供各位參考。 注意??&#xff1a;MacBook (M4)使用/bin/zsh作為默認Shell&#xff0c;其對應的配置文件為~/.zshrc 參考文檔&#xff1a; HEXO系列教程 | 使用GitHub部署靜態博客HEXO | 小白向教程 文…
閱讀更多...
運維面試題（十一）

運維面試題（十一）

1.如果一個硬盤 IO 時阻塞了&#xff0c;會發生什么情況&#xff1f; 進程/線程掛起&#xff1a;發起I/O操作的進程或線程會被操作系統置為阻塞狀態&#xff08;等待狀態&#xff09;&#xff0c;直到I/O完成。CPU資源釋放&#xff1a;阻塞的線程會讓出CPU&#xff0c;操作系統…
閱讀更多...
sql2022 復制 事務級別發布后無法刪除

sql2022 復制 事務級別發布后無法刪除

Cannot execute as the database principal because the principal "dbo" does not exist, this type of principal cannot be impersonated, or you do not have permission. 用SA用戶登錄執行下列語句 USE [xxxxx] GO EXEC dbo.sp_changedbowner loginame Nsa, …
閱讀更多...
合規+增效 正也科技攜智能營銷產品出席中睿論壇

合規+增效 正也科技攜智能營銷產品出席中睿論壇

正也科技作為醫藥數字化領域的標桿企業&#xff0c;受邀參展第二屆中睿醫健產業企業家年會暨第十三屆中睿醫藥新春論壇&#xff0c;本次論壇以“合力啟新程”為主題&#xff0c;吸引了800多位醫藥健康企業的董事長、總經理參與&#xff0c;并通過主論壇、分論壇、路演等形式探討…
閱讀更多...
ubuntu 安裝 postgresql

ubuntu 安裝 postgresql

在 Ubuntu 系統中安裝 PostgreSQL 的步驟如下&#xff1a; 步驟 1&#xff1a;更新軟件包列表 sudo apt update步驟 2&#xff1a;安裝 PostgreSQL Ubuntu 默認倉庫包含 PostgreSQL&#xff0c;直接安裝&#xff1a; sudo apt install postgresql postgresql-contrib -ypost…
閱讀更多...
智能巡檢機器人：2025年企業安全運維的“數字哨兵“

智能巡檢機器人：2025年企業安全運維的“數字哨兵“

文章目錄 一、2025年&#xff0c;為什么企業需要智能巡檢機器人&#xff1f;二、2025年智能巡檢機器人的六大核心價值三、2025行業落地實景1. 電網系統——"巡線鷹"集群作戰2. 化工園區——"防爆衛士"全天候守護3. 數據中心——"冷血偵探"精準運…
閱讀更多...
K8S學習之基礎五十一：k8s部署jenkins

K8S學習之基礎五十一：k8s部署jenkins

k8s部署jenkins 創建nfs共享目錄&#xff0c; mkdir -p /data/v2 echo /data/v2 *(rw,no_root_squash) > /etc/exports exportfs -arv創建pv、pvc vi pv.yaml apiVersion: v1 kind: PersistentVolume metadata:name: jenkins-k8s-pv spec:capacity:storage: 1GiaccessMod…
閱讀更多...
Vue實現的表格多選方案支持跨頁選擇和回顯功能

Vue實現的表格多選方案支持跨頁選擇和回顯功能

以下是純Vue實現的表格多選方案&#xff08;不依賴UI庫&#xff09;&#xff0c;支持跨頁選擇和回顯功能&#xff1a; <template><div class"custom-table"><!-- 表格主體 --><table><thead><tr><th><input type"…
閱讀更多...
Oracle 19C 備份

Oracle 19C 備份

在 Oracle 19c 中&#xff0c;備份數據庫通常使用 RMAN&#xff08;Recovery Manager&#xff09; 工具&#xff0c;它是 Oracle 提供的官方備份和恢復工具。以下是通過 RMAN 備份 Oracle 19c 數據庫的詳細步驟和命令。 一、RMAN 基本概念 RMAN 是 Oracle 的備份和恢復工具&am…
閱讀更多...
Elasticsearch：人工智能時代的公共部門數據治理

Elasticsearch：人工智能時代的公共部門數據治理

作者&#xff1a;來自 Elastic Darren Meiss 人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;GenAI&#xff09;正在迅速改變公共部門&#xff0c;從理論探討走向實際應用。正確的數據準備、管理和治理將在 GenAI 的成功實施中發揮關鍵作用。 我們最近舉辦了…
閱讀更多...
AT24Cxx移植第三方庫到裸機中使用

AT24Cxx移植第三方庫到裸機中使用

簡介 MCU : STM32F103C8T6 庫: HAL庫裸機開發 EEPROM : AT24C02, 256Byte容量&#xff0c;I2C接口 電路圖 AT24C02 電路圖 電路圖引用 裸機直接讀寫 // 寫入數據到 EEPROM HAL_StatusTypeDef EEPROM_WriteByte(uint16_t MemAddress, uint8_t Data) {// 發送數據uint8_t …
閱讀更多...
算法刷題記錄——LeetCode篇(1.3) [第21~30題](持續更新)

算法刷題記錄——LeetCode篇(1.3) [第21~30題](持續更新)

更新時間&#xff1a;2025-03-29 LeetCode題解專欄&#xff1a;實戰算法解題 (專欄)技術博客總目錄&#xff1a;計算機技術系列目錄頁 優先整理熱門100及面試150&#xff0c;不定期持續更新&#xff0c;歡迎關注&#xff01; 21. 合并兩個有序鏈表 將兩個升序鏈表合并為一個…
閱讀更多...
常用數據庫

常用數據庫

模式的定義于刪除 1.定義模式 CREATE SCHEMA [ <模式名> ] AUTHORIZATION < 用戶名 >;要創建模式&#xff0c;調用該命令的用戶必須擁有數據庫管理員權限&#xff0c;或者獲得了DBA授權 eg:為用戶WANG定義一個模式S-C-SC CREATE SCHEMA "S-C-SC" AUT…
閱讀更多...
Processor System Reset IP 核 v5.0（vivado）

Processor System Reset IP 核 v5.0（vivado）

這個IP的作用&#xff0c;我的理解是&#xff0c;比普通按鍵復位更加高效靈活&#xff0c;可以配置多個復位輸出&#xff0c;可以配置復位周期。 1、輸入信號&#xff1a; 重要的信號有時鐘clk信號&#xff0c;一般連接到系統時鐘&#xff1b;輸入復位信號&#xff0c;一般是外…
閱讀更多...
3月29日星期六今日早報簡報微語報早讀

3月29日星期六今日早報簡報微語報早讀

3月29日星期六&#xff0c;農歷三月初一&#xff0c;早報#微語早讀。 1、全國公立醫療機構自3月31日起全面停止收取門診預交金&#xff1b; 2、永輝超市“胖東來調改店”已達47家店 一線員工薪酬漲幅50%以上&#xff1b; 3、兩孩家庭補10萬&#xff0c;三孩家庭補20萬&#…
閱讀更多...
pyinstaller 對 pyexecjs模塊打包老會有終端框閃爍

pyinstaller 對 pyexecjs模塊打包老會有終端框閃爍

解決辦法&#xff1a; 修改 execjs 源代碼 具體步驟 1. 在 execjs 源文件中&#xff0c;找到 _external_runtime.py 文件中的以下代碼 p Popen(cmd, startupinfostartupinfo, stdinPIPE, stdoutPIPE, stderrPIPE, cwdself._cwd,universal_newlinesTrue)2. 修改為&#xff…
閱讀更多...
代碼隨想錄day2 數組總結

代碼隨想錄day2 數組總結

1.二分查找 2.快慢 雙指針 代碼隨想錄day1-CSDN博客 3.滑動窗口 滑動窗口就是有一個起始位置&#xff0c;一個終止位置&#xff0c;通過調節起始位置和終止位置得到我們想要的結果。 外面一層for循環 用來更新終止位置 不滿足條件 終止位置右移 里面一層while循環 …
閱讀更多...
最新文章

Copyright @ 2022~2023