您現在的位置是:電腦技術吧?>? 編程技術 ??>??祙元素騙局,之謎??>??正文詳情

祙元素騙局,之謎

智樂池2019-11-17 12:20:41 人圍觀
簡介水怪之謎在table table元素中,有一個col元素(它還有一個孿生兄弟colgroup元素)。在W3C標準中,此元素稱為column元素,用于定義表中某些列的表示海藍之謎

在table表格元素中,有一個col元素(它還有一個孿生胞兄colgroup元素),在 W3C 標準中,這個元素被稱為列元素,用于定義表格中的某些列中的表現形式,在現行及常見的教程中,認為col元素可以使用常見的全局屬性,以及align、valign、width等屬性(乃至HTML 4.1 及 5.0 規范文檔中,也同意該元素可以使用全局屬性),很多DEMO也用它來舉例說明如何讓表格中的某列居中對齊、右對齊或改變某列的文字顏色,而事實上在大家常年的實踐中,已經證明了一個很恐怖的事情align也好valign也罷,甚至連全局屬性中的color屬性都完全不起作用,這到底是發生了什么事。

  照例先上結論:  在 CSS 2 中,列元素就僅能使用border、background、width及visibility這四個屬性,其它屬性(如對齊及字色都無法生效)。

  IE6、IE7及IE8(Q)遵循常見教程,可以使用各種對齊和文字相關設置。

  IE9開始及現在所有常用非IE瀏覽器均支持:nth-child(n)選擇器,可以用該選擇器實現列選擇,并支持所有全局 CSS 屬性。

  IE8(S)無解(因為它不支持上述選擇器),除第一條所描述的 4 個 CSS 屬性之外,無法統一改變列的對齊及字色。

  而col及colgroup元素,除了對IE6、7、8進行兼容之外,已經沒用了。

  為什么,這究竟是為什么  從比較簡單而明顯的角度說,所有元素的屬性在未定義的情況下,都是繼承,也就是與其父元素屬性相同。

而表格的 HTML 書寫方式,是以行為基礎的,單元格是行的子元素,但不是列的,所以它繼承不到列的屬性。

  從更根本的角度說,是 CSS 的工作模式所決定的。

頁面的一切表現均交由 CSS 進行計算和渲染,而 CSS 的基本工作方式遵循下面的步驟:  解析樣式表和文檔  對于文檔中的每個元素:  決定應用哪個 CSS 規則。

  使用這些規則做出 CSS 級聯。

  如果級聯的結果是關鍵字繼承(或繼承的屬性沒有規定值),則進行繼承  執行計算(把em變成px等等)。

在 CSS 2.1 中,getComputedStyle()DOM方法負責返回這些值。

  此時,每個元素的所有屬性都會有一個值。

  排列文檔版式  繪制文檔  在這樣的工作順序下,因為列元素是display:table-column,而單元格元素是display:table-cell,他們之間的具體關系要到第三步才能確認,因為你需要計算某一個單元格橫跨幾列或幾行,才能確定某一個單元格到底是第幾列。

而在那之前,也就是第二步的時候,每個元素的屬性值都已經計算出來了!但你還不知道哪個單元是第幾列,所以你沒辦法知道該列的值。

  然后我做了一個很無聊的DEMO,使用上面說到的 CSS 3 選擇器,選擇所有偶數列的單元格,變成藍色;而讓所有第三列的單元格變成黃色。

然后分別對 n 行 n 列的單元格進行合并操作(也就是第一行的第一個單元格占據3個單元格的,第二行的第二個單元格占據3個單元格,以此類推)。

結果如下:

  因為對單元格進行了列合并,而那個選擇器的本質又是按照行而非列選擇的,結果就變成上面那樣了(沒能在視覺上垂直渲染某一列)。

  話雖這么說,但在脫離了表格布局那么多年的今天,在表格終于能夠回歸它本來的應用目的的今天,這種奇葩布局的表格應該也是寥寥無幾了。

版權聲明:本文由 智樂池 整理編輯。

原標題:人體自燃之謎,UFO之謎

