在網(wǎng)頁設(shè)計(jì)中,網(wǎng)站建設(shè)布局領(lǐng)域,列表是很有意思的一個(gè)方面。列表中的項(xiàng)其實(shí)就是塊框,不過比起平常稍微多了一點(diǎn),多出的這部分不屬于文檔布局,而只是“掛”在一邊。
查看詳情高度在網(wǎng)頁設(shè)計(jì)時(shí),確定表的寬度要花這么大功夫,現(xiàn)在你可能想知道計(jì)算高度又會(huì)多復(fù)雜。實(shí)標(biāo)上,在CSS中,高度計(jì)算相當(dāng)簡(jiǎn)單,不過瀏覽器開發(fā)人員可能不這么認(rèn)為。最容
查看詳情在網(wǎng)頁設(shè)計(jì)時(shí),自動(dòng)布局模型盡管沒有固定布局那么快,不過對(duì)你來說可能更熟悉,因?yàn)檫@正是HTML表使用多年的模型。在大多數(shù)當(dāng)前用戶代理中,只要表的width為auto就會(huì)觸
查看詳情在網(wǎng)頁設(shè)計(jì)中,固定布局模型的速度之所以快,主要原因是布局不依賴于表單元格的內(nèi)容。其布局是根據(jù)該表以及表中列和單元格的width值決定的。固定布局模型的工作包括
查看詳情表大小既然我們巳經(jīng)深入討論過表的格式化和單元格邊框顯示,下面需要了解在網(wǎng)頁設(shè)計(jì)中如何確定表及其內(nèi)部元素的大小。談到確定表的寬度,有兩種不同的方法:固定寬度
查看詳情網(wǎng)站建設(shè)中,如果兩個(gè)或多個(gè)邊框相鄰,它們會(huì)相互合并。實(shí)際上,并不是完全合并,而是要看其中哪一個(gè)在其他邊框中占上風(fēng)。哪些邊框會(huì)勝出,哪些邊框會(huì)被合并,對(duì)此有一
查看詳情合并單元格邊框合并單元格模型基本上描述了沒有單元格間隔時(shí)HTML表通常如何布局,不過,這比分隔邊框模型要更復(fù)雜一些。以下規(guī)則使合并單元格邊框與分隔單元格邊框
查看詳情網(wǎng)站建設(shè)中采用這種模型,表中的每個(gè)單元格都與其他單元格分開一定距離,而且單元格的邊框彼此不會(huì)合并。因此,給定以下樣式和標(biāo)記,可以看到如圖11-6所示的結(jié)果:tab
查看詳情網(wǎng)站建設(shè)中實(shí)際上有兩種截然不同的邊框模型。按布局術(shù)語來講,如果單元格相互之間是分隔的,就是分隔邊框模型在起作用。另一種選擇是合并邊框模型,采用這種模型,單
查看詳情顧名思義,表標(biāo)超是一小段文本,描述了表內(nèi)容的本質(zhì)。因此,對(duì)于2003年第4季度的一個(gè)股票行情表,表標(biāo)題元素的內(nèi)容可能讀作“Q42003StockPerformance”,利用屬性capt
查看詳情為了完成表的顯示,網(wǎng)站建設(shè)定義了6個(gè)不同的“層”,可以分別放表的不同方面?;菊f來,對(duì)應(yīng)表各個(gè)方面的樣式都在其各自的層上繪制,因此,如果table元素有一個(gè)綠色背
查看詳情1、如果一個(gè)table-cell元素的父元素不是table-row元素,則會(huì)在該table-cell元素及其父元素之間插入一個(gè)匿名table-row對(duì)象。所插入的這個(gè)對(duì)象將包含該table-cell元
查看詳情標(biāo)記語言中可能未包含足夠的元素,以至于無法按CSS的定義充分表示表,也可能創(chuàng)作人員沒有加入所有必要的元素。例如,考慮以下HTML:Name:乍看到這個(gè)標(biāo)記,你可能認(rèn)為
查看詳情以行為主CSS將其表模型定義為“以行為主”。換句話說,這個(gè)模型假設(shè)創(chuàng)作人員創(chuàng)建的標(biāo)記語言會(huì)顯式聲明行,而列是從單元格行的布局推導(dǎo)出來的。因此,第一列由各行中
查看詳情在HTML中,很容易知道哪些元素屬于表,因?yàn)橄駎r和td之類元素的處理已經(jīng)內(nèi)置在瀏覽器中。與此不同,在XML中則沒有辦法從根本上知道哪些元素可能是表的一部分。因此引
查看詳情每個(gè)行框包含一行表格單元。表中的所有行框按其在源文檔中出現(xiàn)的順序從上到下地填充表(表的標(biāo)題行框和腳注行框有所例外,它們分別出現(xiàn)在表的最前面和最后面)。因此
查看詳情表格式化你可能在考慮如何繪制單元格邊框以及如何確定表的大小,不過在此之前,我們先來學(xué)習(xí)組裝表的基本方法,并了解表中的元素相互之間有什么關(guān)系。這稱為表格式化
查看詳情表布局看到本章的標(biāo)題,你可能會(huì)奇怪,“表布局?這不是我們一直都極力避免的嗎?”確實(shí)如此,不過本章并非討論如何使用表來建立布局,而是要介紹CSS中表本身如何布局,
查看詳情理解起來最簡(jiǎn)單的定位機(jī)制就是相對(duì)定位。采用這種機(jī)制時(shí),將通過使用偏移屬性移動(dòng)定位元素。不過,這可能有一些有意思的后果。從表面看來,似乎這就足夠了。假設(shè)希望
查看詳情從上一節(jié)可以看出,固定定位與絕對(duì)定位很類似,只不過固定元素的包含塊是視窗。固定定位時(shí),元素會(huì)完全從文檔流中去除,不會(huì)有相對(duì)于文檔中任何部分的位置??梢圆捎?/p> 查看詳情
對(duì)于所有定位,最后都不免遇到這樣一種情況:兩個(gè)元素試圖放在同一個(gè)位置上。顯然,其中一個(gè)必須蓋住另一個(gè)——不過,如何控制哪個(gè)元素放在“上層”呢?這就引人了屬性
查看詳情非替換元素和替換元素的定位規(guī)則大不相同。這是因?yàn)樘鎿Q元素有固有的高度和寬度,因此其大小不會(huì)改變,除非創(chuàng)作人員有意顯式地修改。因此,在替換元素定位中沒有“恰
查看詳情一般地,元素的大小和位置取決于其包含塊。各個(gè)屬性(width、right、padding-left等)的值也會(huì)有一些影響,不過最主要的還是其包含塊??紤]一個(gè)定位元素的寬度和水平
查看詳情元素絕對(duì)定位時(shí),如果除bottom外某個(gè)任意偏移屬性設(shè)置為auto,會(huì)有一種特殊的行為。下面以top為例,考慮以下標(biāo)記:WhenweconsiderCheeffectofpositioning,itquicklyb
查看詳情把“放置”和“大小”這兩個(gè)概念放在一起看上去有些奇怪,不過對(duì)于絕對(duì)定位元素來說,這是必要的,因?yàn)橐?guī)范把它們緊密地綁在一起。如果仔細(xì)考慮,這也不那么奇怪。請(qǐng)
查看詳情元素絕對(duì)定位時(shí),會(huì)從文檔流中完全刪除。然后相對(duì)于其包含塊定位,其邊界根據(jù)偏移屬性(top、left等)放置,定位元素不會(huì)流入其他元素的內(nèi)容,反之亦然。這說明,絕對(duì)定
查看詳情由于上一節(jié)中的大多數(shù)例子和例圖描述的都是絕對(duì)定位,你應(yīng)該對(duì)絕對(duì)定位如何工作有了一定的了解。接下來主要介紹使用絕對(duì)定位時(shí)的具體細(xì)節(jié)。元素絕對(duì)定位時(shí),會(huì)從文
查看詳情除了剪裁和溢出,還可以控制整個(gè)元素的可見性。visibility值:visible|hidden|collapse|inherit初始值:visible應(yīng)用于:所有元素繼承性:有計(jì)算值:根據(jù)指定確定這個(gè)屬
查看詳情如果一個(gè)絕對(duì)定位元素的內(nèi)容溢出其內(nèi)容框,而且overflow設(shè)置為要求剪裁該內(nèi)容,通過使用屬性clip可以改變剪裁區(qū)域的形狀。默認(rèn)值auto表示元素的內(nèi)容不應(yīng)剪裁。還可
查看詳情