分類目錄歸檔：CSS+DIV

2017
08-29

你所不知道的 CSS 動畫技巧與細節

怕標題起的有點大，下述技巧如果你已經掌握了看看就好，歡迎斧正，本文希望通過介紹一些CSS不太常用的技巧，輔以一些實踐，讓讀者可以更加深入的理解掌握CSS動畫。廢話少說，直接進入正題，本文提到的動畫不加特殊說明，皆指CSS動畫。正負旋轉相消嗯。名字起的很奇怪，好像數學概念一樣。（寫完文章才發現這里應該叫正反旋轉相消，圖都截完了，大家心里清楚就好）在動畫中，旋轉是非常常用的屬性... 繼續閱讀 >
2017
08-05

使用 JavaScript 進行即時表單驗證

HTML5引入了幾個新的屬性來實現基于瀏覽器的表單驗證。pattern屬性是一個正則表達式，用于定義textarea元素和大多數input元素類型的有效輸入范圍。required屬性指定某個字段是否需要輸入。對于沒有實現這些屬性的傳統瀏覽器，我們可以使用它們的值作為填充表單的基礎。我們還可以使用它們來提供更有趣的增強功能-即時表單驗證。來自作者的更多內容一個JavaScript可訪問性的失敗實驗的經驗教訓可用的多... 繼續閱讀 >
2017
03-11

2017 年值得學習的 3 個 CSS 新特性

在眾多的CSS新特性中，有3個今年采用的新特性讓我抑制不住地激動。1.特性查詢不久前，我寫了我真心期望的一個CSS特性，就是關于特性查詢，現在基本上可以說它已經存在了！它支持除InternetExploer之外的主流瀏覽器(包括OperaMini)。特性查詢，使用@supports規則，允許我們將CSS包含在一個條件塊中，這個條件塊中會檢查當前useragent是否支持一個CSS屬性鍵值對，在支持的情況下其中的內容才... 繼續閱讀 >
2017
03-11

[譯] 再談 CSS 中的代碼味道

談CSS中的代碼味道回到2012年，我寫了一篇關于潛在CSS反模式的文章CSS中的代碼味道?；乜茨瞧恼?，盡管四年過去了，我依然認同里面的全部內容，但是我有一些新的東西加到列表中。再次說明，這些內容并不一定總是壞的東西，因此把它們稱為代碼味道：在你的使用案例中它們也許可以很好的被接受，但是它們仍然讓人覺得有一點奇怪。在我們開始前，讓我們回想一下什么是代碼味道，摘自維基百科(emphasismine)：... 繼續閱讀 >
2017
03-07

如何使用CSS實現多行文本的省略號顯示

 合理的截斷多行文本是件不容易的事情，我們通常采用幾種方法解決：overflow:hidden直接隱藏多余的文本text-overflow:ellipsis只適用于單行文本的處理各種比較脆弱的javascript實現。之所以說這種實現比較脆弱是由于需要文本長度的變化時刻得到回流（relayout）后的布局信息，如寬度原文寫作時間是2012.9.18號，比較有意義的一天。不過作者忽略了WebKit提供的一個擴展屬性-webkit-lin... 繼續閱讀 >
2017
03-07

CSS3 新特性學習

CSS3是最新的CSS標準，并且完全向后兼容，不過目前W3C仍然在對CSS3規范進行開發，雖然標準的規范還沒有正式發布，但是現代瀏覽器已經支持相當多的CSS3屬性了。CSS3提供了很多可以把玩的新特性，模糊了之前只控制樣式的定義，讓之前很難處理的樣式（如：圓角、多列等）和只能通過Javascript來實現的動畫效果等現在都能通過CSS3新特性提供的屬性很輕松的實現，功能是越來越強大。一、CSS3邊框在css3中新增的... 繼續閱讀 >
2017
02-17

CSS通用數據類型

CSS中屬性的值有著許多種格式。為了讓用戶代理（即瀏覽器）能夠識別一個值是否有效，則需要確認該值是否符合該類值支持的格式的其中一種。這些屬性值所支持的格式叫做數據類型，在規范中用<this>的形式標識。CSS中存在兩種數據類型——特定數據類型和通用數據類型。特定數據類型只與一個單獨的屬性或某一類屬性有關聯。例如，<transform-function>這一數據類型僅僅只能用作transform屬性的值。相反的，通用數據類... 繼續閱讀 >
2017
02-14

2017年值得學習的3個CSS特性

