1.overflow屬性的應(yīng)用
當(dāng)盒子內(nèi)的元素超出盒子自身的大小時,內(nèi)容就會溢出(IE6除外)深浮,這時如果想要規(guī)范溢出內(nèi)容的顯示方式压怠,就需要使用CSS的overflow屬性,其基本語法格式如下:選擇器{overflow:屬性值}
版心和布局流程
布局流程:1飞苇、確定頁面的版心(可視區(qū))菌瘫。2、分析頁面中的行模塊布卡,以及每個行模塊中的列模塊雨让。3、運用盒子模型的原理忿等,通過DIV+CSS布局來控制網(wǎng)頁的各個模塊栖忠。
2.CSS布局高級
清除浮動:在CSS中,clear屬性用于清除浮動贸街,其基本語法格式如下:選擇器{float:屬性值;}
常用四種清除浮動的方法:
方法一:使用空標(biāo)記清除浮動庵寞,隔墻放。增加標(biāo)簽薛匪。
方法二:使用overflow屬性清除浮動捐川。會誤傷。
方法三:使用after偽對象清除浮動逸尖。
方法四:使用before after偽對象清除浮動
元素的定位屬性:元素的定位屬性主要包括定位模式和邊偏移兩部分属拾。
1.定位模式:在CSS中,position屬性用于定義元素的定位模式冷溶,其基本語法格式如下:選擇器{position:屬性值;}
2渐白、邊偏移:在CSS中,通過邊偏移屬性top逞频、bottom纯衍、left或right,來精確定義定位元素的位置苗胀,其取值為不同單位的數(shù)值或百分比襟诸。
靜態(tài)定位static:靜態(tài)定位是元素的默認(rèn)定位方式,當(dāng)position屬性的取值為static時基协,可以將元素定位于靜態(tài)位置歌亲。 所謂靜態(tài)位置就是各個元素在HTML文檔流中默認(rèn)的位置。
在靜態(tài)定位狀態(tài)下澜驮,無法通過邊偏移屬性(top陷揪、bottom、left或right)來改變元素的位置。
相對定位relative (自戀型):相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進行定位悍缠,當(dāng)position屬性的取值為relative時卦绣,可以將元素定位于相對位置。對元素設(shè)置相對定位后飞蚓,可以通過邊偏移屬性改變元素的位置滤港,但是它在文檔流中的位置仍然保留。
絕對定位absolute:絕對定位是將元素依據(jù)最近的已經(jīng)定位(絕對趴拧、固定或相對定位)的父元素進行定位溅漾,若所有父元素都沒有定位,則依據(jù)body根元素進行定位著榴。當(dāng)position屬性的取值為absolute時添履,可以將元素的定位模式設(shè)置為絕對定位。
固定定位fixed:固定定位是絕對定位的一種特殊形式兄渺,它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素缝龄。當(dāng)position屬性的取值為fixed時汰现,即可將元素的定位模式設(shè)置為固定定位挂谍。
z-index層疊等級屬性:當(dāng)對多個元素同時設(shè)置定位時,定位元素之間有可能會發(fā)生重疊瞎饲。
2.CSS背景
background-attachment 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動口叙。
background-color ? ? ? ? ? ? ? ? ? 設(shè)置元素的背景顏色。
background-image 設(shè)置元素的背景圖像嗅战。
background-position 設(shè)置背景圖像的開始位置妄田。
background-repeat 設(shè)置是否及如何重復(fù)背景圖像。
background 合寫:在一個聲明中設(shè)置所有的背景屬性驮捍。