框模型 盒子模型

2021-07-25 07:55:13 字數 911 閱讀 8789

一、margin(外邊距)

1.四個值margin:1px 2px 3px 4px (順序上右下左)

三個值:上右下(第四個值同對邊也就是左)

兩個值: 上下,左右

乙個值:上下左右一樣

2.margin的值可為px,也可為%,可為正,可為負,可為0,也可為auto

如:margin:10px auto(居中) 

3.單邊:margin-top/right/bottom/left

4.當上下外邊距相遇時,大的值生效。 

5.行級元素只有左右具有margin,上下不具有margin。

二、padding

1.padding會將容器撐大,計算寬高的時候不要忽略。

2.只有塊級元素和本身具有高度屬性的元素有寬高,行級元素沒有寬高,此時一般使用padding.

三、背景圖

1.background-color:red;(背景色)

2.background-image:url();(背景圖)

3.background-repeat:repeat/no-repeat/repeat-x/repeat-y

4.background-position:left bottom;

兩種定義方式:

(2)數值  水平 :正值向右負值向左   垂直:正值向下,負值向上 5

.background-size:寬 高/ % %/contain(保證的一邊撐滿容器)/cover(背景圖撐大到蓋滿容器,影象失真)(此條用的少,了解)

6.background-attachment:fixed;(拉滾動條的時候,網頁的內容往下拉,背景圖不動。)

7.簡寫:background:color  url() repeat position  attachment ,無所謂順序,中用空格隔開,不設定則為預設值。

CSS 盒子模型 框模型

盒子 css處理網頁時,他認為每個元素都包含在乙個不可見的盒子裡.盒子組成 內容區 content 內邊距 padding 邊塊 border 外邊距 margin 與其他盒子的距離 1.給盒子設定邊框 為乙個元素設定邊框必須指定三個樣式,缺一不可 border width 邊框寬度 border ...

CSS 盒子模型(框模型)

框 頁面元素皆為框。框模型 box model,定義了元素進行框處理的內容 就是定義你這個元素的框應該是什麼樣的 是元素內邊距 外邊距以及邊框的一種計算方式。想要設計好乙個優秀的網頁,框模型一定是必不可少需要認真考慮的。盒子模型就像乙個盒子,它有內容 content 內邊距 padding 邊框 b...

CSS盒子模型(框模型)

上圖為w3c標準的盒子模型 元素的總寬度 width 寬度 padding left 左內邊距 padding right 右內邊距 border left 左邊框 border right 右邊框 margin left 左外邊距 margin right 右外邊距 元素的總高度 height 高...