資訊專欄INFORMATION COLUMN
摘要：上篇文章總結(jié)了塊級(jí)元素和行內(nèi)元素這篇文章總結(jié)了有關(guān)盒子模型的知識(shí)，助于梳理知識(shí)首先，什么是盒子模型我們知道，文檔中，基本上每個(gè)元素都可以看作一個(gè)盒子，我們稱之為盒子模型。在盒子模型中我們?cè)O(shè)置的指的是盒子真實(shí)占有寬高即如的寬高。
上篇文章總結(jié)了塊級(jí)元素和行內(nèi)元素
這篇文章總結(jié)了有關(guān)盒子模型的知識(shí)，助于梳理知識(shí)
首先，什么是盒子模型
我們知道，html文檔中，基本上每個(gè)元素都可以看作一個(gè)盒子，我們稱之為盒子模型。
盒子模型的組成
盒子模型包含四個(gè)重要的部分：
content(width、height):盒子內(nèi)容寬高
padding:內(nèi)邊距(填充)
border:邊框
margin:外邊距
重點(diǎn)：對(duì)于盒子來(lái)說(shuō)，設(shè)置的寬高和真實(shí)占有寬高是不一樣的
如圖（一般我們以標(biāo)準(zhǔn)盒子模型為主學(xué)習(xí)）
在標(biāo)準(zhǔn)盒子模型中,我們用css屬性中的設(shè)置width,height其實(shí)是內(nèi)容content的寬高，如果增加邊距和邊框?qū)?huì)增加盒子的寬度（也就是說(shuō),如果padding,margin,border都為0的話，盒子真實(shí)占有寬度和內(nèi)容寬度是一樣的）。
在IE盒子模型中,我們?cè)O(shè)置的width、height指的是盒子真實(shí)占有寬高,即如content+border+padding的寬高。
PS：
在瀏覽器，有一些元素有著默認(rèn)的設(shè)置margin,padding,border,這也是我們寫css時(shí)一般加入*{margin:0;padding:0}重置樣式的原因。
注意,盒子模型是立體的，即組成盒子的每個(gè)部分有著各自的層次
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)
那么這些層級(jí)有什么用呢？
通過(guò)這些層級(jí)顯示，我們可以知道優(yōu)先級(jí)的問(wèn)題：
比如同時(shí)設(shè)置背景圖和背景色時(shí)，背景圖將會(huì)在背景色上方顯示
原情況（有背景圖無(wú)背景色）：
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>
效果圖：
沒(méi)有背景圖只有背景色時(shí)：
有背景圖有背景色時(shí)：
背景色被背景圖直接覆蓋了。
如何查看網(wǎng)頁(yè)中的元素的盒子具體情況？？
此處以chrome瀏覽器為例，其他瀏覽器大同小異：
使用F12查看網(wǎng)頁(yè)源代碼，選擇一個(gè)元素，點(diǎn)擊右邊界面的Computed選項(xiàng)卡即可：
參考文章：
CSS盒模型詳解（圖文教程）
深入理解css盒子模型
CSS學(xué)習(xí)筆記——盒模型，塊級(jí)元素和行內(nèi)元素的區(qū)別和特性
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2147.html
摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級(jí)格式化上下文。是的首字母縮寫，直譯過(guò)來(lái)是格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)...
摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么...
摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么...
摘要：基于以上背景，研究人員對(duì)年至今的電信用戶流失數(shù)據(jù)進(jìn)行分析，并建立預(yù)測(cè)模型，識(shí)別出流失概率很高的客戶群體，同時(shí)找出哪些用戶特征對(duì)用戶流失會(huì)有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接 消費(fèi)者今天會(huì)訂閱多個(gè)電信服務(wù)（電視、付費(fèi)節(jié)目、游戲等）。然而電信供應(yīng)商提供的服務(wù)的差異化程度不高，客戶忠誠(chéng)度成為...
摘要：基于以上背景，研究人員對(duì)年至今的電信用戶流失數(shù)據(jù)進(jìn)行分析，并建立預(yù)測(cè)模型，識(shí)別出流失概率很高的客戶群體，同時(shí)找出哪些用戶特征對(duì)用戶流失會(huì)有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接 消費(fèi)者今天會(huì)訂閱多個(gè)電信服務(wù)（電視、付費(fèi)節(jié)目、游戲等）。然而電信供應(yīng)商提供的服務(wù)的差異化程度不高，客戶忠誠(chéng)度成為...
閱讀 734·2023-04-25 19:43
閱讀 3980·2021-11-30 14:52
閱讀 3806·2021-11-30 14:52
閱讀 3870·2021-11-29 11:00
閱讀 3801·2021-11-29 11:00
閱讀 3902·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
