盒模型 內外邊距和邊框

2021-07-25 06:17:43 字數 1672 閱讀 4168

盒模型:內容、內邊距、邊框、外邊距

如圖:

邊框顏色:

border-color:

blue

|| rgb(255,0,0) || 

#fff000 || transparent

(透明,預設值不常用可不記)

邊框厚度:

border-width

:thin || medium || thick || 1em、2px、0.1%

(thin:細邊框,medium:中等邊框,thick:粗邊框,*使用「border-width

」屬性需先設定:border-style)

邊框厚度簡寫可為所有邊框設定寬度,也可以單獨的設定各邊的邊框寬度

例1:設定所有邊框寬度

bord-width: medium;(所有邊框厚度都是中等)

例2:設定4個邊不同寬度

bord-width: thin medium thick 2px;(上邊框:細,右邊框:中等,下邊框:粗,左邊框:2px)

例3:設定3個框寬度

bord-width:thin medium thick

;(上邊框:細,右邊框和左邊框:中等,下邊框:粗)

例2:設定4個邊不同寬度

bord-width: thin medium;(上邊框和下邊框

:細,右邊框和左邊框:中等

邊框樣式:border-style:none|| hidden || dotted ||dashed||solid|| double || groove || ridge || inset || outset

(none:無邊框,hidden:與「none」相同,用於表時用於解決邊框衝突,dotted:點狀邊框,大多數瀏覽器呈現實線,dashed:虛線,大多數瀏覽器呈現實線

,solid:實線,double:雙線,groove:3d凹槽,ridge:3d壟狀邊框,inset:3dinset邊框,outset:3doutset邊框

*常用:none、dashed、solid ,其餘可不記)

以下所有邊框設定例項:

邊框圓角:

border-radius:1px || 3em || 10%

例:

內邊距:

padding:10px || 1em ||20% || auto

外邊距:

margin:10px || 1em ||20%|| auto

*以上屬性都可指定乙個邊設定樣式

css盒模型。邊框和內外邊距

css盒模型 外邊距 邊框 內填充 內容 盒模型分為兩種 標準盒模型 怪異盒模型 ie盒模型 邊框 border border 10px solid blue 表示設定10畫素藍色實線條的邊框 是以下三個樣式的復合語法 border width 10px 設定邊框的寬度 border color b...

內外邊距 盒模型 浮動

盒子 容器 盒子模型 英文 box model。最常見的盒子是 div span 盒子中的區域 content 1.寬 width px content 2.高 height px content 3.內邊距 padding 4.外邊距 margin 5.邊框 border 注意 標準盒模型的寬和高...

CSS盒子模型 邊框 內外邊距 預設樣式

一 盒子模型 1 盒子的大小.box1 2 為元素設定邊框 1 邊框的寬度 設定邊框的寬度 border width 100px border width 10px 20px 30px 40px border width 10px 20px 40px border width 10px 20px b...