這篇“css3兩種盒模型的區(qū)別有哪些”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“css3兩種盒模型的區(qū)別有哪些”文章吧。
創(chuàng)新互聯建站專注于臨武企業(yè)網站建設,響應式網站開發(fā),商城開發(fā)。臨武網站建設公司,為臨武等地區(qū)提供建站服務。全流程按需定制制作,專業(yè)設計,全程項目跟蹤,創(chuàng)新互聯建站專業(yè)和態(tài)度為您提供的服務
區(qū)別:1、標準盒子的width和height就是內容區(qū)域的寬度和高度,而怪異模型的width和height是指“內容區(qū)域+border+padding”的寬度和高度;2、標準盒子增加內邊距、邊框和外邊距不會影響元素的尺寸,而怪異模型會。
本教程操作環(huán)境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
盒子模型包括content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)
CSS中有兩個盒子模型,分別是W3C標準模型和IE怪異模型。
引入:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<!DOCTYPE html> 申明文檔的解析類型,那么它到底有多重要呢
解析類型:
BackCompat:怪異模式,瀏覽器自己的模式
CSS1Compat:標準模式,W3C標準解析渲染頁面
如果不做申明,則按照怪異模式進行渲染,不同的瀏覽器渲染有所不同
一、標準模型
W3C 標準模型
當我們對一個元素設置他的width和height的時候,標準盒模型只是對content(藍色部分)設置了寬高,那么這個元素真正的寬高就還要加上他的padding(內邊距)border(邊框)margin(外邊距)。
公式:
width = 內容的寬度
height = 內容的高度
二、怪異模型
怪異模型
當我們對一個元素設置他的width和height的時候,怪異盒模型把整個盒子看成是一個整體。給整個盒子一個寬高。如果你還給盒子設置了額外的邊距和邊框。那么中間的content藍色部分就要受到擠壓,變小。
公式:
width = border + padding + 內容的寬度
height = border + padding + 內容的高度
W3C標準模型和IE怪異模型的主要區(qū)別是盒子的寬高。
①標準盒子的width和height表示內容content的寬高,width=內容的寬度、heigth=內容的高度;增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸,但是會增加元素框的總尺寸。
②而怪異盒子的width包含padding、內容的寬度、border。height包含內容的高度、border、padding
width=(border-left+padding-left+內容的寬度+padding+right+border+right)
height=(border-top+padding-top+內容的高度+padding-bottom+border-bottom)
以上就是關于“css3兩種盒模型的區(qū)別有哪些”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注創(chuàng)新互聯行業(yè)資訊頻道。
文章名稱:css3兩種盒模型的區(qū)別有哪些
本文鏈接:http://muchs.cn/article18/ipggdp.html
成都網站建設公司_創(chuàng)新互聯,為您提供、Google、移動網站建設、網站建設、ChatGPT、面包屑導航
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