您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS盒模型如何實(shí)現(xiàn)網(wǎng)頁(yè)寬度和高度設(shè)計(jì)”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS盒模型如何實(shí)現(xiàn)網(wǎng)頁(yè)寬度和高度設(shè)計(jì)”這篇文章吧。
用CSS盒模型原理設(shè)計(jì)網(wǎng)頁(yè)的寬度和高度
當(dāng)我們?cè)O(shè)計(jì)布局一個(gè)網(wǎng)頁(yè)的時(shí)候,經(jīng)常會(huì)碰到這樣的一種情況,那就是最終網(wǎng)頁(yè)成型的時(shí)候?qū)挾然蛘吒叨葧?huì)超出我們預(yù)先的設(shè)計(jì)大小,其實(shí)這種現(xiàn)象就是所謂的CSS的盒模型造成的。
#test{margin:10px;padding:10px;width:100px;height:100px;}
如上一段的代碼,很多時(shí)候我們會(huì)把它所占的位置計(jì)算成width:120px,height:120px,因?yàn)樵谡5睦斫庀拢琾adding是內(nèi)邊距,應(yīng)該是包括在width里面的,而margin是外邊距,所以width=margin-left+margin-right+width,但是瀏覽器對(duì)于CSS盒模型的解釋卻并非如此,所以最終我們會(huì)發(fā)現(xiàn)布局出來(lái)的網(wǎng)頁(yè)寬度與高度都會(huì)超出我們預(yù)期的計(jì)算,***造成顯示上的錯(cuò)位。
◆其實(shí)不然,對(duì)于test所占的位置的真正計(jì)算應(yīng)該是width=margin-left+margin-right+padding-left+padding-right+width,也就是寬度真正所占的大小應(yīng)該是內(nèi)邊距+外邊距+寬度本身,也就是說(shuō)test真正的大小應(yīng)該是140px才對(duì)。高度的計(jì)算與寬度的計(jì)算是一樣的。
◆而如果給test加上邊框的話,這個(gè)寬度與高度的算法還應(yīng)該加上邊框的大小。
#test{margin:10px;padding:10px;border:5px; width:100px;height:100px;}
這里的test的寬度就應(yīng)該是外邊框+內(nèi)邊框+邊框+寬度本身,所以test的width是150px。
如下圖所示,width與height真正所占的位置并不是它本身的那一小塊,而應(yīng)該是一直到最外面深藍(lán)色的那個(gè)層為止。
以上是“CSS盒模型如何實(shí)現(xiàn)網(wǎng)頁(yè)寬度和高度設(shè)計(jì)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。