1.overflow屬性的應(yīng)用
當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí),內(nèi)容就會(huì)溢出(IE6除外),這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式,就需要使用CSS的overflow屬性,其基本語法格式如下:選擇器{overflow:屬性值}
版心和布局流程
布局流程:1、確定頁面的版心(可視區(qū))。2、分析頁面中的行模塊,以及每個(gè)行模塊中的列模塊。3、運(yùn)用盒子模型的原理,通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。
2.CSS布局高級(jí)
清除浮動(dòng):在CSS中,clear屬性用于清除浮動(dòng),其基本語法格式如下:選擇器{float:屬性值;}
常用四種清除浮動(dòng)的方法:
方法一:使用空標(biāo)記清除浮動(dòng),隔墻放。增加標(biāo)簽。
方法二:使用overflow屬性清除浮動(dòng)。會(huì)誤傷。
方法三:使用after偽對(duì)象清除浮動(dòng)。
方法四:使用before after偽對(duì)象清除浮動(dòng)
元素的定位屬性:元素的定位屬性主要包括定位模式和邊偏移兩部分。
1.定位模式:在CSS中,position屬性用于定義元素的定位模式,其基本語法格式如下:選擇器{position:屬性值;}
2、邊偏移:在CSS中,通過邊偏移屬性top、bottom、left或right,來精確定義定位元素的位置,其取值為不同單位的數(shù)值或百分比。
靜態(tài)定位static:靜態(tài)定位是元素的默認(rèn)定位方式,當(dāng)position屬性的取值為static時(shí),可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。
在靜態(tài)定位狀態(tài)下,無法通過邊偏移屬性(top、bottom、left或right)來改變?cè)氐奈恢谩?/p>
相對(duì)定位relative (自戀型):相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位,當(dāng)position屬性的取值為relative時(shí),可以將元素定位于相對(duì)位置。對(duì)元素設(shè)置相對(duì)定位后,可以通過邊偏移屬性改變?cè)氐奈恢?,但是它在文檔流中的位置仍然保留。
絕對(duì)定位absolute:絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位(絕對(duì)、固定或相對(duì)定位)的父元素進(jìn)行定位,若所有父元素都沒有定位,則依據(jù)body根元素進(jìn)行定位。當(dāng)position屬性的取值為absolute時(shí),可以將元素的定位模式設(shè)置為絕對(duì)定位。
固定定位fixed:固定定位是絕對(duì)定位的一種特殊形式,它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí),即可將元素的定位模式設(shè)置為固定定位。
z-index層疊等級(jí)屬性:當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí),定位元素之間有可能會(huì)發(fā)生重疊。
2.CSS背景
background-attachment 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
background-color ? ? ? ? ? ? ? ? ? 設(shè)置元素的背景顏色。
background-image 設(shè)置元素的背景圖像。
background-position 設(shè)置背景圖像的開始位置。
background-repeat 設(shè)置是否及如何重復(fù)背景圖像。
background 合寫:在一個(gè)聲明中設(shè)置所有的背景屬性。