您好,登錄后才能下訂單哦!
CSS3盒模型
CSS有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型, 定義了Web頁(yè)面中的元素是如何看做盒子來(lái)解析的。 每一個(gè)盒子有不同的展示界面, 在 CSS 中 主要有以下幾種盒模型: inline、inline- block、block、table、absolute,position、float。 瀏覽器把每個(gè)元素看 一個(gè)盒模型, 每一個(gè)盒模型是由以下幾個(gè)屬性組合所決定的: display、position、float、width、height、margin、padding和border等, 不同類(lèi)型的盒模型會(huì)產(chǎn)生不同的布局。
什么是盒模型?
CSS中每一個(gè)元素都是一個(gè)盒模型,包括HTML和body標(biāo)簽元素。在平時(shí)設(shè)計(jì)中,大家對(duì)content、padding、margin、background和border來(lái)說(shuō)一定不會(huì)陌生了, 因?yàn)楹心P投季邆溥@些屬性。 其中width、height、border、background、padding和margin之間的層次關(guān)系和相互影響,可以 看出 padding、content、 background-image、background-color,它們四者構(gòu)成了Z軸( 垂直屏幕的坐標(biāo)) 多重層疊關(guān)系。 但是border與margin、padding三者之間應(yīng)該是平面上 的并級(jí)關(guān)系,并不能構(gòu)成Z軸的層疊關(guān)系。
在CSS中盒模型被分為兩種:第 一種 是 W3C 的 標(biāo)準(zhǔn) 模型。另一種 是 IE 的 傳統(tǒng) 模型。
它們相同之處都是對(duì)元素計(jì)算尺寸的模型,具體說(shuō)就是對(duì)元素的width、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系,不同之處是兩者的計(jì)算方法 不一致。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。