CSS盒子模型和布局

2021-08-29 10:22:16 字數 2623 閱讀 3552

網頁設計中常聽的屬性名:內容

(content)

、內邊距

(padding)

、邊框(border)

、外邊距

(margin)

,css

盒子模式都具備這些屬性。

這些屬性我們可以用日常生活中的常見事物

——盒子作乙個比喻來理解,所以叫它盒子模式。

css盒子模型就是在網頁設計中經常用到的

css技術所使用的一種思維模型。

(border-left:左邊框   border-right:右邊框   border-top:上邊框   

border-bottom

:下邊框)

(none無邊框,solid邊框為實線,dotted邊框為點狀即點線,dashed邊框為虛線,double邊框為雙線)

padding-left

:左內邊距

padding-right

:右內邊距

padding-top

:上內邊距

padding-bottom

:下內邊距

margin-left

:左外邊距

margin-right

右外邊距

margin-top

上外邊距

margin-bottom

下外邊距

對資料進行操作,需要把資料放到乙個區域裡面(div)

float

float

屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在

css

中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定乙個明確的寬度;否則,它們會盡可能地窄。

把影象向右浮動:

在下面的段落中,我們新增了乙個樣式為float:right的影象。結果是這個影象會浮動到段落的右側。

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

this is some text. this is some text. this is some text.

效果:

position

屬性規定元素的定位型別。

absolute

生成絕對定位的元素,相對於

static

定位以外的第乙個父元素進行定位。

元素的位置通過

"left", "top", "right"

以及"bottom"

屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過

"left", "top", "right"

以及"bottom"

屬性進行規定。

relative

生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20"

會向元素的

left

位置新增

20 畫素。

static

預設值。沒有定位,元素出現在正常的流中(忽略

top, bottom, left, right

或者z-index

宣告)。

通過絕對定位,元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px,距離頁面頂部 150px。

效果:

相對定位會按照元素的原始位置對該元素進行移動。

樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。

樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。

效果:

css盒子模型 CSS 盒子模型

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

css盒子模型布局詳解

盒子模型是css裡的乙個重點內容,一般來講主要是w3c的盒子模型,不過ie原先也有自己的盒子模型,但是隨著發展ie也調整了盒子模型同步w3c,因此這裡就不講ie盒子模型了。標準w3c盒子模型 以下用乙個div的盒子模型作為範例進行解讀 可以看出這個div裡面只有範例的文字,而它的盒模型分為四部分 c...

css盒子模型,div css布局

css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...