CSS 標籤顯示模式與盒子模型

2021-10-09 06:38:31 字數 1334 閱讀 9528

盒子模型

內邊距(padding)

html標籤一般分為塊標籤和行內標籤兩種型別,它們也稱塊元素和行內元素

特點

(1)總是從新行開始

(2)高度,行高、外邊距以及內邊距都可以控制。

(3)寬度預設是容器的100%

(4)可以容納內聯元素(就是 行內元素)和其他塊元素。

特點

(1)和相鄰行內元素在一行上。

(2)高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。

(3)預設寬度就是它本身內容的寬度。

(4)行內元素只能容納文字或則其他行內元素。

在行內元素中有幾個特殊的標籤——、、,可以對它們設定寬高和對齊屬性,我們將這些稱為行內塊元素。

特點

(1)和相鄰行內元素(行內塊)在一行上,但是之間會有空白縫隙。

(2)預設寬度就是它本身內容的寬度。

(3)高度,行高、外邊距以及內邊距都可以控制。

既然有行內元素,有塊元素和行內塊元素,那麼自然有三者之間的轉換。

轉換,我們只需要要在css樣式設定時寫上相對應的轉換**。

塊轉行內:display:inline;

行內轉塊:display:block;

塊、行內元素轉換為行內塊: display: inline-block;

盒子模型就是把html頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。

乙個盒子的是由最外邊的外邊距,然後到盒子邊框,然後到盒子的內邊距,最後也是最裡面的就是文字可寫 的實際內容,外邊距和內邊距都是用來撐開盒子的,他們是用 空白 填充位置,通常這裡不能放置其他內容。

取值:填取的值都是畫素,注意在合併寫法裡面,

邊框樣式總結:

補充知識:

**邊框合併

我們可以用一句話做到**邊框的合併,只需要在css中設定為:

boder-collapse:collapse;

圓角邊框

我們可以通過設定邊框的弧度來設定角的形狀

boder-radius:50%;

注意50%時是將其設定為了乙個圓;

這裡注意合併寫法規則和外邊距一樣,乙個數表示四邊,兩個值表示上下,左右,三個值表示上,左右,下,四個值表示上,右,下,左。

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