HTML5+CSS3

2021.6HTML5andCSS3第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法向報(bào)紙學(xué)習(xí)排版思想CSS排版觀念元素的浮動(dòng)DEMO元素的定位DEMOz-index空間位置經(jīng)典兩列布局DEMO第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法

第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法向報(bào)紙學(xué)習(xí)排版思想報(bào)紙的排版通常都是基于一種稱為“網(wǎng)格”的方式進(jìn)行的。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法向報(bào)紙學(xué)習(xí)排版思想核心的思想是借鑒“網(wǎng)格”的布局思想。具有如下優(yōu)點(diǎn)。使用基于網(wǎng)格的設(shè)計(jì)可以使大量頁面保持很好的一致性，這樣無論是在一個(gè)頁面內(nèi)，還是在網(wǎng)站的多個(gè)頁面之間，都可以具有統(tǒng)一的視覺風(fēng)格，這顯然是很重要的。均勻的網(wǎng)格以大多數(shù)認(rèn)為合理的比例將網(wǎng)頁劃分為一定數(shù)目的等寬列，這樣在設(shè)計(jì)中產(chǎn)生了很好的均衡感。使用網(wǎng)格可以幫助設(shè)計(jì)師把標(biāo)題、標(biāo)志、內(nèi)容和導(dǎo)航目錄等各種元素合理地分配到適當(dāng)?shù)膮^(qū)域，這樣可以為內(nèi)容繁多的頁面創(chuàng)建出一種潛在的秩序，或者稱為“背后”的秩序。報(bào)紙的讀者通常并不會(huì)意識(shí)到這種秩序的存在，但是這種秩序?qū)嶋H上在起著重要的作用。網(wǎng)格的設(shè)計(jì)不但可以約束網(wǎng)頁的設(shè)計(jì)，從而產(chǎn)生一致性，而且具有高度的靈活性。在網(wǎng)格的基礎(chǔ)上，通過跨越多列等手段，可以創(chuàng)建出各種變化的方式。這種方式既保持了頁面的一致性，又具有風(fēng)格的變化。網(wǎng)格可大大提高整個(gè)頁面的可讀性，因?yàn)樵谌魏挝淖置襟w上，一行文字的長(zhǎng)度與讀者的閱讀效率和舒適度有直接的關(guān)系。如果一行文字過長(zhǎng)，讀者在換行的時(shí)候，眼睛就必須劇烈的運(yùn)動(dòng)，以找到下一行文字的開頭，這樣既打斷了讀者的思路，又使眼睛和脖子的肌肉緊張，使讀者疲勞感明顯增加。而通過使用網(wǎng)格，可以把一行文字的長(zhǎng)度限制在適當(dāng)?shù)姆秶?，使讀者閱讀起來既方便，又舒適。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法向報(bào)紙學(xué)習(xí)排版思想報(bào)紙排版中的概念和CSS的術(shù)語進(jìn)行對(duì)比。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法CSS排版觀念即使是很復(fù)雜的網(wǎng)頁，也都是一個(gè)模塊一個(gè)模塊逐步搭建起來的。下面我們以一些訪問量非常大的實(shí)際網(wǎng)站為例，看看它們都是如何布局的，有哪些布局形式。兩列布局三列布局多列布局第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法兩列布局三列布局多列布局第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法元素的浮動(dòng)在標(biāo)準(zhǔn)流中，一般情況下一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列，不能并排。使用“浮動(dòng)”方式后，塊級(jí)元素的將改變它的行為。CSS中有一個(gè)float屬性，默認(rèn)為none，也就是標(biāo)準(zhǔn)流通常的情況。如果將float屬性的值設(shè)置為left或right，元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊，同時(shí)默認(rèn)情況下，盒子的寬度不再伸展，而是收縮，根據(jù)盒子里面的內(nèi)容的寬度來確定。當(dāng)一個(gè)盒子設(shè)置為浮動(dòng)時(shí)，它將脫離標(biāo)準(zhǔn)流，浮動(dòng)到目標(biāo)位置。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法元素的浮動(dòng)第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法使用clear屬性清除浮動(dòng)的影響如果不希望文字圍繞浮動(dòng)的盒子，又該怎么辦呢？增加一行對(duì)clear屬性的設(shè)置，這里先將它設(shè)為左清除，也就是這個(gè)段落的左側(cè)不再圍繞著浮動(dòng)框排列，效果如下。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法使用clear屬性清除浮動(dòng)的影響關(guān)于clear屬性有兩點(diǎn)要說明。clear屬性除了可以設(shè)置為了left或right之外，還可以設(shè)置為both，表示同時(shí)消除左右兩邊的影響。要特別注意，對(duì)clear屬性的設(shè)置要放到文字所在的盒子里，例如一個(gè)p段落的CSS設(shè)置中，而不要放到對(duì)浮動(dòng)盒子的設(shè)置里面。經(jīng)常有初學(xué)者沒有搞懂原理，誤以為在對(duì)某個(gè)盒子設(shè)置了float屬性以后，要消除它對(duì)外面的文字的影響，就要在它的CSS樣式中增加一條clear，其實(shí)這是沒有用的。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法擴(kuò)展盒子的高度關(guān)于clear的作用，這里再給出一個(gè)例子。可以看到，文字段落被刪除以后，父div的范圍縮成一條，是由padding和border構(gòu)成的，也就是說，一個(gè)div的范圍是由它里面的標(biāo)準(zhǔn)流內(nèi)容決定的，與里面的浮動(dòng)內(nèi)容無關(guān)。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法元素的定位CSS中使用position屬性來定位，它有4個(gè)屬性值static：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動(dòng)方式）進(jìn)行布局。relative：稱為相對(duì)定位，使用相對(duì)定位的盒子的位置常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對(duì)于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。absolute：絕對(duì)定位，盒子的位置以它的包含框?yàn)榛鶞?zhǔn)進(jìn)行偏移。絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離。這意味著它們對(duì)其后的兄弟盒子的定位沒有影響，其他的盒子就好像這個(gè)盒子不存在一樣。fixed：稱為固定定位，它和絕對(duì)定位類似，只是以瀏覽器窗口為基準(zhǔn)進(jìn)行定位，也就是當(dāng)拖動(dòng)瀏覽器窗口的滾動(dòng)條時(shí)，依然保持對(duì)象位置不變。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法靜態(tài)定位（static）static為默認(rèn)值，它表示塊保持在原本應(yīng)該在的位置上，即該值沒有任何移動(dòng)的效果。以下是一個(gè)很簡(jiǎn)單的標(biāo)準(zhǔn)流方式的兩層的盒子，沒有設(shè)置position屬性時(shí)的樣式。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法相對(duì)定位（relative）將一個(gè)盒子的position屬性設(shè)置為relative，即將其設(shè)置為相對(duì)定位時(shí)，它的布局規(guī)則是：使用相對(duì)定位的盒子，會(huì)相對(duì)于它原本的位置，通過偏移指定的距離，到達(dá)新的位置。使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)父塊沒有任何影響。因此，除了將position屬性設(shè)置為relative，還需要指定一定的偏移量，水平方向通過left或者right屬性來指定，豎直方向通過top和bottom來指定。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法絕對(duì)定位（absolute）使用絕對(duì)定位的盒子以它的“最近”的一個(gè)“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移。如果沒有已經(jīng)定位的祖先元素，那么會(huì)以瀏覽器窗口為基準(zhǔn)進(jìn)行定位。絕對(duì)定位的框從標(biāo)準(zhǔn)流中脫離，這意味著它們對(duì)其后的兄弟盒子的定位沒有影響，其他的盒子就好像這個(gè)盒子不存在一樣。在上述第一條原則中，有3個(gè)帶引號(hào)的定語，需要進(jìn)行一些解釋。（1）所謂“已經(jīng)定位”元素的含義是，position屬性被設(shè)置，并且被設(shè)置為不是static的任意一種方式，那么該元素就被定義為“已經(jīng)定位”的元素。（2）關(guān)于“祖先”元素，如果結(jié)合本章最前面介紹的“DOM樹”的知識(shí)，就可以理解了。從任意節(jié)點(diǎn)開始，走到根節(jié)點(diǎn)，經(jīng)過的所有節(jié)點(diǎn)都是它的祖先，其中直接上級(jí)節(jié)點(diǎn)是它的父親，以此類推。（3）關(guān)于“最近”，在一個(gè)節(jié)點(diǎn)的所有祖先節(jié)點(diǎn)中，找出所有“已經(jīng)定位”的元素，其中距離該節(jié)點(diǎn)最近的一個(gè)節(jié)點(diǎn)，父親比祖父近，祖父比曾祖父近，以此類推，“最近”的就是要找的定位基準(zhǔn)。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法絕對(duì)定位（absolute）第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法固定定位（fixed）position屬性的第4個(gè)取值是fixed，即固定定位。它與絕對(duì)定位類似，也會(huì)脫離標(biāo)準(zhǔn)流，但是區(qū)別在于定位的基準(zhǔn)不是祖先元素，而是瀏覽器窗口或者其他顯示設(shè)備的窗口。這種方式常常用于將某個(gè)元素永久顯示于瀏覽器窗口的固定位置。第11章

經(jīng)典DIV+CSS網(wǎng)頁布局方法z-index空間位置z-index屬性用于調(diào)整定位時(shí)重疊塊的上下位置，與它的名稱一樣，想象頁面為x-y軸，垂直于頁面的方向?yàn)閦軸，z-index值大的頁面位于其值小的上方z-index屬性的值為整數(shù)，可以是正數(shù)也可以是負(fù)數(shù)。當(dāng)塊被設(shè)置了position屬性時(shí)，該值便可設(shè)置各塊之間的重疊高低關(guān)系。默認(rèn)的z-index值為0，當(dāng)兩個(gè)塊的z-index值一樣時(shí)，將