前十課-html6flash63divcss第六課網(wǎng)頁布局

官網(wǎng)：全國免費咨詢熱線：4006-553-664企業(yè)QQ：4006-553-664第六課：網(wǎng)頁DIV布局主講：（朱毅）第六課：網(wǎng)頁DIV布局與定位div(division)簡單而言是一個區(qū)塊容器標(biāo)簽，即<div></div>之間相當(dāng)于一個容器，可以容納各種HTML元素。span與div類似，但是有區(qū)別，span是行內(nèi)元素(內(nèi)聯(lián)元素)，div是塊級元素。接下來說一下它們的區(qū)別。block塊級元素：當(dāng)前對象顯示為一個方塊，它將占據(jù)整行，其他的對象只能在下一行顯示。in-line行內(nèi)元素(內(nèi)聯(lián)元素)：與block對象相反，它允許下一個對象與之共享一行進(jìn)行顯示。常見的塊級元素有：div、form、h1~h6、ul、ol、li、table、tbody、th、td、tr、p、pre常見的行內(nèi)元素(內(nèi)聯(lián)元素)：span、a、img、input、strong、em、i、label、select、br塊級元素與內(nèi)聯(lián)元素可以相互轉(zhuǎn)換。塊級元素轉(zhuǎn)換為內(nèi)聯(lián)元素：display:in-line內(nèi)聯(lián)元素轉(zhuǎn)換為塊級元素：display:block塊級元素居中：margin:0auto;(一).初識div第六課：網(wǎng)頁DIV布局與定位1>borderborder一般用于分離元素，border的外圍即為元素的最外圍，因此計算元素實際的寬和高時，就要將border納入。border簡寫屬性在一個聲明設(shè)置所有的邊框?qū)傩?，可以按順序設(shè)置，即border-width,border-style,border-color。border-width和border-color都好說，重點說一下border-style。border-style可能的屬性值有：none:定義無邊框dotted:定義點狀邊框dashed:定義虛線solid:定義實線double:定義雙線groove:定義3D凹槽邊框ridge:定義3D壟狀邊框inset:定義3Dinset邊框outset:定義3Doutset邊框可以單獨的針對某一方位的邊框進(jìn)行樣式設(shè)置，即采用border-left,border-right,border-top,border-bottom這四個屬性即可(margin、padding與之相同)。第六課：網(wǎng)頁DIV布局與定位(二).盒模型所有頁面中的元素都可以看成是一個盒子，占據(jù)著一定的頁面空間，一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容要大，也即可以通過調(diào)整盒子的邊框和距離等參數(shù)來調(diào)節(jié)盒子的位置。一個盒子模型由content(內(nèi)容)、border(邊框)、padding(間隙/內(nèi)邊距)、margin(間隔/外邊距)這四個部分組成。一個盒子的實際寬度=左外邊距+左邊框?qū)?左內(nèi)邊距+content寬度+右內(nèi)邊距+右邊框?qū)?右外邊距一個盒子的實際高度=上外邊距+上邊框?qū)?上內(nèi)邊距+content寬度+下內(nèi)邊距+下邊框?qū)?下外邊距第六課：網(wǎng)頁DIV布局與定位2>paddingpadding用于控制content與border之間的距離，使用padding屬性可以在一個聲明中設(shè)置所有的內(nèi)邊距屬性。有如下四種寫法：

(1).padding:10px20px30px40px上內(nèi)邊距為10px,右內(nèi)邊距為20px,下內(nèi)邊距為30px,左內(nèi)邊距為40px(從頂部開始的順時針)

(2).padding:10px20px30px上內(nèi)邊距為10px,右內(nèi)邊距和左內(nèi)邊距為20px,下內(nèi)邊距為30px

(3).padding:10px20px上內(nèi)邊距和下內(nèi)邊距為10px,右內(nèi)邊距和左內(nèi)邊距為20px

(4).padding:10px所有四個內(nèi)邊距都是10px

注：margin的寫法與之相同。

3.margin

margin是指元素與元素之間的距離。

當(dāng)兩個行內(nèi)元素緊時，它們之間的距離即為第一個元素的margin-right加上第二個元素的margin-left。當(dāng)兩個塊級元素上下放置時，它們之間的距離不再是margin-bottom和margin-top的和，而是兩者之間的較大者。第五課：網(wǎng)站css應(yīng)用1>使用div+css作以下布局課后作業(yè)布局要點：1、最外層用