建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
看圖學(xué)習(xí)CSS盒子模型，很簡單但很重要的概念
今天這篇筆記聊聊CSS中一個非?；A(chǔ)但是很重要的概念——盒子模型：
創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元馬龍做網(wǎng)站,已為上家服務(wù),為馬龍各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
什么是盒子模型
顧名思義，就是HTML的元素在網(wǎng)頁上的展示都是一個一個的盒子，四四方方的在頁面上排列著，比如像下面這樣，學(xué)習(xí)了盒子模型，為我們學(xué)習(xí)定位和布局等等高級樣式技巧打下基礎(chǔ)。
盒子模型的構(gòu)成
直接看這張圖：
- Content：內(nèi)容區(qū)域，也就是你代碼中放在元素內(nèi)的東西，比如說文字啊、子元素啊等等
- Border：邊框，也就是HTML元素的邊框，你可以使用border來設(shè)置邊框的寬度、顏色、樣式
- Padding：內(nèi)邊距，也就是Border（邊框）和Content（內(nèi)容）之間的距離
- Margin：外邊距，也就是HTML元素和它旁邊其他元素的距離
盒子模型的分類
根據(jù)盒子寬度和高度的計算方式，我們可以把它分為兩類，并通過box-sizing屬性來設(shè)置
- 標(biāo)準(zhǔn)盒模型：content-box，默認(rèn)
- IE盒模型：border-box
標(biāo)準(zhǔn)盒模型（content-box）的特點是：HTML元素真正的寬度=你設(shè)置的CSS寬度（width）+padding+border，高度同理
IE盒模型（border-box）的特點是：HTML元素的真正寬度=你設(shè)置的CSS寬度（width），高度同理
舉例
這個HTML的寬度=200+152+102=250
這個HTML的寬度=200
網(wǎng)站標(biāo)題：看圖學(xué)習(xí)CSS盒子模型，很簡單但很重要的概念
當(dāng)前URL：http://www.5511xx.com/article/cdieoec.html