轉載注明出處:http://www.dn9ww09s.icu/program/13163.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 昂達雙系統怎么切換到安卓,雙系統切換

    昂達雙系統怎么切換到安卓,雙系統切換 相關圖片怎么轉換到蘋果系統一些用戶將為他們的計算機安裝兩個系統。安裝第二個系統后,這兩個系統如何切換到另一個系統?一。首先,打開“我的電腦”的資源管理器,找到系統屬性的選...

  • 代碼樣式,css代碼樣式

    代碼樣式,css代碼樣式 相關圖片css搜索框樣式代碼需要注意的是:首先,選擇的命名詞不應太具體,不能代表某一狀態(如顏色、字體大小等),以免在狀態變化時名稱失去意義。其次,樣式類名由小寫字母(a-Z)、...

  • 雙系統怎么刪除,雙系統如何刪除其中一個

    雙系統怎么刪除,雙系統如何刪除其中一個 相關圖片蘋果雙系統刪除windows當一些小伙伴想要體驗其他版本的操作系統,但他們不想放棄當前的系統時,他們通常會在自己的計算機上安裝雙系統。那么當體驗新鮮時,如何刪除其中一個繁瑣...

  • 駿馬圖,七駿馬圖

    駿馬圖,七駿馬圖 相關圖片油畫駿馬圖讓我們先看看效果:現在讓我們用鉛筆或線工具畫馬的輪廓圖1,然后用畫筆工具畫黑白,如圖2所示。上面只是一個大的,下面要仔細畫。這個教程不好寫。沒有筆頭。用畫筆...

  • ie瀏覽器臨時文件夾在哪,ie臨時文件夾路徑word

    ie瀏覽器臨時文件夾在哪,ie臨時文件夾路徑word 相關圖片win7ie臨時文件夾路徑當我們通過IE瀏覽網頁時,IE會自動將一些文件下載到計算機上,稱為臨時文件夾。IE臨時文件夾在哪里?IE臨時文件夾有什么用?現在,超人軟件編輯將為您解答。我...

  • apple id密碼忘了怎么辦,蘋果id怎么注冊

    apple id密碼忘了怎么辦,蘋果id怎么注冊 相關圖片apple蘋果ID(Apple account)是蘋果產品用戶享受官方服務的重要憑證之一。只有當用戶使用該帳戶時,他們才能訪問各種蘋果資源。然而,一些用戶遇到了蘋果ID被apple id 密碼找回...

  • 因為強大所以簡單,有一種強大叫簡單

    因為強大所以簡單,有一種強大叫簡單 相關圖片簡單的人有最純粹的力量焰火中有一個非常強大的工具-污跡工具也許你不經常使用它,但是如果你喜歡在這篇介紹中介紹的三個案例,你可能會忍不住拿起鼠標試試!Smudge cloud 1.1,簡單...

  • vcredistx86,安裝vcredist_x86

    vcredistx86,安裝vcredist_x86 相關圖片vcredist_armvcredit x86.exe是C 開發環境中常用的插件,是一些常用應用程序的必備文件之一,也是windows系統文件夾中的重要文件。如果缺少vcreditx任務管理器快捷鍵...

  • 絞胎陶瓷,陶瓷

    絞胎陶瓷,陶瓷 相關圖片協進陶瓷自從韓式網頁出現以來,自從蘋果水晶式按鈕問世以來,韓式網頁就一直被中國業界使用得很糟糕,中國業界也一直在使用它,有時候提取它的精華是可以的,但如果你只是機...

  • 怎么使用話費充q幣,移動卡話費怎么充q幣

    怎么使用話費充q幣,移動卡話費怎么充q幣 相關圖片用話費充q幣的軟件運營商有時會給用戶免費的通話費。當用戶因某種原因需要取消該號碼時,如果免費話費未用完,則無法收回。使用手機話費收取Q幣是個不錯的選擇。那么如何用手機...

熱評文章

  • vcf文件怎么轉成excel,vcf文件手機怎么打開

    vcf文件怎么轉成excel,vcf文件手機怎么打開 相關圖片手機csv文件怎么打開VCF是通訊簿導出的一種格式。但是,由于同步軟件的數量越來越多,使用VCF文件備份通訊簿的人越來越少。VCF文件的一個優點是它們可以在沒有網絡的情況下使用。...

  • html繪制到canvas,html5canvas繪制效率

    html繪制到canvas,html5canvas繪制效率 相關圖片html2canvasCanvas id=Canvas width=600 height=500 style=background color:yellow;/畫布代碼如下:varccanvas html5...

  • exe是什么,taskeng是什么進程

    exe是什么,taskeng是什么進程 相關圖片audiodg是什么進程我確信許多合作伙伴在打開計算機任務管理器之后找到了一個名為domino.exe的進程。那么domino.exe的過程是什么?如何刪除domino.exe?我們別werfault.exe...

  • itunes備份c盤滿了,徹底刪除itunes備份

    itunes備份c盤滿了,徹底刪除itunes備份 相關圖片itunes備份文件通訊錄文件當我們升級或恢復iPhone時,為了防止數據丟失,我們通常使用iTunes備份iPhone數據。那么,iTunes備份文件在哪里?如果你沒有用C盤移動,等等itunes備份了5小時...

  • 表單按鈕,表單提交按鈕

    表單按鈕,表單提交按鈕 相關圖片html5按鈕一。在Dreamweaver 1中插入表單按鈕。單擊鼠標,將光標定位在表單框中,單擊“插入”菜單,選擇表單項,然后在彈出的子菜單中選擇“按鈕”命令,或在“插入”html單選按鈕...

  • 保存網頁怎么保存,保存該網頁

    保存網頁怎么保存,保存該網頁 相關圖片網頁無法保存圖片我相信有很多小伙伴有這樣的經驗。每當他們想打開經常瀏覽的網頁時,他們必須在瀏覽器中查找。那么如何將網頁保存到桌面呢?如何解決網頁無法保存的問題?我...

  • dsp輸出數據到文件,matlab輸出數據到excel

    dsp輸出數據到文件,matlab輸出數據到excel 相關圖片電子秤數據輸出到電腦首先讓我們了解模板文件,模板模板,后綴名是TPL。與HTML文件一樣,TPL文件關注TPL文件中的標記,分別是:begin detail:要替換的模板文件的開頭python保存數據到文...

  • 安卓怎么打開aspx,aspx文件教程

    安卓怎么打開aspx,aspx文件教程 相關圖片愛思助手導入ipad文件在哪里最近,很多小伙伴說,當他們打開電腦時,發現桌面上出現了一個后綴為ASPX的文件。那么ASPX是什么文件?如何打開ASPX文件?讓我們跟隨超人軟件來了解它!...

  • fast無線路由器設置,fw300r無線路由器設置

    fast無線路由器設置,fw300r無線路由器設置 相關圖片fast路由器快速無線路由器是許多用戶在選擇無線路由器時的首選之一。然而,一些用戶在獲得快速無線路由器后卻不知道如何設置它。本文主要是與您分享快速無線路由tplink無線路由器...

  • 網站的靈感來源,靈感網站

    網站的靈感來源,靈感網站 相關圖片產品設計靈感來源不僅僅是網頁設計。世界上我們周圍的一切都能激發我們的網站設計,你永遠不知道什么時候創意的火花會擊中你。在項目的過程中,我經常發現一些最常見的事情可...

關注微信

变脸官网查询