資訊專欄INFORMATION COLUMN
摘要：上篇文章總結(jié)了塊級元素和行內(nèi)元素這篇文章總結(jié)了有關(guān)盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。在盒子模型中我們設(shè)置的指的是盒子真實占有寬高即如的寬高。
上篇文章總結(jié)了塊級元素和行內(nèi)元素
這篇文章總結(jié)了有關(guān)盒子模型的知識，助于梳理知識
首先，什么是盒子模型
我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。
盒子模型的組成
盒子模型包含四個重要的部分：
content(width、height):盒子內(nèi)容寬高
padding:內(nèi)邊距(填充)
border:邊框
margin:外邊距
重點：對于盒子來說，設(shè)置的寬高和真實占有寬高是不一樣的
如圖（一般我們以標(biāo)準(zhǔn)盒子模型為主學(xué)習(xí)）
在標(biāo)準(zhǔn)盒子模型中,我們用css屬性中的設(shè)置width,height其實是內(nèi)容content的寬高，如果增加邊距和邊框?qū)黾雍凶拥膶挾龋ㄒ簿褪钦f,如果padding,margin,border都為0的話，盒子真實占有寬度和內(nèi)容寬度是一樣的）。
在IE盒子模型中,我們設(shè)置的width、height指的是盒子真實占有寬高,即如content+border+padding的寬高。
PS：
在瀏覽器，有一些元素有著默認的設(shè)置margin,padding,border,這也是我們寫css時一般加入*{margin:0;padding:0}重置樣式的原因。
注意,盒子模型是立體的，即組成盒子的每個部分有著各自的層次
border----->content+padding----->background-image----->background-color----->margin 如下圖：
即：
第1層：盒子的邊框(border)，
第2層：元素的內(nèi)容(content)、內(nèi)邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)
那么這些層級有什么用呢？
通過這些層級顯示，我們可以知道優(yōu)先級的問題：
比如同時設(shè)置背景圖和背景色時，背景圖將會在背景色上方顯示
原情況（有背景圖無背景色）：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
.box {
width:400px;
height: 200px;
margin:100px auto;
background-image: url(1.jpg);
/*background-color: gray;*/
}
style>
head>
<body>
<div class="box">
div>
body>
html>
效果圖：
沒有背景圖只有背景色時：
有背景圖有背景色時：
背景色被背景圖直接覆蓋了。
如何查看網(wǎng)頁中的元素的盒子具體情況？？
此處以chrome瀏覽器為例，其他瀏覽器大同小異：
使用F12查看網(wǎng)頁源代碼，選擇一個元素，點擊右邊界面的Computed選項卡即可：
參考文章：
CSS盒模型詳解（圖文教程）
深入理解css盒子模型
CSS學(xué)習(xí)筆記——盒模型，塊級元素和行內(nèi)元素的區(qū)別和特性
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2147.html
摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)...
摘要：基于以上背景，研究人員對年至今的電信用戶流失數(shù)據(jù)進行分析，并建立預(yù)測模型，識別出流失概率很高的客戶群體，同時找出哪些用戶特征對用戶流失會有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接 消費者今天會訂閱多個電信服務(wù)（電視、付費節(jié)目、游戲等）。然而電信供應(yīng)商提供的服務(wù)的差異化程度不高，客戶忠誠度成為...
摘要：基于以上背景，研究人員對年至今的電信用戶流失數(shù)據(jù)進行分析，并建立預(yù)測模型，識別出流失概率很高的客戶群體，同時找出哪些用戶特征對用戶流失會有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接 消費者今天會訂閱多個電信服務(wù)（電視、付費節(jié)目、游戲等）。然而電信供應(yīng)商提供的服務(wù)的差異化程度不高，客戶忠誠度成為...
閱讀 844·2023-04-25 19:43
閱讀 4109·2021-11-30 14:52
閱讀 3919·2021-11-30 14:52
閱讀 4024·2021-11-29 11:00
閱讀 3917·2021-11-29 11:00
閱讀 4035·2021-11-29 11:00
閱讀 3752·2021-11-29 11:00
閱讀 6597·2021-11-29 11:00
