web初步 盒子模型(Box Model)

2021-10-23 04:37:07 字數 1401 閱讀 8207

盒子邊框(border)

border

: border-width || border-style || border-color

屬性

作用border-width

定義邊框粗細,單位是px

border-style

邊框的樣式

border-color

邊框顏色

邊框綜合設定

border

: border-width || border-style || border-color

例如:

border

: 1px solid red; 沒有順序

top,bottom,left,right可以對四邊分別進行設定

內邊距(padding)

padding屬性用於設定內邊距。是指邊框與內容之間的距離

padding- top,bottom,left,right可以對四邊分別進行設定

值的個數

表達意思

1個值padding:上下左右內邊距;

2個值padding: 上下內邊距 左右內邊距 ;

3個值padding:上內邊距 左右內邊距 下內邊距;

4個值padding: 上內邊距 右內邊距 下內邊距 左內邊距 ;

給盒子指定padding值之後:

內容和邊框 有了距離,新增了內邊距。

盒子變大了。

盒子的實際的大小 = 內容的寬度和高度 + 內邊距 + 邊框

外邊距(margin)

margin屬性用於設定外邊距。margin就是控制盒子和盒子之間的距離

margin- top,bottom,left,right可以對四邊分別進行設定

margin值的簡寫 (復合寫法)代表意思 跟 padding 完全相同。

塊級盒子水平居中 左右margin 改為 auto

清除元素的缺省內外邊距

*

外邊距合併

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。

圓角邊框(css3)

border-radius

:length;

border-radius

: 50%;

盒子陰影(css3)
box-shadow

:水平陰影 垂直陰影 模糊距離(虛實) 陰影尺寸(影子大小) 陰影顏色 內/**影;

div

WEB前端 盒子模型初識

border border width border style border color 複製 邊框屬性 設定邊框樣式 border style 邊框樣式用於定義頁面中邊框的風格,常用屬性值如下 none 沒有邊框即忽略所有邊框的寬度 預設值 solid 邊框為單實線 最為常用的 dashed 邊...

Web前端 CSS盒子模型

2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距,實現標籤在父標籤範圍內水平居中 3 mar...

web前端基礎 盒子模型

盒子模型的概念 盒子模型用來 放 網頁中的各種元素。網頁設計中內容,如文字 等元素,都可是盒子 div巢狀 寬度屬性 寬度 width 長度值 百分比 auto 最大寬度 max width 長度值 百分比 auto 最小寬度 min width 長度值 百分比 auto 高度屬性 高度 heigh...