day9

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疟呐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子东且,更是在濱河造成了極大的恐慌启具,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件珊泳,死亡現(xiàn)場離奇詭異鲁冯,居然都是意外死亡,警方通過查閱死者的電腦和手機色查,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門薯演,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人秧了,你說我怎么就攤上這事跨扮。” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵好港,是天一觀的道長愉镰。 經(jīng)常有香客問我,道長钧汹,這世上最難降的妖魔是什么丈探? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮拔莱,結(jié)果婚禮上碗降,老公的妹妹穿的比我還像新娘。我一直安慰自己塘秦,他們只是感情好讼渊,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著尊剔,像睡著了一般爪幻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上须误,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天挨稿,我揣著相機與錄音,去河邊找鬼京痢。 笑死奶甘,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的祭椰。 我是一名探鬼主播臭家,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼方淤!你這毒婦竟也來了钉赁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤携茂,失蹤者是張志新(化名)和其女友劉穎你踩,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邑蒋,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡姓蜂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了医吊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钱慢。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖卿堂,靈堂內(nèi)的尸體忽然破棺而出束莫,到底是詐尸還是另有隱情懒棉,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布览绿,位于F島的核電站策严,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏饿敲。R本人自食惡果不足惜妻导,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怀各。 院中可真熱鬧倔韭,春花似錦、人聲如沸瓢对。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽硕蛹。三九已至醇疼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間法焰,已是汗流浹背秧荆。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留壶栋,地道東北人辰如。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓普监,卻偏偏與公主長得像贵试,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凯正,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容

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