溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS盒模型的詳細介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS盒模型的詳細介紹”吧!
為了給文檔樹中的各個元素排版定位（布局），瀏覽器會根據渲染模型（是講元素怎么在頁面上定位及布局的，包括position和float等等，visual formatting model）為每個元素生成四個嵌套的矩形框，分別稱作content box、padding box、border box 和margin box。
以上說的四種類型是不可分割的，并可能會重合，這就是CSS規范中描述的“盒模型”（box model），也就是以CSS的角度去看一個元素被渲染后的抽象形態。是講一個元素自身的構成部分，不同于布局：多個元素在頁面上的定位。
上面的大框，代表一個元素生成的矩形區域，也就是 box，每一個 box 都包括一個 content 區域（元素的內容，如文本，圖形等）以及環繞其四周的 padding(元素的內邊距，填充部分)、border (元素的邊框) 和 margin (元素的外邊距) 區域。padding、border 和 margin 區域都包括 top、right、bottom、left 四部分。如圖所示（“LM”代表left margin，“RP”代表right padding，“TB”代表top border……）。
邊界
上述四個區域（content、 padding、border和margin）分別有他們自己的邊界，細化來說，每個區域都有top、right、bottom、left四個邊界。
◆content 邊界/內邊界
Content 邊界環繞在由該元素的寬和高決定的一個矩形上，這個尺寸通常由該元素渲染后的內容決定。這四個content邊界組成的矩形框就是該元素的 content box。
◆padding邊界
Padding 邊界環繞在該元素的 padding區域的四周，顧名思義，填充背景色，在此范圍內有效。如果padding的寬度為0，則padding邊界與content邊界重合。這四個padding邊界組成的矩形框就是該元素的padding box。
◆border 邊界
Border 邊界環繞在該元素的border區域的四周，如果border的寬度為0，則border邊界與padding邊界重合。這四個border邊界組成的矩形框就是該元素的 border box。
◆margin 邊界/外邊界
Margin 邊界環繞在該元素的margin區域的四周，如果margin的寬度為0，則margin邊界與border邊界重合。這四個margin邊界組成的矩形框就是該元素的 margin box。下面分別說一下各個部分。一個簡單的例子，來自 W3C 官方：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: white; /* text color is white */ background: blue; /* Content, padding will be blue */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: lime; } </STYLE> </HEAD> <BODY> <UL> <LI>First element of list</LI> <LI class="withborder">Second element of list is a bit longer to illustrate wrapping.</LI> </UL> </BODY> </HTML>示意圖：
margin
'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的簡寫，表明 margin 的大小范圍。它的值可以是寬度值、百分比值或‘auto’這3者之一，注意：寬度值必須帶有單位。
margin簡寫
1. 以上、右、下、左的順序給以上四個值賦值。
CSS codemargin: 1px 2px 3px 4px;
等價于：
CSS codemargin-top: 1px margin-right: 2px margin-bottom: 3px margin-left: 4px
記住，從上面開始，順時針旋轉一圈。
2. 以上下、左右的順序賦值
CSS codemargin: 1px 2px;
那么相當于：
CSS codemargin-top: 1px margin-right: 2px margin-bottom: 1px margin-left: 2px
這種賦值方式，適合下面講到的 *-top，*-right，*-bottom，*-left的簡寫的賦值，如padding，border-width，border-color等，下面不再說明。
可以應用在什么元素上
非table類型的元素，以及table類型中table-caption, table 和inline-table這3類。例如 TD TR TH等，margin是不適用的。
什么時候無效
對于行內非替換元素（例如 SPAN），垂直方向的margin不起作用。例如：
<div style="border:1px solid red;"> <span style="margin:100px; background:gray;">ddd</span> </div>
可以看到，DIV 的上下 border 緊貼著灰色的SPAN元素。
margin折疊
垂直方向上的不同元素的相鄰的margin在某些情況下，會發生折疊的現象。比如，兩個 div ，上下相鄰，上面 DIV 的margin-bottom 會和 下面 DIV 的 margin-top 產生折疊的現象，兩個重疊成一個，具體寬度取較大的。例如：
<div style="background-color:green; width:100px; height:100px;margin-bottom:100px;"> </div> <div style="background-color:red; width:100px; height:100px; margin-top:50px;"> </div>
上下兩個DIV最終相距100px，而不是150px。
padding
padding是 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的縮寫。賦值的方法跟margin相同，只是沒有 ‘auto’ 值。默認值是0。
它可以應用到的元素
除display值是 ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。
border
border是個比較復雜的東西。它是'border- top', 'border-right', 'border-bottom', 'border-left'。千萬別認為它跟前面的padding還有 margin一樣只是設置width就好了。
border包含3個部分，’border-width’，’border- color’，’border-style’，分別用來設置它的寬度，顏色和樣式。適用于任何元素。
border-width是 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'。默認值是0。可用值有‘thin’，‘medium’，‘thick’，以及常用的數值帶單位的寬度值。
border-color是'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'的簡寫。默認值是 ‘color’ 特性的值。
border-style是'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'的簡寫。默認值是 none 特性的值。可用值有：’none’，’hidden’，’dotted’，’dashed’，’solid’，’double’，’groove’，’ridge’，’inset’，’outset’，有興趣的可以逐個試試效果。
到此，相信大家對“CSS盒模型的詳細介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
