CSS 盒子模型

目錄：

  • CSS 盒子模型（Box Model）
  • CSS 邊框
  • CSS 輪廓
  • CSS Margin(外邊距)
  • CSS Padding（填充）

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：



不同部分的說明：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

為了在所有瀏覽器中的元素的寬度和高度設(shè)置正確的話，你需要知道的盒模型是如何工作的。

元素的寬度和高度

重要: 當(dāng)您指定一個(gè)CSS元素的寬度和高度屬性時(shí)，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。
下面的例子中的元素的總寬度為300px：
<pre>div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}</pre>
讓我們自己算算：
<pre>300px (寬)

  • 50px (左 + 右填充)
  • 50px (左 + 右邊框)
  • 50px (左 + 右邊距)
    = 450px</pre>

最終元素的總寬度計(jì)算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

瀏覽器的兼容性問題

一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

<em><strong>雖然有方法解決這個(gè)問題。但是目前最好的解決方案是回避這個(gè)問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。</strong></em>

IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設(shè)。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。

CSS 邊框

border-style

border-style 值
none 默認(rèn)無邊框
dotted 定義一個(gè)點(diǎn)線邊框
dashed 定義一個(gè)虛線邊框
solid 定義實(shí)線邊框
double 定義兩個(gè)邊框。 兩個(gè)邊框的寬度和 border-width 的值相同
groove 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge 定義3D脊邊框。效果取決于邊框的顏色值
inset: 定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值
outset 定義一個(gè)3D突出邊框。 效果取決于邊框的顏色值

屬性|描述
-|-|-
border | 簡(jiǎn)寫屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。
border-style|用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。
border-width|簡(jiǎn)寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。
border-color|簡(jiǎn)寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。
border-bottom|簡(jiǎn)寫屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-bottom-color|設(shè)置元素的下邊框的顏色。
border-bottom-style|設(shè)置元素的下邊框的樣式。
border-bottom-width|設(shè)置元素的下邊框的寬度。
border-left|簡(jiǎn)寫屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-left-color|設(shè)置元素的左邊框的顏色。
border-left-style|設(shè)置元素的左邊框的樣式。
border-left-width|設(shè)置元素的左邊框的寬度。
border-right|簡(jiǎn)寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-right-color|設(shè)置元素的右邊框的顏色。
border-right-style|設(shè)置元素的右邊框的樣式。
border-right-width|設(shè)置元素的右邊框的寬度。
border-top|簡(jiǎn)寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-top-color|設(shè)置元素的上邊框的顏色。
border-top-style|設(shè)置元素的上邊框的樣式。
border-top-width|設(shè)置元素的上邊框的寬度。

CSS 輪廓（outline）

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。


所有CSS 輪廓（outline）屬性
"CSS" 列中的數(shù)字表示哪個(gè)CSS版本定義了該屬性(CSS1 或者CSS2)。

屬性 說明 值 CSS
outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性 *outline-color
outline-style
outline-width
*inherit		 2
outline-color 設(shè)置輪廓的顏色 *color-name
hex-number
rgb-number
invert
*inherit		 2
outline-style 設(shè)置輪廓的樣式 *none
dotted
dashed
solid
double
groove
ridge
inset
outset
*inherit		 2
outline-width 設(shè)置輪廓的寬度 thin
medium
thick
*length
*inherit		 2

CSS Margin(外邊距)

CSS Margin(外邊距)屬性定義元素周圍的空間。

<em><b>Margin</b></em> 清除周圍的元素（外邊框）的區(qū)域。margin沒有背景顏色，是完全透明的?？梢詥为?dú)改變?cè)氐纳希?，左，右邊距。也可以一次改變所有的屬性?/p>

<em>可能的值</em>
值 說明
auto 設(shè)置瀏覽器邊距。這樣做的結(jié)果會(huì)依賴于瀏覽器
length 定義一個(gè)固定的margin（使用像素，pt，em等）
% 定義一個(gè)使用百分比的邊距
<em>所有的CSS邊距屬性</em>
屬性 描述
margin 簡(jiǎn)寫屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。（順序：上右下左）
margin-bottom 設(shè)置元素的下外邊距。
margin-left 設(shè)置元素的左外邊距。
margin-right 設(shè)置元素的右外邊距。
margin-top 設(shè)置元素的上外邊距。

CSS Padding（填充）

<em><b>Padding（填充）</b></em> 當(dāng)元素的 Padding（填充）（內(nèi)邊距）被清除時(shí)，所"釋放"的區(qū)域?qū)?huì)受到元素背景顏色的填充。

單獨(dú)使用填充屬性可以改變上下左右的填充?？s寫填充屬性也可以使用，一旦改變一切都改變。

<em><b>可能的值</b></em>

值 說明
length 定義一個(gè)固定的填充(像素, pt, em,等)
% 使用百分比值定義一個(gè)填充

<em><b>所有的CSS填充屬性</b></em>

屬性 說明
padding 使用縮寫屬性設(shè)置在一個(gè)聲明中的所有填充屬性（順序：上右下左）
padding-bottom 設(shè)置元素的底部填充
padding-left 設(shè)置元素的左部填充
padding-right 設(shè)置元素的右部填充
padding-top 設(shè)置元素的頂部填充
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,096評(píng)論 1贊 92
  • 前言 總括： 對(duì)于盒子模型，BFC，IFC和外邊距合并等概念和問題的總結(jié) 原文地址：從CSS盒子模型說起 知乎專欄...
    秦至閱讀 845評(píng)論 0贊 3
  • 1.盒子模型 所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元...
    楚簡(jiǎn)約閱讀 2,619評(píng)論 3贊 4
  • 今夜無眠，月色暫伴。 筆尖只為你流暢， 內(nèi)心只因你斑斕， 卻也因此而殤。 愛上一個(gè)不該愛的人需要多大的勇氣， 才能...
    柳若素閱讀 132評(píng)論 1贊 5
  • 一、屏幕參數(shù) 1、分辨率 分辨率指的是手機(jī)屏幕的像素點(diǎn)個(gè)數(shù)，如720*1080，指寬有720、高有1080個(gè)像素點(diǎn)...
    潛心之力閱讀 1,084評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容