CSS之 容器屬性

2021-05-12 20:13:32 字數 1010 閱讀 1203

css定位主要用到容器屬性,容器包括:內容content,補白padding,邊框border,邊界margin四部分。其關係如下圖:

以下幾條重在理解,理解,如果理解了就不難判斷定位乙個元素的位置了:

1.如果想控制乙個塊移動,就使用margin來確定其與父元素的位置關係,如果想控制乙個容器的內容文字或者的位置,就使用padding,調整位置,而文字或者所屬的文字位置並不移動

2.對於背景顏色或者來說,它們一直顯示到邊框border為止,padding部分也會顯示乙個元素的背景顏色或者背景,而margin部分則不會顯示該元素的背景顏色或者,而是顯示其父元素的背景顏色或者,如果沒有父元素就會顯示瀏覽器的底色,而margin始終是透明的

3.兩個元素的垂直邊界發生重疊時,當兩個邊界值不同時,元素的實際間距等於其中值較大的乙個,當父元素有padding子元素有margin時,同樣使用這個原則

4.兩個元素的水平邊界發生重疊時,實際的邊界距離等於兩個邊界值的和

5.當邊界值取負值的時候,無論垂直還是水平,值都相加,因此會出現重疊現象

6.在巢狀關係中,父元素的padding和子元素的margin會相會影響(父元素的margin影響父元素塊的位置,子元素的padding影響子元素自身content的位置,這兩者無互相影響。又由於子元素是作為父元素的content出現的,而父元素的padding影響其自身的content,同時,子元素的margin也影響整個子元素的位置,故此在巢狀關係中,影響子元素的位置的元素有兩個:父元素的padding,子元素的margin),它們的值分別出現有--有,有--無,無--有(無--無當然無影響)的情況的時候會影響最終的子元素的顯示位置,只有牢記padding和margin的不同,就會判斷出正確的位置

7.容器最後的顯示大小等於容器的border及border內的大小加上正的margin值。而負的margin值不會影響容器的實際大小,如果是負的top或left值會引起容器的向上或向左位置移動,如果是bottom或right只會影響下面box的顯示的參考線。

學習CSS之屬性

一 字型屬性 1.font family 字型族 常用的屬性值有 arial,courer,宋體 2.font size 字型大小 常用單位為pt point,磅 px pixel,畫素 有時也可用xx all,x all,medium,large,x large,xx large 如 3.font...

CSS屬性之背景

1.background red url pic.jpg center center 160px 80px no repeat 背景影象在背景顏色的上方,整體居中,大小160 80px且不重複 2.background size contain cover 背景大小包含在塊中,自動變大小,但不重複 ...

CSS之圓角屬性

今天我們就來學習一下圓角屬性 border radius 看看它到底是怎麼樣的吧。首先,我們先新建乙個盒子,用來觀察圓角屬性。需要注意的是這個盒子至少要有背景 background 或者是邊框 border 的其中之一 boxborder radius 10px 效果如下 效果如下 效果如下 效果如...