《Web前端開發(fā)基礎(chǔ)》課件-視頻10 盒子之間的關(guān)系_第1頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻10 盒子之間的關(guān)系_第2頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻10 盒子之間的關(guān)系_第3頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻10 盒子之間的關(guān)系_第4頁
《Web前端開發(fā)基礎(chǔ)》課件-視頻10 盒子之間的關(guān)系_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

盒子模型

--盒子之間的關(guān)系01HTML與DOM樹標(biāo)準(zhǔn)流02目錄1HTML與DOM樹樹：樹表示的是一種具有層次關(guān)系的結(jié)構(gòu)。之前在講關(guān)系選擇器時，分后代選擇器、子選擇器、兄弟選擇器等，這個也是因為html中有很典型的層次結(jié)構(gòu)。DOM樹：全稱為Documentobjectmodel，即文檔對象模型。<!DOCTYPEhtml>

<html>

<head>

<title>盒子模型的計算思考題</title>

<styletype="text/css">

body{

margin:0000;

font-family:宋體;

}

ul{

background:#ddd;

margin:15px;

padding:10px;

font-size:12px;

line-height:14px;

}

p,li{

color:black;

/*黑色文本*/

background:#aaa;

/*淺灰色背景*/

margin:20px20px20px20px;/*左側(cè)外邊距為0，其余為20像素*/

padding:10px0px10px10px;/*右側(cè)內(nèi)邊距為0，其余10像素*/

list-style:none

/*取消項目符號*/

}

.withborder{

border-style:dashed;

border-width:5px;

/*設(shè)置邊框為2像素*/

border-color:black;

margin-top:20px;

}

</style>

</head>

<body>

<ul>

<li>第1個項目內(nèi)容</li>

<liclass="withborder">第1個項目內(nèi)容，第1個項目內(nèi)容，第1個項目內(nèi)容，第1個項目內(nèi)容，第1個項目內(nèi)容，第1個項目內(nèi)容。</li>

</ul>

<ul>

<li>第2個項目內(nèi)容</li>

<liclass="withborder">第2個項目內(nèi)容，第2個項目內(nèi)容，第2個項目內(nèi)容，第2個項目內(nèi)容，第2個項目內(nèi)容，第2個項目內(nèi)容。</li>

</ul>

</body>

</html>

在瀏覽器里打開開發(fā)者工具，chrome瀏覽器快捷鍵ctrl+shift+I點擊這三個點的圖標(biāo)，可左右或上下布局調(diào)試一顆樹的形式把一個HTML文件的內(nèi)容組織起來，形成了嚴(yán)格的層次結(jié)構(gòu)。body是瀏覽器窗口中顯示的所有對象的根節(jié)點，ul、li都是body的下級節(jié)點，而li是ul的下級節(jié)點。這棵DOM樹上的各個節(jié)點都對應(yīng)網(wǎng)頁上的一個區(qū)域，比如在DOM查看器中單擊某個li節(jié)點，立即可在瀏覽器窗口中看到一個有顏色的矩形框閃爍，該框就是該節(jié)點在瀏覽器窗口中所占的區(qū)域。這就是前面所說的CSS盒子。bodyulullililili加深理解：

一個HTML文件并不是一個簡單的文本文件，而是一個具有層次結(jié)構(gòu)的邏輯文件。

每一個HTML元素（p、ul、li）都作為這個層次結(jié)構(gòu)中的一個節(jié)點存在。各節(jié)點反映在瀏覽器中會有不同的表現(xiàn)形式，具體的表現(xiàn)形式正是由CSS來確定的。

CSS目的是使網(wǎng)頁的表現(xiàn)形式與內(nèi)容結(jié)構(gòu)分離，CSS控制網(wǎng)頁的表現(xiàn)形式，HTML控制網(wǎng)頁的內(nèi)容結(jié)構(gòu)。2標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時各種元素的排列規(guī)則。塊級元素：總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。比如ul、li、ol、h1-h6、p等標(biāo)簽行內(nèi)元素：文字這類元素的各個字母之間橫向排列，到最右端會自動折行。這種標(biāo)記本身不占有獨立的區(qū)域，僅是在其他元素的基礎(chǔ)上指出了一定的范圍。比如strong、a、i等標(biāo)簽。標(biāo)準(zhǔn)流就是CSS規(guī)定的默認(rèn)的塊級元素和行內(nèi)元素的排列方式。如果一個HTML更復(fù)雜，層次更多，那么不斷地重復(fù)這個過程，直至所有的元素都被檢查一遍，該分配區(qū)域的分配區(qū)域，該設(shè)置顏色的設(shè)置顏色。通過這個過程，樣式也就被賦給了每個元素。在這個過程中，一個個盒子自然地形成一個序列。同級別的兄弟盒子依次排列在父級盒子中，同級別的父級盒子又依次排列在它們的父級盒子中，就像一條河流有干流和支流一樣，這就是“流”的含義。放置內(nèi)容的過程：1、從<body>標(biāo)記開始，body就是最大的一個塊級元素，依次把其中的子元素放到適當(dāng)?shù)奈恢茫陨洗a就是把兩個ul塊級元素豎直排列。2、分別進入每一個ul中查看它的下級元素，這里是兩個li，因此又為它們分別分配了一定的矩形區(qū)域；3、進入li內(nèi)部，里面是一行文字，則按照行內(nèi)元素的方式排列這行文字。塊級元素：div標(biāo)簽：div是divion的縮寫，是一個區(qū)塊容器標(biāo)記。即<div>標(biāo)簽相當(dāng)于一個容器，可容納段落、標(biāo)題、圖片、表格等各種html元素。div作用：是一個通用的塊級元素，方便排版。跟ul區(qū)別在于ul是具有特殊含義的塊級元素，具有一定的邏輯語義。行內(nèi)元素：span標(biāo)簽：也是容器標(biāo)記，也可以容納各種HTML元素，從而形成獨立對象。span標(biāo)簽沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其它行內(nèi)元素都不合適時，就可以使用span標(biāo)簽。div與span的區(qū)別：div標(biāo)簽是一個塊級元素，它包含的元素會自動換行；而span標(biāo)簽僅是一個行內(nèi)元素，在它的前后不會換行。<html>

<head><title>演示div與span區(qū)別</title></head>

<body>

<p>使用div標(biāo)簽</p>

<div>

<imgsrc="../images/love.png">

</div>

<div>

<imgsrc="../images/love.png">

</div>

<div>

<imgsrc="../images/love.png">

</div>

<p>使用span標(biāo)簽</p>

<span>

<imgsrc="../images/love.png">

</span>

<span>

<imgsrc="../images/love.png">

</span>

<span>

<imgsrc="

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論