CSS盒子模型

2021-06-18 14:08:45 字數 1279 閱讀 5736

盒子模型是css控制頁面時乙個很重要 的概念。 只有很好地掌握了盒子模型以及其中每 個元素的用法,才能真正地控制好頁面中的

各個元素。

在實際使用css時,除了採用這種方 式,還可以分別對4條邊框設定不同的屬性值。

方法是按照規定的順序,給出2個、3個 或者4個屬性值,它們的含義將有所區別,具 體如下。

2)在一行中同時設定邊框的寬度、顏色和樣式 要把border-width、border-border- color和border-style這3)個屬性合在一起, 還可以用border屬性來簡寫。 例如:

border: 2px green dashed

這行樣式表示將4條邊框都設定為2畫素 的綠色虛線,這樣就比分為3條樣式來寫方便 多了。

4)對一條邊框設定與其他邊框不同 的屬性

5)同時制訂一條邊框的一種屬性

這裡又出現了乙個新的概念——"標準 文件流"(normal document stream), 或簡稱"標準流"。 所謂標準流,就是指在不使用其他與排 列和定位相關的特殊css規則時,各種元素 的排列規則。 包括塊級元素和行內元素

div標記不同行:

span標記同一行:

狹義的"定位":在css中有乙個 非常重要的屬性position,這個單詞翻譯為 中文也是定位的意思。 然而要使用css進行定位操作並不僅僅 通過這個屬性來實現,因此不要把二者混淆。

● static:靜態定位,這是預設的屬 性值,也就是該盒子按照標準流(包括浮動 方式)進行布局。

● relative:相對定位,使用相對定 位的盒子的位置常以標準流的排版方式為基 礎,然後使盒子相對於它在原本的標準位置 偏移指定的距離。 相對定位的盒子仍在標準流中,它後面 的盒子仍以標準流方式對待它。

● absolute:絕對定位,盒子的位置 以它的包含框為基準進行偏移。絕對定位的 盒子從標準流中脫離。 這意味著它們對其後的兄弟盒子的定位 沒有影響,其他的盒子就好像這個盒子不存 在一樣。

● fixed:稱為固定定位,它和絕對 定位類似,只是以瀏覽器視窗為基準進行定 位,也就是當拖動瀏覽器視窗的滾動條時, 依然保持物件位置不變。

(1)使用相對定位的盒子,會相對於 它在原本的位置,通過偏移指定的距離,到 達新的位置。

(2)使用相對定位的盒子仍在標準流 中,它對父塊和兄弟盒子沒有任何影響。在上述的第一條原則中,有3個帶引號 的定語,需要進行一些解釋。

body, html

#container 下面來介紹第2種方法,換一種角度思

考這個問題,**如下:

body, html

#container

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