margin-border-padding結構 + 內容content 組成盒模型
注意width,height 取的是content區域的寬高,不包括padding border margin,但是盒子實際所佔高度要算上外面三個(padding border margin)
賦值順序,順時針,上(top)->右(right)->下(bottom)->左(left)
----top(1)----->|
| |
left(4) right(2)
| |
賦值,乙個值,四個值都是這個,如margin : 10px;
賦值,兩個值,兩個值賦給 top right,也就是前兩個,然後,bottom = top , left = right
賦值,三個值,分別賦值給 top right bottom,也就是前三個,然後left = right
賦值,四個值,不用多說了...
3. 在各瀏覽器中的表示
html
內部文字
chrome偏紅的margin
偏xx色的border(啥顏色,叫不出來)
偏青色的padding
偏藍色的content
ie10,win8.1瀏覽器
offset,見stackoverflow問題,說是用relative absolute改變之後的偏移,同chrome裡的position
border-width/color/style 設定某一屬性
border-left : width color style 設定一邊的屬性
結合起來可以border-left-style : dotted;
邊框與背景
對於ie,background = content + padding
對於ff,background = content + padding + border
小的差距,要注意
賦值規則,上面說了,總結起來就是:
從top開始,順時針,將n個值賦給前n個,其他的依據top-bottom left-right配對拷貝這個原則即可,對於乙個值得,表示四個全都一樣
body特殊的盒子,在預設的情況下,body會有若干px的margin,而且body的background會擴充套件到margin部分,也就是緊貼著瀏覽器,background-image 和 background-color都會這樣,其他的盒子background最多也就是到border(ff下).
指在不使用其他的與排列、定位相關的特殊css規則時各種元素的排列規則。
塊級元素block,典型的有div ul li
總是以乙個塊的形式表現出來,並且跟同級的兄弟塊之間,依次豎直排列,左右撐滿。
行內元素inline,典型的有span a標籤標籤。
橫向排列,最右端自動折行div能包含span樣式,反之而不能,即span不能包含div。
行內元素的水平間距
間距 = 左側元素的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設計徹底研究
這本書不錯,詳細介紹了css的相關知識,對初學者和想進一步學習的人都有幫助。行內樣式 id樣式 類樣式 標記樣式 font weight bold font size 30px text decoration underline 強調標籤 盒子模型 給出2個值,前者表示上下,後者為左右 給出3個值,...
ViewState徹底研究
1.為什麼需要產生viewstate概念?2.使用demo了解asp.net page的life cycle,進而了解viewstate工作原理?當 classic asp 中的表單被提交時,所有的表單值都會被清空。設想一下,您提交了一張帶有大量資訊的表單,而伺服器返回了乙個錯誤。您將不得不返回表單...
and or的 徹底研究
在前面的篇章中,我們似乎已經全部了解了and和or 1.執行順序 從左到右依次結合執行 2.查詢方式 and查詢真值為false,or查詢真值為true,然後返回找到的物件 還談論了邏輯運算中語句和物件的概念 邏輯判斷和儲存操作,針對的群體必定是物件,執行語句會先執行,將執行結果當做物件進行操作 但...