AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

讓CSS官方后悔的一些決定

來源: 責編: 時間:2023-10-13 14:38:03 351觀看
導讀CSS工作組在其官方WIKI[1]總結了這些年CSS在設計上犯的46條失誤。這些錯誤大體可以概括為5類:屬性key、value設計失誤布局、對齊上的設計失誤顏色相關的失誤選擇器設計失誤本文會選一些「我覺得有意思」的失誤來講講。

qOk28資訊網——每日最新資訊28at.com

CSS工作組在其官方WIKI[1]總結了這些年CSS在設計上犯的46條失誤。這些錯誤大體可以概括為5類:qOk28資訊網——每日最新資訊28at.com

  • 屬性key、value設計失誤
  • 布局、對齊上的設計失誤
  • 顏色相關的失誤
  • 選擇器設計失誤

本文會選一些「我覺得有意思」的失誤來講講。完整的失誤列表見上述官方WIKI。qOk28資訊網——每日最新資訊28at.com

!important語法

!important語法用來增加樣式的權重,畢竟,感嘆號通常表達「強調」的意思。但在編程語言中,!通常是「取反」的意思,比如:qOk28資訊網——每日最新資訊28at.com

const isValid = true;!isValid // false

初次接觸CSS的工程師很可能會覺得!important是「不important」的意思,這與該語法實際想表達的意思完全相反。qOk28資訊網——每日最新資訊28at.com

所以,工作組認為!important是個糟糕的語法。qOk28資訊網——每日最新資訊28at.com

z-index語法

z-index屬性用于設置定位元素及其后代元素或flex元素的Z軸層疊順序,z-index較大的元素會疊在較小元素的上面。qOk28資訊網——每日最新資訊28at.com

在編程語言中,index是「索引」的意思,并沒有表達出「層疊」的意思。所以,工作組認為叫z-order或干脆叫depth(深度)會更好。qOk28資訊網——每日最新資訊28at.com

同時,他們也認為,這個屬性應該對所有元素有效(而不是只對定位元素及其后代,以及flex元素有效)。qOk28資訊網——每日最新資訊28at.com

單個元素margin的塌陷

「margin坍塌」是CSS中的基礎特性,假設有2個上下重疊的塊級元素:qOk28資訊網——每日最新資訊28at.com

  • 上面的元素margin-bottom為20px
  • 下面元素margin-top為30px

按照直覺來看,他們之間的margin應該是50px(20px + 30px),但是由于「margin坍塌」,他們之間的margin為其中較大的值(30px)。qOk28資訊網——每日最新資訊28at.com

qOk28資訊網——每日最新資訊28at.com

上面是2個塊級元素之間的「margin坍塌」。qOk28資訊網——每日最新資訊28at.com

對于單個塊級元素,也存在「margin坍塌」 —— 如果一個元素內部沒有內容,或者它的內容被清除(clear)了,那么這個元素的上下margin會發生塌陷。qOk28資訊網——每日最新資訊28at.com

這意味著,即使你為元素的頂部和底部都設置了margin,但實際上他們會合并成一個(值等于兩者中的最大者,而不是它們的總和)。qOk28資訊網——每日最新資訊28at.com

這種塌陷行為可能會導致一些讓人懵逼的布局問題。比如,你試圖通過增加一個元素的margin-bottom來增加它下面的空間,但不起作用,可能就是因為增加的 margin塌陷掉了。qOk28資訊網——每日最新資訊28at.com

所以,CSS工作組認為這不是個好設計。qOk28資訊網——每日最新資訊28at.com

rgb與rgba

rgba與hsla都是設置顏色的屬性,相比于rgb與hsl,他們還可以設置alpha值(透明度)。qOk28資訊網——每日最新資訊28at.com

所以,為啥不直接讓rgb與hsl能夠接收第四個參數(alpha值)呢?工作組很費解 自己當初咋想的。qOk28資訊網——每日最新資訊28at.com

border-radius

border-radius直譯為「邊界半徑」,當初應該取名叫corner-radius(拐角半徑)。qOk28資訊網——每日最新資訊28at.com

畢竟,這就是設置元素拐角處圓角的半徑的啊~~qOk28資訊網——每日最新資訊28at.com

絕對定位的替換元素

所謂「替換元素」,是指「外觀和尺寸由外部資源決定」的元素,比如:qOk28資訊網——每日最新資訊28at.com

  • img
  • object(嵌入的對象,如Flash動畫)
  • video
  • iframe

