CSS徹底研究 2

2022-01-29 01:10:03 字數 2126 閱讀 7701

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,然後返回找到的物件 還談論了邏輯運算中語句和物件的概念 邏輯判斷和儲存操作,針對的群體必定是物件,執行語句會先執行,將執行結果當做物件進行操作 但...