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

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

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

2、距（padding）外邊距（margin）邊框（border）Padding與margin都有上、右、下、左四個值。當這些屬性被賦值后，會影響盒子的寬度與高度。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（下外邊距）【實例】盒模型寬高計算div{margin:30px;padding:20px;height:100px;width:100px;border:solid20px#CCFFFF;}6.1任務(wù)1：認識盒模型DIV的寬度=30px+20px+

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

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

塊元素在顯示時會獨占一行，常見的塊元素有p、ul、li...