CSS的盒子模型

2021-09-20 19:25:37 字數 1670 閱讀 9695

css盒子模型

1   盒子的組成包括

margin外邊距、border邊框、padding內邊框和content內容

2   正文框的最內部分是實際的內容,直接包圍內容的是內邊距,內邊距呈現了元素的背景,內邊距的邊緣是邊框,邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素

3   內邊距、邊框和外邊距都是可選的,預設值是零,外邊距可以是負值

4   寬度width和高度height指的是內容區域的寬度和高度,增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的尺寸

5  css盒子模型的內邊距

內邊距在正文content外,邊框border內,控制該區域的最簡單的屬性是padding屬性,padding屬性定義元素邊框與元素內容之間的空白區域,可以進行統一的內邊距設定,也可以進行單邊的內邊距設定

6   css padding屬性定義元素的內邊距,padding屬性接受長度值或百分比值,但不允許使用負值

可以按照上、下、左、右的順序分別設定各邊的內邊距,各邊均可以使用不同的單位或百分比值

7   設定數值時,常用的單位有畫素px和厘公尺cm

8   設定內邊距的常用屬性

屬性 描述

padding-top

設定頂部屬性

padding-right

設定右側屬性

padding-bottom

設定底部屬性

padding-left

設定左側屬性

9   css盒子模型的邊框

元素的邊框border是圍繞元素內容的內邊距的一條或多條線

設定border屬性可以規定元素邊框的樣式、寬度和顏色

10   在html中是使用**來建立周圍的邊框

11   在css中是通過邊框屬性來建立出效果出色的邊框,並且可以應用於任何元素

12   使用border-color屬性來設定邊框屬性,它一次可以接受最多四個顏色值,分別是邊框的四邊,可以使用任何型別的顏色值,可以是命名顏色,也可以是十六進製制和rgb值

13   css盒子模型的邊框

屬性 描述

border-top-color

設定頂部顏色屬性

border-left-color

設定左側顏色屬性

border-bottom-color

設定底部顏色屬性

border-right-color

設定右側顏色屬性

14   盒子模型的外邊距

外邊距就是圍繞在內容框的區域,預設為透明的區域

外邊距也接受任何長度的單位,百分數與內邊距很相似

使用任何乙個屬性來只設定相應的外邊距,不會直接影響所有其他外邊距

15   設定外邊距的常用屬性

屬性 描述

margin-top

設定頂部的外邊距

margin-bottom

設定底部的外邊距

margin-right

設定右側的外邊距

margin-left

設定左側的外邊距

16   morgin的預設值是零,如果沒有為margin宣告乙個值,就不會出現外邊距

17   對稱複製

如果缺少左外邊距的值,則是用右外邊距的值

如果缺少下外邊距的值,則使用上外邊距的值

如果缺少右外邊距的值,則使用上外邊距的值

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