開始學(xué)習(xí)HTML,并記下筆記。

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

margin-top(上)

right(右)

bottom(下)

left(左)

“外邊距也可以為一個負(fù)值，元素會反方向移動”

margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin.

如果只指定，左邊距或右邊距的margin為auto則會將外邊距設(shè)置為最大值

如果兩側(cè)同時設(shè)置，則兩側(cè)的外邊距會設(shè)置為相同的值。

就可以使元素自動在父元素中居中，所以通常左右同事設(shè)置auto,以使子元素在父元素中水平居中。

(垂直方向設(shè)置auto，則外邊距默認(rèn)就是0)

margin-left:auto;

垂直外邊距的重疊

在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊(指兄弟元素之間的相鄰?fù)膺吘鄷∽畲笾刀皇侨『?

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

如果父子元素的垂直邊距相鄰了，則子元素的外邊距會設(shè)置給父元素。(可在兩個元素間加一個a而使他們外邊距相加“不建議使用”)

！可謂子元素設(shè)置一個上邊框:設(shè)置Padding-top:1px;

!可謂父元素設(shè)置一個上邊距Padding-top:100px;(將父元素的高降低100px)

瀏覽器默認(rèn)樣式

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

所以為很多元素都設(shè)置了一些默認(rèn)的margin和padding，(不需要使用，通常都會去掉瀏覽器的默認(rèn)樣式)

“標(biāo)簽名”{

margin：0；

}(過于麻煩)

*{

margin:0;

padding:0;

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

內(nèi)聯(lián)元素的盒模型

內(nèi)容區(qū)：內(nèi)聯(lián)元素不能設(shè)置width和hight

水平方向內(nèi)邊距：內(nèi)聯(lián)元素可以設(shè)置水平方向內(nèi)邊距

垂直方向內(nèi)邊距：內(nèi)聯(lián)元素可以設(shè)置垂直方向內(nèi)邊距，但是不會影響布局。

邊框：可以設(shè)置邊框，但是垂直邊框不會影響布局，水平會。

水平外邊距：支持水平方向外邊距，且不會重疊而是求和。

垂直外邊距：不支持。

display和visibility

一個連接(內(nèi)聯(lián)元素不支持寬和高)

但是可以講一個內(nèi)聯(lián)元素變成塊元素，通過display樣式可以修改元素的類型。

display

可選值：

inline：可以將一個元素作為內(nèi)聯(lián)元素顯示

block：可以將一個元素設(shè)置為塊元素顯示

inline-block：將一個元素轉(zhuǎn)換為行內(nèi)塊元素(既可以設(shè)置寬高也不會獨占一行)

none：不顯示元素并且元素不會在頁面繼續(xù)占有位置

visibility(可以用來設(shè)置元素顯示和隱藏的狀態(tài))

可選值：

Visible：默認(rèn)值

Hidden：元素會隱藏不顯示，但是它的位置會依然保持

overflow

{子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中，理論上子元素的大小最大等于父元素內(nèi)容區(qū)的大小，如果子元素的設(shè)置的大小超過了父元素的內(nèi)容區(qū),則超出的部分會在父元素以外的地方顯示，及溢出的內(nèi)容，}

通過overflow可以設(shè)置父元素如何處理溢出的內(nèi)容。

可選值：

visible：默認(rèn)值

hidden：溢出的部分會被修剪，不顯示

scroll：會為父元素添加滾動條，通過拖動滾動條來查看完整的內(nèi)容，而且不論內(nèi)容是否溢出，都會添加水平和垂直雙方向的滾動條。

auto：會根據(jù)需求自動添加滾動條(水平或垂直或無)

文檔流

文檔流處在網(wǎng)頁的最底層 ，它表示的是一個頁面中的位置。我們所創(chuàng)建默認(rèn)都處在文檔流中

元素在文檔流中的特點

塊元素

1.塊元素在文檔流中會獨占一行，塊元素會自上而下排列。

2.塊元素在文檔流中默認(rèn)寬度是父元素的100%

3.塊元素在文檔流中高度默認(rèn)被內(nèi)子元素(內(nèi)容 )撐開

內(nèi)聯(lián)元素

1.內(nèi)聯(lián)元素在文檔流中只占自身大小，會默認(rèn)自左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素，則會換到下一行。繼續(xù)自左向右

2.前提在文檔流中，內(nèi)聯(lián)元素的寬度和高度默認(rèn)被內(nèi)子元素(內(nèi)容 )撐開

【“width和hight的默認(rèn)值為auto”當(dāng)元素的高和寬度的值為auto時，此時指定內(nèi)邊距不會影響可見框的大小，而是會自動修改寬度和高度，以適應(yīng)內(nèi)邊距。】

總結(jié)

以上是生活随笔為你收集整理的使用html记笔记,开始学习HTML,并记下笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。