工作組認為,當「替換元素」被絕對定位時,偏移屬性不應該改變元素的位置,而應該改變尺寸。qOk28資訊網——每日最新資訊28at.com

比如,當對絕對定位的img設置left: 20px; right: 20px;,那么他應該被拉伸到「從左側20px到右側20px」的長度,而不是移動到距離左側20px的位置。qOk28資訊網——每日最新資訊28at.com

這個規則對于響應式布局是非常有用的,因為它允許元素自動調整其大小以適應不同的視口寬度。qOk28資訊網——每日最新資訊28at.com

總結

上面只是挑了幾個我覺得有意思的失誤來聊。除此之外,還有很多是使用習慣上的設計失誤,個人認為比較主觀。比如:qOk28資訊網——每日最新資訊28at.com

  • 子孫選擇器應該使用?符號,即:
// 當前的子孫選擇器div p {  color: green;}// 期望的子孫選擇器div ? p {  color: green;}
  • 兄弟選擇器應該用++符號,即:
// 當前的兄弟選擇器div ~ p {  color: green;}// 期望的兄弟選擇器div ++ p {  color: green;}

不知道上述改動,你能接受么?qOk28資訊網——每日最新資訊28at.com

參考資料

[1]官方WIKI:https://wiki.csswg.org/ideas/mistakes。qOk28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-13590-0.html讓CSS官方后悔的一些決定

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 超越傳統線程:探索Java Loom協程(纖程/虛擬線程)的無限潛力

下一篇: 去哪兒網架構演進之路:微服務的盡頭原來是DDD……

標簽:
  • 熱門焦點
  • K60至尊版剛預熱 一加Ace2 Pro正面硬剛

    Redmi這邊剛如火如荼的宣傳了K60 Ultra的各種技術和硬件配置,作為競品的一加也坐不住了。一加中國區總裁李杰發布了兩條微博,表示在自家的一加Ace2上早就已經采用了和PixelWo
  • 7月安卓手機性價比榜:努比亞+紅魔兩款新機入榜

    7月登場的新機有努比亞Z50S Pro和紅魔8S Pro,除了三星之外目前唯二的兩款搭載超頻版驍龍8Gen2處理器的產品,而且努比亞和紅魔也一貫有著不錯的性價比,所以在本次的性價比榜單
  • 六大權益!華為8月服務日開啟:手機免費貼膜、維修免人工費

    8月5日消息,一年一度的華為開發者大會2023(Together)日前在松山湖拉開帷幕,與此同時,華為8月服務日也式開啟,到店可享六大專屬權益。華為用戶可在華為商城Ap
  • 如何使用JavaScript創建一只圖像放大鏡?

    譯者 | 布加迪審校 | 重樓如果您曾經瀏覽過購物網站,可能遇到過圖像放大功能。它可以讓您放大圖像的特定區域,以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗
  • JavaScript學習 -AES加密算法

    引言在當今數字化時代,前端應用程序扮演著重要角色,用戶的敏感數據經常在前端進行加密和解密操作。然而,這樣的操作在網絡傳輸和存儲中可能會受到惡意攻擊的威脅。為了確保數據
  • 每天一道面試題-CPU偽共享

    前言:了不起:又到了每天一到面試題的時候了!學弟,最近學習的怎么樣啊 了不起學弟:最近學習的還不錯,每天都在學習,每天都在進步! 了不起:那你最近學習的什么呢? 了不起學弟:最近在學習C
  • 本地生活這塊肥肉,拼多多也想吃一口

    出品/壹覽商業 作者/李彥編輯/木魚拼多多也看上本地生活這塊蛋糕了。近期,拼多多在App首頁“充值中心”入口上線了本機生活界面。壹覽商業發現,該界面目前主要
  • 大廠卷向扁平化

    來源:新熵作者丨南枝 編輯丨月見大廠職級不香了。俗話說,兵無常勢,水無常形,互聯網企業調整職級體系并不稀奇。7月13日,淘寶天貓集團啟動了近年來最大的人力制度改革,目前已形成一
  • 中關村論壇11月25日開幕,15位諾獎級大咖將發表演講

    11月18日,記者從2022中關村論壇新聞發布會上獲悉,中關村論壇將于11月25至30日在京舉行。本屆中關村論壇由科學技術部、國家發展改革委、工業和信息化部、國務
Top