隨著新的一年到來，我們有一整套新的東西要開始學習。雖然今年的新特性有很多，但有3個新的特性是最令我激動不已的。1.FeatureQueries前段時間，我寫過關于FeatureQueries的一篇文章，叫“我最想要的CSS特性之一”。好了，現在它已經出現在這里了。它支持除了IE瀏覽器之外的所有主流瀏覽器（包括OperaMini）。FeatureQueries，使用這個@supports規則，允許我們包含CSS在一個條件塊，但只有當前用戶客戶端支... 繼續閱讀 >
2017
01-17

原來CSS這樣寫是會讓app崩潰的

先廢話一下之前在自己的個人公眾號中提到了一篇利用CSS的方式進行XSS攻擊，當時有朋友跟我說，讓我去獲取那個網站的cookie，再然后進入那個網站的后臺去玩。然而，技術能力實在有限，搞不了這些東西，只是覺得那個網站沒有適當過濾HTML標簽是一件很危險的事情。不過今天要說的CSS代碼真的是讓app崩潰了，至于信不信，看圖就知道咯。故事背景昨晚在被窩中的我突然收到一封郵件，大概內容是說因為... 繼續閱讀 >
2016
12-21

23條前端性能優化，看懂就夠了！

 前端性能優化是個巨大的課題，如果要面面俱到的說的話，估計三天三夜說不完。所以我們就從實際的工程應用角度出發，聊我們最常遇見的前端優化問題。Yslow是雅虎開發的基于網頁性能分析瀏覽器插件，可以檢測出網頁的具體性能值，并且有著名的Yslow23條優化規則，這23條，就夠我們玩的了。1.減少HTTP請求次數盡量合并圖片、CSS、JS。比如加載一個頁面，如果有5個css文件的話，那么會發出5次http請求... 繼續閱讀 >
2016
12-21

前端程序員需要知道的7種新型的CSS長度單位

眾所周知CSS技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對于新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。這就意味著有那么些個特別的貨，雖然平常都不怎么會用上，但是一旦某個地方需要它們了，他們就真的是特么得合適不過來了呢。今兒，... 繼續閱讀 >
2016
12-14

css預處理語言的模塊化實踐

編寫css是前端工作中，一項普通而又頻繁的勞動，由于css并不是一門語言，所以在程序設計上顯得有些簡陋。對于小型項目來說，css的量還不至于龐大，問題沒有凸顯，而如果要開發和持續維護一個較為大型的項目，那就需要對css進行管理和規范了，否則會發生不可挽回的后果（嚇唬誰呢？？）。背景上一節【從css談模塊化】我們通過規范的約束，將css的編寫方式進行了優化和改進，形成一種可持續發展的路線。但還是遺留了一些問題：冗... 繼續閱讀 >
2016
12-14

從css談模塊化

模塊化是現今我們隨處都可以聽到的一個名詞，什么是模塊化？為什么我們需要模塊化？這是本系列文章我們要弄明白的一個問題。我們也借這部分內容，順帶回顧一下前端的發展歷程。 說實話，模塊化這個主題有點大，我一時也不知道從哪里講起比較合適，通常來說，前端的工作內容主要涉及三個方面：html、css、js（javascript），其他的像as（actionscript，flash的腳本語言）、jsp、smarty等等模版類的語法標記我們在此就先略去... 繼續閱讀 >
2016
12-14

十分鐘入門 Less

我們都知道寫CSS代碼是有些枯燥無味的，尤其是面對那些成千上萬行CSS代碼的項目。你始終在相同的地方使用相同的規則并且在你的編譯器中搜索和替換每次顏色的變化。這需要很多的努力和規則來保持你的CSS可維護，但它本不應該這樣的。 很幸運，網站開發社區已經解決了這個問題，現在我們擁有諸如Less,Sass和Stylus之類的預處理器，它們給我們提供了許多優于純CSS的好處。變量-它可以讓你更輕松... 繼續閱讀 >
2016
12-14

CSS 高級布局技巧

隨著IE8逐漸退出舞臺，很多高級的CSS特性都已被瀏覽器原生支持，再不學下就要過時了。用:empty區分空元素兼容性：不支持IE8假如我們有以上列表：<divclass="item">a</div><divclass="item">b</div><divclass="item"></div>我們希望可以對空元素和非空元素區別處理，那么有兩種方案。用:empty選擇空元素：.item:empty{display:none;}或者用:not(:empty)選擇非空元素：.it... 繼續閱讀 >
2016
12-12

