CSS學習6(元素框)

2021-07-13 11:21:53 字數 778 閱讀 3422

所有文件元素都生成乙個矩形框,這稱為元素框(element box),它描述了乙個元素在文件布局中所佔的空間大小,因此,每個框影響著其他元素框的位置和大小。預設地,乙個可以顯示的文件由多個矩形框組成,這些矩形框分布開,從而不會相互重疊(一般情況下)。另外,根據某些限制,這些框要盡可能地少佔空間,同時還要保證相互之間有足夠的空間,以便清楚地看出哪些內容屬於哪個元素。

沒啥好說的,就說一點:

外邊距使用百分數值時是以父元素寬度為標準的,上下外邊距也一樣。

預設的邊框顏色是元素本身的前景色。如果沒有為邊框宣告顏色,它將與元素的文字顏色相同。另一方面,如果乙個元素沒有任何文字,假設它有乙個表,其中只包含影象,那麼該錶的邊框顏色就是其父元素的文字顏色(因為color可以繼承)。

css2.1明確指出元素的背景是內容、內邊距和邊框區的背景。也就是說如果你的邊框是虛線,背景會從邊框中透出來。

border-style

[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]| inherit

注意,當邊框樣式為none時,其width屬性也會被置0。

可以為元素的內邊距設定百分數值。像外邊距一樣,百分數值要相對於其父元素的width計算,上下邊距也一樣,所以如果父元素的width改變,它們也會改變。

儘管看上去可能有些奇怪,不過確實可以向替換元素應用內邊距,最讓人奇怪的是,可以向影象應用內邊距。

不論替換元素是塊級元素還是行內元素,內邊距都會圍繞其內容,背景色將填入該內邊距。

CSS學習筆記 六 元素定位

盒模型,就是瀏覽器為頁面中的每個 html 元素生成的矩形盒子。這些盒子們都要按照可見版式模型 visual formatting model 在頁面上排布。可見的頁面版式主要由三個屬性控制 position 屬性 display 屬性和 float 屬性。其中,position 屬性控制頁面上元素...

js es6 元素拖動

元素事件 滑鼠按下事件 滑鼠移動事件 滑鼠鬆開事件 元素樣式 讓元素脫離文件流,採用絕對定位的方式。當滑鼠在元素上面按下時,儲存元素的初始偏移量和滑鼠按下時的座標,然後在狀態變數裡面標記當前狀態為按下狀態。當滑鼠拖動元素移動時,我們通過計算滑鼠從起始位到移動位之間的偏移量來求元素應該移動的距離。元素...

CSS詳解(5 元素的分類)

塊級元素 內聯元素 內聯塊級元素 常見的塊級元素有 div,p,h1 h6,ol,ul,li,table,tr,td,form 塊級元素的特點 設定display block可以將元素顯示為塊級元素,如下的 就是將內聯元素a轉成塊級元素,從而使a元素具有塊元素的特點 a 1,常用的內聯元素有 a,b...