盒子模型與定位課件.ppt

《盒子模型與定位課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、CSS盒子模型與定位信息工程學(xué)院2010.10知識(shí)回顧1什么是CSSCSS（CascadingStyleSheets）：層疊樣式表，一種定義樣式的語(yǔ)言，用于描述如何格式化和顯示網(wǎng)頁(yè)中的信息。2CSS基本語(yǔ)法CSS規(guī)則：選擇器{屬性1：屬性值1;...;屬性n：屬性值n;}CSS選擇器：基本選擇器（標(biāo)簽、類(lèi)和ID）復(fù)合選擇器（交集、并集、后代、偽類(lèi)等等）3CSS引入方法行內(nèi)樣式、內(nèi)部（內(nèi)嵌）樣式、外部樣式想一想？頁(yè)面的構(gòu)成元素都有什么？h1、h2、p、a、img、span、div、input等等等等。這些元素在頁(yè)面上都是怎么放置的呢？像a、span、img和input

2、這樣的元素是行內(nèi)元素，放置的時(shí)候可以在一行，而div、p、h1和h2會(huì)獨(dú)占一行放置。CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互頁(yè)面上的每個(gè)元素都被瀏覽器看成是一個(gè)矩形的盒子，這個(gè)盒子由元素的內(nèi)容、填充、邊框和邊界組成。網(wǎng)頁(yè)就是由許多個(gè)盒子通過(guò)不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。CSS的盒子模型CSS的盒子模型每個(gè)HTML元素都可以看作是一個(gè)裝了東西的盒子盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其它盒子之間，還有邊界(magin)

3、,如圖所示默認(rèn)情況下盒子的邊框是無(wú)，背景色是透明，所以我們?cè)谀J(rèn)情況下看不到盒子margin：邊距，四個(gè)方向?yàn)閙argin-top，margin-right，margin-bottom，margin-leftborder：邊框，四個(gè)方向?yàn)閎order-top，border-right，border-bottom，border-leftpadding：填充，四個(gè)方向?yàn)閜adding-top，padding-right，padding-bottom，padding-leftcontent：主體內(nèi)容元素盒子大小的計(jì)算一個(gè)元素實(shí)際寬度=左邊界＋左邊框＋左填充＋內(nèi)容寬度＋右填

4、充＋右邊框＋右邊界例如下面的樣式#MyBox{margin:10px;padding:5px;border:dotted;border-width:3px;border-color:#0F0;width:70px;//內(nèi)容的寬度}這個(gè)區(qū)域的寬度=左邊距+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊距=10px+3px+5px+70px+5px+3px+10px=106pxCSS盒子模型計(jì)算題如果盒子里面嵌套有盒子，那么：兩個(gè)盒子邊框之間的距離=外面盒子的填充值(padding)＋里面盒子的邊距值(margin)#box1

5、{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10px0px10px10px;width:100px;}body{border:1pxdotted#FF0000}這是里面的盒子