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）！
