CSS盒子模型

什麼是盒子模型：

模型是乙個及其通用的描述，是一種以矩形物件的布局的方法，這些矩形物件稱為盒子。

盒子的組成：

乙個盒子由外到內可以分成四個部分：margin(外邊距）、border(邊框）、padding(內邊距）、content（內容）、margin、border、padding是css屬性，因此可以通過這三個屬性來控制盒子的這三個部分，而content則是html元素的內容。

盒子的大小：

盒子的大小指的是盒子的寬度和高度。盒子的寬度和高度並不是width和height屬性，width和height屬性只是設定content（內容）部分的寬和高。盒子真正的寬和高按如下計算：

盒子的寬度=內容寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

盒子的高度=內容高度+上填充+下填充+上邊框+下邊框+上邊距+下邊距

用帶屬性的公式表示：

盒子的寬度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom

要為乙個元素設定邊框必須指定三個樣式：

border-width：邊框的寬度

border-color：邊框的顏色

border-style：邊框樣式

使用border-width可以分別指定四個邊框的寬度：

如果border-width指定四個值：則四個值分別指定給上右下左 按順時針方向設定。

如果是三個值，則分別設定給上、左右、下。

如果是兩個值，則分別設定給上下、左右。

如果是乙個值，則四邊全是該值。

邊框的顏色、樣式依次同上面情況。

除了border-width css中還提供了四個border-***-width ***的值可以是：top、right、bottom、left專門用來設定指定的寬度。設定邊框的顏色和寬度一樣，color也提供四個方向的樣式來分別指定顏色。

設定邊框的樣式：

可選值：

none 預設值 沒有邊框

solid 實線

dotted 點狀邊框

dashed 虛線

double 雙線

圓角：可以使盒子的樣式更加好看

圓角由屬性border-radius進行控制，這是乙個簡寫屬性，像margin、padding等一樣，可以有乙個、兩個、三個或四個值進行設定，同樣也可以對盒子的每乙個角的半徑進行單獨設定。

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

border-radius值的個數以及每個值對應控制的位置：

乙個值：設定四個角相同的邊界半徑

兩個值：第乙個值設定左上角和右下角，第二個值設定右上角和左下角

三個值：第乙個值設定左上角，第二個值設定右上角和左下角，第三個值設定右下角

四個值：第乙個值設定左上角，第二個值設定右上角，第三個值設定右下角，第四個值設定左下角

內聯元素可以設定水平方向的內邊距，也可以設定垂直方向的內邊距，但是不會影響頁面的布局，內聯元素可以設定邊框，但是垂直邊框不會影響布局，內聯元素支援水平方向的外邊框，水平方向相鄰的外邊框不會重疊而是求和。內聯元素不支援垂直外邊距。

將乙個內聯元素變成塊元素

通過display樣式可以修改元素型別樣式

可選值：

inline：可以將乙個元素作為內聯元素顯示

block：可以將乙個元素設定成塊元素顯示

inline-block：將乙個元素轉換成行內塊元素，可以使乙個元素既有行內元素的特點又有塊元素的特點，既可以設定寬高，又不會獨佔一行

none：不顯示元素，並且元素不會在頁面中繼續占用位置

visibility：可以用來設定元素的隱藏和顯示狀態

可選值：

visible 預設值，元素缺省會在頁面顯示

hidden 元素會隱藏顯示

使用visibility：hidden；隱藏的元素雖然不會在頁面中顯示，但是他的位置會依然保持。

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...