day9

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è)置所有的背景屬性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,155評(píng)論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,059評(píng)論 0 6
  • 一、文檔流的概念指什么?有哪些方式可以讓元素脫離文檔流? 文檔里指元素在文檔中的位置由元素在html里的位置決定,...
    dengpan閱讀 590評(píng)論 0 3
  • 一、文檔流的概念指什么?有哪種方式可以讓元素脫離文檔流? 1、文檔流指的是元素在排列布局中所占用的位置,具體的說是...
    鴻鵠飛天閱讀 841評(píng)論 0 0
  • 概述 本文是公司單點(diǎn)登錄(SSO)產(chǎn)品的接口設(shè)計(jì)文檔。 接口列表 票據(jù)驗(yàn)證接口 所屬系統(tǒng) SSO認(rèn)證系統(tǒng) 接口地址...
    雷蒙張閱讀 2,491評(píng)論 0 0

友情鏈接更多精彩內(nèi)容