原生 CSS 網格布局學習筆記

譯者注：此文適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（NativeCSSgrid）截止目前還沒有被任何正式版本的瀏覽器實現。以下是來自OliverWilliams的帖子.Oliver已經學習了相當長時間的原生CSS網格，可以說是在CSS網格方面有一定的發言權。在這篇文章中，他將以非同尋常的思路分析自己的CSS網格布局學習之路。我比較贊同他的想法，就是學習一門新技術的時候... 繼續閱讀 >
2016
11-29

CSS 各種定位（position）方式的區別

        static：靜態定位是position的默認值，元素框正常生成，也就是沒有定位時的正常顯示。relative：相對定位用法一：元素相對自身的原位置偏移某個距離，但是原本的空間依舊保留，表現為空白。用法二：把一個元素設置為position:relative;可以使該元素的子元素相對該元素絕對定位。absolute：絕對定位元素從文檔流刪除，并相對于包含塊定位。元素... 繼續閱讀 >
2016
11-29

20個CSS 代碼建議

在這篇文章中，我想跟你分享20條由CSS社區推薦的約定和最佳實踐。有些建議可能比較適合新手，而有些則更高級一些，但我希望每個人都可以在本篇文章中收獲自己不知道的知識。1.謹慎使用外邊距屬性與其它的屬性不同，垂直方向上的外邊距相遇時將會發生折疊。這意味著如果一個元素的下邊距遇到了另一個元素的上邊距，那么二者中較大的一個將被留下。下面是一個簡單的例子。<divclass="squarered"></div><divclass="squa... 繼續閱讀 >
2016
10-22

css 實現豎直居中的 N 種場景及 N 種方法

剛開始工作的時候，css里的豎直居中一直是個老大難問題。每次用到的時候都去網上搜，搜，搜，半天才搜到合適的解決方法。然后下次遇到，呃，又忘了~后來仔細回憶了一下，其實CSS實現豎直居中是有幾種不同的應用場景的，需要分別使用不同的解決方法。這也是為啥每次都覺得，誒上次那個解決方法好像不行呢？（原來并不是我智商的問題）好了廢話不多說，記錄下遇到的不同場景及解決方法，希望能對自己或者別人有所幫助。inline或... 繼續閱讀 >
2016
10-22

理解并運用 CSS 的負 margin 值

本文樣式代碼采用SCSS。瀏覽器兼容性為IE6+。你的網頁中，不可能沒有使用過margin。大多數情況下，我們采用的都是正數的margin值，可能有時候會用到負的margin值。在我們的印象中，負的margin值就類似于瀏覽器的hack一樣，不被人接受。但是，本文要說明的就是，負的margin值并不是hack，這是正常范圍內的寫法。Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... 繼續閱讀 >
2016
10-22

CSS中強大的EM

這篇教程將引導大家如何使用“em”來創建一個基本的彈性布局，從而學習其如何計算？又是如何使用“em”對層進行彈性擴展？又是如何擴展文本和圖像等內容？下在我們就一起帶著這些問題開始今天的“em”之行。什么是彈性布局？用戶的文字大小與彈性布局用戶的瀏覽器默認渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在用戶瀏覽器下默認渲染是“16px... 繼續閱讀 >
2016
10-17

CSS3 巧妙實現聊天氣泡

前一陣子敢玩的Mobile頁改版完成了，就之前的頁面風格更加扁平化，從暗色系為主背景轉到亮色背景，去掉更多的陰影，給用戶簡約的體驗風格，哈哈我不是設計師不過多評價啦。悄悄告訴大家所有的style都是我自己寫的。全站哦?。?！下面說正題，說好的聊天氣泡呢？傳統的聊天氣泡什么又是傳統的聊天氣泡,直接上圖代碼如下<divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... 繼續閱讀 >
2016
10-17

七種css方式讓一個容器水平垂直居中 HOT

閱讀目錄方法一：position加margin方法二：diaplay:table-cell方法三：position加transform方法四：flex;align-items:center;justify-content:center方法五：display:flex;margin:auto方法六：純position方法七：兼容低版本瀏覽器，不固定寬高總結這種css布局平時用的比較多，也是面試題常出的一個題，網上一搜一大丟，不過還是想自己總結一下。這種方法比較多，本文只總結其中的幾種，以便加深印象。效果圖都為這... 繼續閱讀 >