項(xiàng)目六DIV+CSS布局網(wǎng)

《項(xiàng)目六DIV+CSS布局網(wǎng)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、項(xiàng)目六DIV+CSS布局網(wǎng)頁掌握盒模型了解元素類型掌握DIV及其常用屬性能夠分析并使用DIV+CSS布局網(wǎng)頁所有頁面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁面空間。一般來說這些被占據(jù)的空間往往都要比單純的內(nèi)容要大，因?yàn)楹凶涌梢杂羞吙?，盒子?nèi)外都可以有邊距，可以通過調(diào)整盒子的邊框和邊距等參數(shù)，來調(diào)節(jié)盒子的位置。一個(gè)盒子模型由content（內(nèi)容）、border（邊框）、padding（填充也叫內(nèi)邊距）和margin（外邊距）這4個(gè)部分組成。如圖所示。6.1任務(wù)1：認(rèn)識(shí)盒模型6.1.1盒模型概述內(nèi)邊

2、距（padding）外邊距（margin）邊框（border）Padding與margin都有上、右、下、左四個(gè)值。當(dāng)這些屬性被賦值后，會(huì)影響盒子的寬度與高度。1、盒模型的寬度盒模型的寬度=margin-left（左外邊距）+border-left（左邊框）+padding-left（左內(nèi)邊距）+width（內(nèi)容寬度）+padding-right（右內(nèi)邊距）+border-right（右邊框）+margin-right（右外邊距）2、盒模型的高度盒模型的高度=margin-top（上外邊距）+bor

3、der-top（上邊框）+padding-top（上內(nèi)邊距）+height（內(nèi)容高度）+padding-bottom（下內(nèi)邊距）+border-bottom（下邊框）+margin-bottom（下外邊距）【實(shí)例】盒模型寬高計(jì)算div{margin:30px;padding:20px;height:100px;width:100px;border:solid20px#CCFFFF;}6.1任務(wù)1：認(rèn)識(shí)盒模型DIV的寬度=30px+20px+

4、20px+100px+20px+20px+30px=240pxDIV的高度=30px+20px+20px+100px+20px+20px+30px=240px6.1任務(wù)1：認(rèn)識(shí)盒模型6.1.2元素類型HTML中的元素默認(rèn)分為兩種：塊元素（blockelement）與行內(nèi)元素（inlineelement）。1、塊元素塊元素是獨(dú)立的，顯示時(shí)獨(dú)占一行。常見的塊元素有：p、div、ul、li、h1、dt...2、行內(nèi)元素行內(nèi)元素都會(huì)在一行內(nèi)顯示。常見的行內(nèi)元素有：a、img、span、strong...【實(shí)

5、例】元素類型.block{background-color:#6CF;}.inline{background-color:#F9F;}6.1任務(wù)1：認(rèn)識(shí)盒模型塊元素

塊元素在顯示時(shí)會(huì)獨(dú)占一行，常見的塊元素有p、ul、li...