CSS徹底研究(2)

CSS徹底研究(2)

Github pages 博文

一. CSS盒模型

1.盒子的結構

margin-border-padding結構+ 內容content 組成盒模型

margin-border-padding結構+ 內容content 組成盒模型

是content區域的寬高,不包括padding border margin,但是盒子實際所佔高度要算上外面三個(padding border margin)

賦值順序,順時針,上(top)->右(right)->下(bottom)->左(left)

----top(1)----->||               |left(4)        right(2)|  2)|  |left(4)          -

賦值,一個值,四個值都是這個,如margin : 10px;賦值,兩個值,兩個值賦給top right,也就是前兩個,然後,bottom = top , left = right賦值,三個值,分別賦值給top right bottom,也就是前三個,然後left = right賦值,四個值,不用多說了...

在各瀏覽器中的表示html

           

   內部文字

Chrome偏好紅色的margin偏xx色的border(啥顏色,叫不出來)偏青色的padding偏藍色的content

IE10,win8.1瀏覽器offset,見stackoverflow問題,說是用relative absolute改變之後的偏移,同chrome裡的position

2.border

border : width(2px) color(green) style(dotted/dashed)

border-width/color/style 設置某一屬性border-left : width color style 設置一邊的屬性結合起來可以border-left-style : dotted;

邊框與背景對於IE,background = content + padding對於FF,background = content + padding + border小的差距,要注意

3.padding 與margin

賦值規則,上面說了,總結起來就是:從top開始,順時針,將N個值賦給前N個,其他的依據top-bottom left-right配對拷貝這個原則即可,對於一個值得,表示四個全都一樣

body特殊的盒子,在默認的情況下,body會有若干px的margin,而且body的background會擴展到margin部分,也就是緊貼著瀏覽器,background-image 和background- color都會這樣,其他的盒子background最多也就是到border(FF下).

二. 標準文檔流

1.簡稱標準流

指在不使用其他的與排列、定位相關的特殊CSS規則時各種元素的排列規則。

塊級元素block，典型的有div ul li總是以一個塊的形式表現出來，並且跟同級的兄弟塊之間，依次豎直排列，左右撐滿。

行內元素inline，典型的有span a標籤 標籤。橫向排列,最右端自動折行

div能包含span樣式，反之而不能，即span不能包含div。

2.塊間距

行內元素的水平間距間距= 左側元素的margin-right + 右側元素的margin-left

塊級元素的垂直間距垂直間距= max(上面元素的margin-bottom , 下面元素的margin-top)這個就是所謂的塌陷原則,小的margin塌陷到大的margin裡面去了

嵌套div的margin子div的margin放在父div的content區域,合理的理想情況

margin設定為負值margin其實是border 距離外邊界的距離,將margin-left 設定為負值margin其實是border 距離外邊界的距離,將margin-left 設定為負值margin其實是border 距離外邊界的距離,將margin-left 設定為-50px;盒子整體左移50px;

 以上就是CSS徹底研究(2)的內容，比較多相關內容請關注PHP中文網（www.php.cn）！