Github pages 博文
一 . CSS盒模型
1.盒子的結構
margin-border-padding結構 + 內容content 組成盒模型
注意
width,height 取的是content地區的寬高,不包括padding border margin,但是盒子實際所佔高度要算上外面三個(padding border margin)
賦值順序,順時針,上(top)->右(right)->下(bottom)->左(left)
----top(1)----->|| |left(4) right(2)| |<---bottom(3)----
賦值,一個值,四個值都是這個,如margin : 10px;賦值,兩個值,兩個值賦給 top right,也就是前兩個,然後,bottom = top , left = right賦值,三個值,分別賦值給 top right bottom,也就是前三個,然後left = right賦值,四個值,不用多說了...
在各瀏覽器中的表示html
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>在瀏覽器開發人員工具中的表示</title> <style> body { margin: 0; background-color: cyan; } #test-div { padding: 10px; border: 5px dotted yellow; margin: 20px; background-color: red; }</style></head><body><div id="test-div"> 內部文字</div></body></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 設定為 -50px;盒子整體左移50px;
以上就是CSS徹底研究(2)的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
