開始學習HTML,并記下筆記。

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

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，(不需要使用，通常都會去掉瀏覽器的默認樣式)

“標簽名”{

margin：0；

}(過于麻煩)

*{

margin:0;

padding:0;

} (清除瀏覽器默認樣式)

內聯元素的盒模型

內容區：內聯元素不能設置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時，此時指定內邊距不會影響可見框的大小，而是會自動修改寬度和高度，以適應內邊距。】