CSS盒子模型

2021-10-22 09:55:27 字數 1374 閱讀 1640

css處理網頁時,它認為每個標籤都包含在一 個不可見的盒子裡。

如果把所有的標籤都想象成盒子,那麼我們對網頁的布局就相 當於是擺放盒子。

我們只需要將相應的盒子擺放到網頁中相應的 位置即可完成網頁的布局。

乙個盒子(標籤)我們會分成4個部分:

內容區(content)

內邊距(padding)

​邊框(border)

外邊距(margin)

如果沒有為標籤設定內邊距和邊框,則內容區大小預設和盒子大小是一致的;width和height兩個屬性可以設定內容區的大小而不是整個盒子的大小;width和height屬性只適用於塊標籤或行級塊標籤。

就是內容區到邊框之間的距離;

會影響盒子的大小。

padding-left/right/bottom/top; 用這四個屬性設定左右下上四個方向的內邊距。

例如:padding: 10px;上下左右內邊距分別為10個畫素;

padding: 10px 5px;上下內邊距分別是10個畫素; 左右內邊距分別5個畫素。

padding: 5px 10px 15px 20px; 上方內邊距5個畫素, 右邊內邊距10個畫素; 下方內邊距15個畫素; 左邊內邊距20個畫素。

就是標籤的最外層的框 ;也是計算在標籤大小內的。

使用border屬性來設定盒子的邊框:

border:1px red solid;

上邊的樣式分別指定了邊框的寬度、顏色和樣式。

border-top/left/right/bottom分別指定 四個方向的邊框。

邊框的樣式:dotted(點線) ;dashed (虛線); solid (實線); double (雙線) ; groove (槽線)。

border-radius設定四個角為圓角邊框;

border-top-left-radius設定左上為圓角邊框。

標籤實際大小 = 內容區 + 內邊距 + 邊框。

外邊距是標籤邊框與周圍標籤相距的空間。 使用margin屬性可以設定外邊距。用法和padding類似,同樣也提供了四個方向的 。

margin-top/right/bottom/left;值可以為負值;

margin的值還可以auto,設定外邊距為最大值,當將左右外邊距設定為auto時,瀏覽器會將左右外邊距設定為相等.垂直設定為auto時值為0,所以水平居中也可以簡寫為margin:0 auto。

外邊距不會影響盒子的整體大小,但是會影響盒子的位置。

寫**時清除瀏覽器預設標識:

可使用:

margin: 0;

padding: 0;

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盒...