您好,登錄后才能下訂單哦!
這篇文章主要介紹了css盒子模型的案例分析,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
一、css盒子模型概念
CSS css盒子模型又稱框模型 (Box Model) ,包含了元素內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)幾個(gè)要素。如圖:
圖中最內(nèi)部的框是元素的實(shí)際內(nèi)容,也就是元素框,緊挨著元素框外部的是內(nèi)邊距padding,其次是邊框(border),然后最外層是外邊距(margin),整個(gè)構(gòu)成了框模型。通常我們?cè)O(shè)置的背景顯示區(qū)域,就是內(nèi)容、內(nèi)邊距、邊框這一塊范圍。而外邊距margin是透明的,不會(huì)遮擋周邊的其他元素。
那么,元素框的總寬度 = 元素(element)的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度;
元素框的總高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 + border的上下寬度。
二、css 外邊距合并(疊加)
兩個(gè)上下方向相鄰的元素框垂直相遇時(shí),外邊距會(huì)合并,合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距中較高的那個(gè)邊距值,如圖:
比較容易理解,所以在頁(yè)面中有時(shí)候遇到實(shí)際情況是需要考慮這個(gè)因素的。當(dāng)然外邊距合并其實(shí)也有存在的意義,如下圖:
需要注意的是:只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
css reset 中也會(huì)經(jīng)常用到
* { margin : 0; padding : 0; }
三、box-sizing屬性介紹
box-sizing屬性是用戶界面屬性里的一種,之所以介紹它,是因?yàn)檫@個(gè)屬性跟盒子模型有關(guān),而且在css reset中有可能會(huì)用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默認(rèn)值,可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容。
即總寬度=margin+border+padding+width
(2) border-box , 設(shè)置的width值其實(shí)是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容
即總寬度=margin+width
很多CSS框架,都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化。
(3) inherit , 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值
關(guān)于border-box的使用:
1、一個(gè)box寬度為100%,又想要兩邊有內(nèi)間距,這時(shí)候用就比較好
2、全局設(shè)置 border-box 很好,首先它符合直覺(jué),其次它可以省去一次又一次的加加減減,它還有一個(gè)關(guān)鍵作用——讓有邊框的盒子正常使用百分比寬度。
四、實(shí)際開發(fā)中遇到的和框模型相關(guān)的應(yīng)用及小問(wèn)題。
1、margin越界(第一個(gè)子元素的margin-top和最后一個(gè)子元素的margin-bottom的越界問(wèn)題)
以第一個(gè)子元素的margin-top 為例:
當(dāng)父元素沒(méi)有邊框border時(shí),設(shè)置第一個(gè)子元素的margin-top值的時(shí)候,會(huì)出現(xiàn)margin-top值加在父元素上的現(xiàn)象,解決方法有四個(gè):
(1)給父元素加邊框border (副作用)
(2)給父元素設(shè)置padding值 (副作用)
(3)父元素添加 overflow:hidden (副作用)
(4)父元素加前置內(nèi)容生成。(推薦)
以第四種方法為例:
.parent { width : 500px; height : 500px; background-color : red; }.parent : before { content : " "; display : table;}.child { width : 200px; height : 200px; background-color : green; margin-top : 50px;} <div class="parent"> <div class="child"></div> </div>
2、 瀏覽器間的盒子模型。
(1)ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值。
(2)標(biāo)準(zhǔn)盒子模型與IE模型之間的差異:
標(biāo)準(zhǔn)的盒子模型就是上述介紹的那種,而IE模型更像是 box-sizing : border-box; 其內(nèi)容寬度還包含了border和padding。解決辦法就是:在html模板中加doctype聲明。
3、用盒子模型畫三角形
<!DOCTYPE html><html> <head> <style> .triangle { width : 0; height: 0; border : 100px solid transparent; border-top : 100px solid blue; /*這里可以設(shè)置border的top、bottom、left、right 四個(gè)方向的三角*/ } </style> </head> <body> <div class="triangle"></div> </body></html>
頁(yè)面顯示結(jié)果為:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享css盒子模型的案例分析內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(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)容。