CSS盒子模型實(shí)例分析
本篇內(nèi)容介紹了“CSS盒子模型實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
馬村網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
CSS 盒子模型(Box Model)
盒子模型 ("box model")是CSS中的術(shù)語(yǔ),是形容Body和Body內(nèi)的元素在頁(yè)面上像盒子似的用作設(shè)計(jì)和布局時(shí)使用, Body和Body內(nèi)的元素都可以看作盒子，盒模型本質(zhì)上是一個(gè)盒子
它包括：邊距(margin)，邊框(border)，內(nèi)邊距(padding)，和實(shí)際內(nèi)容(connent)。
下面的說(shuō)明了盒子模型(Box Model)：
Margin（外邊距） - 清除邊框區(qū)域。Margin沒(méi)有背景顏色，它是完全透明
Border（邊框） - 邊框周?chē)奶畛浜蛢?nèi)容。邊框是受到盒子的背景顏色影響
Padding（內(nèi)邊距） - 清除內(nèi)容周?chē)膮^(qū)域。會(huì)受到框中填充的背景顏色影響
Content（內(nèi)容） - 盒子的內(nèi)容，顯示文本和圖像
盒子模型的內(nèi)部結(jié)構(gòu)
所以一個(gè)盒子實(shí)際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。
通過(guò)設(shè)置width和height的值來(lái)控制內(nèi)容所占的大小，并且對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4邊(上右下左)各自的border、padding和margin，
那么問(wèn)題又來(lái)了,
總所周知行內(nèi)(內(nèi)聯(lián))元素在設(shè)置margin-top和margin-bottom 和padding-top和padding-bottom不完全能起作用
行內(nèi)元素實(shí)際占有的寬度(或高度)是什么組成的
這里先弄清楚什么情況下對(duì)top bottom不能起作用
行內(nèi)(內(nèi)聯(lián))元素中的替換元素能起作用, 非替換元素不起作用
替換元素: 是指用作為其他內(nèi)容占位符的一個(gè)元素。如： img、input 等;
非替換元素: 是指內(nèi)容包含在文檔中的元素 如：span等；
以非替換元素舉例
要獲得一個(gè)span的實(shí)際寬度和高度, 可以用offsetWidth 和 offsetHeight
在chorome 上箭頭獲取元素 和 打印臺(tái)輸出
“CSS盒子模型實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
分享標(biāo)題：CSS盒子模型實(shí)例分析
網(wǎng)頁(yè)鏈接：http://bm7419.com/article30/jjsjso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、云服務(wù)器
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
