開始學習HTML,並記下筆記

2021-10-03 02:13:55 字數 2073 閱讀 6404

外邊距(不影響可見框大小,影像盒子位置)

margin-top(上)

right(右)

bottom(下)

left(左)

「外邊距也可以為乙個負值,元素會反方向移動」

margin還可以設定為auto,auto一般只設定給水平方向的margin.

如果只指定,左邊距或右邊距的margin為auto則會將外邊距設定為最大值

如果兩側同時設定,則兩側的外邊距會設定為相同的值。

就可以使元素自動在父元素中居中,所以通常左右同事設定auto,以使子元素在父元素中水平居中。

(垂直方向設定auto,則外邊距預設就是0)

margin-left:auto;

垂直外邊距的重疊

在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊(指兄弟元素之間的相鄰外邊距會取最大值而不是取和)

!可在兩個元素間加乙個a而使他們外邊距相加

如果父子元素的垂直邊距相鄰了,則子元素的外邊距會設定給父元素。(可在兩個元素間加乙個a而使他們外邊距相加「不建議使用」)

!可謂子元素設定乙個上邊框:設定padding-top:1px;

!可謂父元素設定乙個上邊距padding-top:100px;(將父元素的高降低100px)

瀏覽器預設樣式

瀏覽器為了在頁面沒有樣式時,也可以有乙個比較好的顯示效果,

所以為很多元素都設定了一些預設的margin和padding,(不需要使用,通常都會去掉瀏覽器的預設樣式)

「標籤名」(過於麻煩)

* (清除瀏覽器預設樣式)

內聯元素的盒模型

內容區:內聯元素不能設定width和hight

水平方向內邊距:內聯元素可以設定水平方向內邊距

垂直方向內邊距:內聯元素可以設定垂直方向內邊距,但是不會影響布局。

邊框:可以設定邊框,但是垂直邊框不會影響布局,水平會。

水平外邊距:支援水平方向外邊距,且不會重疊而是求和。

垂直外邊距:不支援。

display和visibility

乙個連線(內聯元素不支援寬和高)

但是可以講乙個內聯元素變成塊元素,通過display樣式可以修改元素的型別。

display

可選值:

inline:可以將乙個元素作為內聯元素顯示

block:可以將乙個元素設定為塊元素顯示

inline-block:將乙個元素轉換為行內塊元素(既可以設定寬高也不會獨佔一行)

none:不顯示元素並且元素不會在頁面繼續占有位置

visibility(可以用來設定元素顯示和隱藏的狀態)

可選值:

visible:預設值

hidden:元素會隱藏不顯示,但是它的位置會依然保持

overflow

通過overflow可以設定父元素如何處理溢位的內容。

可選值:

visible:預設值

hidden:溢位的部分會被修剪,不顯示

scroll:會為父元素新增滾動條,通過拖動滾動條來檢視完整的內容,而且不論內容是否溢位,都會新增水平和垂直雙方向的滾動條。

auto:會根據需求自動新增滾動條(水平或垂直或無)

文件流

文件流處在網頁的最底層 ,它表示的是乙個頁面中的位置。我們所建立預設都處在文件流中

元素在文件流中的特點

塊元素1.塊元素在文件流中會獨佔一行,塊元素會自上而下排列。

2.塊元素在文件流中預設寬度是父元素的100%

3.塊元素在文件流中高度預設被內子元素(內容 )撐開

內聯元素

1.內聯元素在文件流中只佔自身大小,會預設自左向右排列,如果一行中不足以容納所有的內聯元素,則會換到下一行。繼續自左向右

2.前提在文件流中,內聯元素的寬度和高度預設被內子元素(內容 )撐開

【「width和hight的預設值為auto」當元素的高和寬度的值為auto時,此時指定內邊距不會影響可見框的大小,而是會自動修改寬度和高度,以適應內邊距。】

LESS學習筆記 下

通過傳參進行匹配,類似js中的if語句 less預編譯 trianger top,w 5px,c f00 trianger w 5px,c f00 pipei pos r pos a pos f pos ppcss輸出 pipei pos pp 避免編譯 less預編譯 test calc1 tes...

Jsp學習筆記(下)

靜態引入的jsp檔案不會被轉譯成servlet,靜態引入有同名變數導致編譯不通過的風險 jsp靜態引入 將file中的 拿到本檔案中,而file檔案並沒有被轉譯 將引入的jsp檔案轉譯後,在當前檔案中呼叫轉譯好的檔案 因為是兩個檔案,顯然可以有同名變數,沒有重名的風險 include file in...

Django Book學習筆記(下)

對於django加密,大致使用這樣的格式 hashtype salt hash 原因?我在django中使用了memcached,memcached完全就是基於記憶體的快取框架。memcached有乙個很好的特性是 它在多個伺服器間分享快取的能力。這意味著您可以在多台機器上執行memcached的守...