CSS盒子模型實例分析

本篇內(nèi)容介紹了“CSS盒子模型實例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

CSS 盒子模型(Box Model)

盒子模型 ("box model")是CSS中的術(shù)語,是形容Body和Body內(nèi)的元素在頁面上像盒子似的用作設(shè)計和布局時使用, Body和Body內(nèi)的元素都可以看作盒子，盒模型本質(zhì)上是一個盒子

它包括：邊距(margin)，邊框(border)，內(nèi)邊距(padding)，和實際內(nèi)容(connent)。

下面的說明了盒子模型(Box Model)：

Margin（外邊距） - 清除邊框區(qū)域。Margin沒有背景顏色，它是完全透明

Border（邊框） - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響

Padding（內(nèi)邊距） - 清除內(nèi)容周圍的區(qū)域。會受到框中填充的背景顏色影響

Content（內(nèi)容） - 盒子的內(nèi)容，顯示文本和圖像

盒子模型的內(nèi)部結(jié)構(gòu)

所以一個盒子實際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。

通過設(shè)置width和height的值來控制內(nèi)容所占的大小，并且對于任何一個盒子，都可以分別設(shè)定4邊(上右下左)各自的border、padding和margin，

那么問題又來了,

總所周知行內(nèi)(內(nèi)聯(lián))元素在設(shè)置margin-top和margin-bottom 和padding-top和padding-bottom不完全能起作用

行內(nèi)元素實際占有的寬度(或高度)是什么組成的

這里先弄清楚什么情況下對top bottom不能起作用

行內(nèi)(內(nèi)聯(lián))元素中的替換元素能起作用, 非替換元素不起作用

替換元素: 是指用作為其他內(nèi)容占位符的一個元素。如： img、input 等;

非替換元素: 是指內(nèi)容包含在文檔中的元素 如：span等；

以非替換元素舉例

要獲得一個span的實際寬度和高度, 可以用offsetWidth 和 offsetHeight

在chorome 上箭頭獲取元素 和 打印臺輸出

“CSS盒子模型實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！