0416 盒子模型

2021-07-30 14:59:58 字數 1150 閱讀 4556

css盒子模型樣式:

定義:margin:外邊距,圍繞在元素邊框的空白區,在元素外建立額外的空白。

border:邊框,圍繞元素內容和內邊距的一條或多條線。

padding:內邊距,在邊框和內容區之間。

屬性:margin(外邊距也叫作空白):

接受任何長度單位,百分數值和負值,還可設定為auto。

margin

margin-top

margin-right

margin-bottom

margin-left

top-right-bottom-left順序

margin:0 auto/*布局居中顯示*/

border(邊框):

邊框有3個方面: 寬度width  樣式style   顏色color(可以不按順序)

如:border-top-color

屬性同margin,top-right-bottom-left順序

如果想要邊框出現,就必須宣告樣式

padding(內邊距也叫作填充):

接受長度值,百分數值但不接受負值。

屬性同margin,top-right-bottom-left順序

**盒模型 : 

box-sizing:border-box;

(以特定的方式定義匹配某個區域的特定元素)

盒子弧度:

border-radius:10px;

盒子陰影:

box-shadow:10px 10px ; 

x方向偏移(必需) y方向偏移(必需)

其他屬性可選:

blur模糊距離

spread 陰影尺寸

color陰影顏色

inset將外部陰影改為內部陰影

補充:邊框樣式border-style

none:預設無邊框

dotted:點線框

dashed:虛線框

solid:實線框

double:兩個邊界

groove:定義3d溝槽邊界

ridge:定義3d脊邊界

lnset:定義3d嵌入邊框

outset:定義3d突出邊框

3 盒子模型

盒子模型是我學習css中使用頻率最高的模型,其中主要還是理解整個盒子的構成,以及其中各屬性的作用,最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...

05盒子模型

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

盒子模型 標準盒模型,怪異盒模型

當你的瀏覽器展現乙個元素時,這個元素會佔據一定的空間。這個空間由四部分組成。中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距,外邊距將該元素與其它元素分開。內邊距,邊框和外邊距在元素的上 右 下 左都可以有不同的大小。所有這些大小值都可以為0。顏色 內邊距總是跟元素的...